Permalänk

Frame/iframe vs. vad?

Okej, nu är det dags för mig att få några saker utredda.
Jag har gjort ett antal hemsidor för olika projekt och så vidare. Men jag har alltid använt mig av frames, eller för det mesta iframes.
Men vad jag har förstått så är frames/iframes inte "inne" längre och inte heller det mest optimala. Så då är min fråga, hur gör man utan frames/iframes som targets?

Som exempel kan jag ta den här lilla sidan som jag håller på att snickra på. Bry er inte om färger/utseende och så vidare för det lär säkert ändras. Tror även att en skruvar till sig i IE, i alla fall för mig. FF är vad jag har gjort den för hittills.

Just nu laddar jag en sida, index.html, som innehåller bakgrundsbilden, länkarna i menyn. I index.html skapar jag en iframe. Och när jag sen klickar i menyn laddar jag bara om iframen med de nya sidorna. Jag tycker det här är en rätt bra lösning. Men om man nu ska göra detta utan en iframe, hur i hela världen bär man sig åt då? Jag vill ju inte behöva ladda om hela sidan varje gång, och inte heller lägga in menyn i varje sida och så vidare. Det är ju en av anledningarna till att man kan använda frames.

Dock så får jag ju det problemet att om texten blir längre än iframen blir det ju scrollning som gäller. Men jag vill ha effekten/utseendet som man har på bloggar m.m. Rulla hela sidan, och inte bara i en frame. Är detta möjligt?

Tacksam för alla kreativa och förklarande svar!

Visa signatur

//Andreas Olsson

Permalänk

Man kan ju använda CSS-boxar, dock så måste ju hela sidan laddas då igen, men om du använder ett .css-dokument och kopplar alla dokument till det så blir det ju lätt att ändra det mesta (textfärger, rubrikfärger, typsnitt osv. (finns massor av bra info på webdesignskolan.se)). Ännu lättare blir det om du använder Dreamweaver och använder Template-saken där, då är det bara att ändra i din mall så ändras hela sidan. Din sista fråga tror jag (om jag uppfattade den rätt) är nog inte möjlig, alltså att det är frames på sidan men alla rullas samtidigt.

Visa signatur

Moderkort: Gigabyte GA-EP45-DS3 CPU: Intel C2Q Q6600 @ 3,61 GHz (1,48 vCore) med ZeroTherm NV120 Prem. GPU: Sapphire Radeon HD6950 1GB Minnen: Kingston HyperX PC6400 2x2GB CL5 HDD: Samsung SpinPoint F1 320GB PSU: Corsair TX650W Chassi: Antec Three Hundred
Citera mig om du vill vara säker på att få svar.

Permalänk

Jo jag vet hur man använder CSS-boxar, divar, layout och den biten. Nu var inte det riktigt något med layouten jag menade, utan hur man ska kunna ladda nya sidor och så utan att använda sig av frames?
Har googlat som en tok och hittat lite om php och include. Är det sådant som man använder sig av för att få det resultatet?

Visa signatur

//Andreas Olsson

Permalänk
Medlem

Har du koll på overflow: auto; ? Det ändlöst med anledningar till att inte använda frames, jag tänker inte räkna upp dem. Men med overflow: auto; och mycket enkel JavaScript kan du göra det du behöver.

Ladda ned jQuery från jquery.com och lägg in <script type="text/javascript" src="jquery.js"></script> i din header (och js-filen på rätt plats naturligtvis). Sedan gör du länkarna såhär:

<style type="text/css"> div#contentbox { height: 150px; border: 1px solid #ccc; overflow: auto; } </style> <div id="contentbox"> Detta syns innan någon sida har laddats </div> <a href="en_sida.html" onclick="$('#contentbox').load('en_sida.html'); return false;"> Ladda en sida med AJAX </a> <a href="en_annan_sida.html" onclick="$('#contentbox').load('en_annan_sida.html'); return false;"> Ladda en annan sida med AJAX </a>

Anledningen till att jag använder onclick och inte href="javascript:..." är för att de utan JavaScript nu kan följa länkarna (inkl. sökmotorer).

EDIT: Nu kommer säkert någon kommentera; "men det är bättre att lägga på onclick-eventet med JS istället", och ja, det är det. Men det steget kan TS ta sedan istället för på en gång, när kanske JS är ett nytt koncept att lära sig.

Det steget kan se ut såhär;

<div id="contentbox"></div> <a href="en_sida.html" class="doAJAX">Länk</a> <script type="text/javascript"> $('.doAJAX').click(function(){ var href= $(this).attr('href'); $('#contentbox').load(href); return false; }); </script>

Permalänk

Hej,
ja, du behöver ett serversidespråk, t.ex. PHP och inkludera filer med det. Att hålla på med javascript för det här ändamålet känns lite väl överarbetat.

Visa signatur

/Mvh Stefan

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av Guru Meditation
Hej,
ja, du behöver ett serversidespråk, t.ex. PHP och inkludera filer med det. Att hålla på med javascript för det här ändamålet känns lite väl överarbetat.

Fem rader kod... tror du det är enklare än så i t.ex. PHP?

Permalänk
Medlem

Server side include motverkar inte att sidan måste laddas om, då måste också använda javascript. Men det spelar oftast ingen roll/märks inte att sidan laddas om, då det mesta är cachat.

Om man kan undvika boxar med scrollbars skulle jag säga att det oftast är bättre, för det är varken snyggt (med standardscrollbars) eller användarvänligt. I det här fallet kan man låta sidan flöda neråt.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Fem rader kod... tror du det är enklare än så i t.ex. PHP?

Nog inte frågan om hur enkelt det är, finns en massa andra skillnader. Till exempel så är server-side mer SEO, bättre för besökare utan JS etc. Men, inga problem att använda AJAX så länge man har en vettig fallback till saker (botar och besökare) som inte har JS.

För övrigt skulle jag vilja rekommendera AJAX Source Kit, som är enkelt, lättviktigt och har en vettig fallback inbyggd. Skulle vilja påstå att det är ett bättre alternativ i det här fallet, då TS inte verkar ha så bra koll på AJAX och därmed inte bör ge sig in på alldeles för djupt vatten för fort.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Nog inte frågan om hur enkelt det är, finns en massa andra skillnader. Till exempel så är server-side mer SEO, bättre för besökare utan JS etc. Men, inga problem att använda AJAX så länge man har en vettig fallback till saker (botar och besökare) som inte har JS.

Om man klarar sig med Google så fungerar båda mina lösningar utmärkt för SEO. Besökare utan JS använder också det som står inom href="" och kommer på så vis till rätt sida, men då måste man iofs använda t.ex. PHP för att ta reda på om requesten kommer från ens JS eller från en icke-JS-besökare, men det stödet anser inte jag vara särskilt viktigt (att lära sig för TS såhär i början). Jag tycker nog i allmänhet att webbutvecklare är lite för rädda för att använda JS, det är verkligen framtiden och man lär sig vikten av korrekt HTML också när man jobbar med DOM.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Om man klarar sig med Google så fungerar båda mina lösningar utmärkt för SEO. Besökare utan JS använder också det som står inom href="" och kommer på så vis till rätt sida, men då måste man iofs använda t.ex. PHP för att ta reda på om requesten kommer från ens JS eller från en icke-JS-besökare, men det stödet anser inte jag vara särskilt viktigt (att lära sig för TS såhär i början). Jag tycker nog i allmänhet att webbutvecklare är lite för rädda för att använda JS, det är verkligen framtiden och man lär sig vikten av korrekt HTML också när man jobbar med DOM.

Jo, men som sagt är det fortfarande viktigt att ha en vettig fallback - bland annat därför jag rekommenderar ASK då det är lättare att implementera om man redan byggt något fint utan AJAX och vill ha kvar det som fallback utan för mycket jobb. Sen vet jag inte hur "verkligen framtiden" JS är, skulle tro att man sa samma sak om Flash och annat... JS är bra i måttliga mängder, personligen tycker jag att stora JS-bibliotek på flera hundra kilobyte bara för att få lite flashiga effekter är att ta i. Man får göra ett övervägande.

Permalänk

Tack för alla svar! Tror jag börjar bli lite mer på det klara med det här.

You: Jag har kollat lite mer på ASK. Det verkar ju vara det som jag söker. Har suttit och pillat lite med det en stund, och fått ett halvt resultat kan jag nog säga. Kolla sidan och gå in på installation får du se vad jag menar. Effekten jag vill göra är ju nästan så
Nu när jag klickar så öppnas den nya sökvägen i nuvarande div och det befintliga innehåller försvinner. Men jag vill ju ha så att när man klickar i menyn, till exempel då på installation, så ska hela delen till höger uppdateras, men länken man klickar på ska finnas kvar.
Är antagligen lite för trött för att klura ut det själv ikväll, så all hjälp uppskattas! Tack för snabba och informativa svar!

[EDIT] Jag fick igång det och det ligger uppe som exempel. Men frågan är nu istället inte hur man får upp dem i nya fönster. Utan hur får man bort dem? Har man en gång öppnat dem kan man inte få bort dem. :S Tack!

Visa signatur

//Andreas Olsson

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Sen vet jag inte hur "verkligen framtiden" JS är, skulle tro att man sa samma sak om Flash och annat... JS är bra i måttliga mängder, personligen tycker jag att stora JS-bibliotek på flera hundra kilobyte bara för att få lite flashiga effekter är att ta i.

Nja, jämförelsen med Flash gillar jag inte. JavaScript kompileras till maskinkod i Chrome, Fx följer efter och det är bara en tidsfråga innan de andra webbläsarna också gör det. Flash är och förblir en extern teknik som inte är integrerad i webbläsarna, JavaScript i modernt utförande har funnits integrerat i alla webbläsare sedan IE4 eller nåt. Du måste ju erkänna att JS har exploderat de senaste åren, AJAX har blivit en självklar del av "Web 2.0" och i och med ramverk såsom jQuery (som för övrigt är på 50 kB) kan vilken nolla som helst nu göra underverk i JS med några få rader kod som tar hand om alla olika typer av DOM-modeller etc.

Flash har alltid varit med som ett bihang, något som designers kan använda för att snygga upp webbplatserna eller som i några få fall kan få ta ut sin rätt i form av 3D-applikationer. Det sistnämnda är vad det borde användas till, och det nästan uteslutande, anser jag. Men hur som helst, kolla t.ex. på www.dragoninteractive.com som inte använder en gnutta Flash, där ligger framtiden. Och det är som du säger, teknikerna har olika användningsområden och syften, så ett beslut måste alltid tas om vilken kompetens man har tillgänglig, vilken målgruppen är o.s.v. och just där på kompetensbiten så tycker jag som sagt att JS-anhängarna är för få. Vi har en relativt stor jQuery-community, men den kunde vara större och åstadkomma mycket mer; att "revolutionera" webben med JS är verkligen inte långt borta, jag går bara omkring och väntar på en IDE för JS-webbutveckling i Ext t.ex. (det ramverket är väldigt stort, ja, men de har gjort ett bra jobb ändå tycker jag).

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Du måste ju erkänna att JS har exploderat de senaste åren, AJAX har blivit en självklar del av "Web 2.0" och i och med ramverk såsom jQuery (som för övrigt är på 50 kB) kan vilken nolla som helst nu göra underverk i JS med några få rader kod som tar hand om alla olika typer av DOM-modeller etc.

Ja, AJAX har exploderat de senaste åren, men det finns hur många exempel som helst på saker som är dåliga även om alla gör det. Jag menar inte att AJAX är dåligt, bara att om man använder det så ska man vara medveten om vad det tillför, vilka problem som uppstår, m.m. och jag tror inte att (även om det var ett tag sedan AJAX kom till) alla är fullt medvetna om det. (Sen, tekniskt sett är ju ingenting vi diskuterar i denna tråden AJAX i dess strikta betydelse, Asynchronous Javascript And XML - det är mest effekter och kanske lite hämtande av HTML eller json).

Man ser det hela tiden med nya tekniker - folk blir som galna över hur bra det är, använder det flitigt och evangeliserar - sedan börjar man fundera, analysera, se konsekvenser. Det gäller att inte gå till överdrift.

Och angående jQuerys storlek (94kB enligt vad jag kan leta fram) - jag körde lightbox på min blogg ett tag, men bytte ut det mot lighterbox då script.aculo.us (~150kB) som lightbox avänder utgjorde mer än 50% av datan som skickades från servern - jag fann det vara oacceptabelt då jag använde det till en funktion som lätt kunde uppnås med mycket mindre kod - har man en stor sida som använder biblioteken flitigt så är det ju givetvis en annan sak.

I alla fall, låt oss undvika att spåra ur denna tråden till något liknande det episka språkkriget, Dec. -08.

Och slutligen, till trådskaparen: Din sida är sjukt bred: http://pici.se/?350284

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Och angående jQuerys storlek (94kB enligt vad jag kan leta fram) - jag körde lightbox på min blogg ett tag, men bytte ut det mot lighterbox då script.aculo.us (~150kB) som lightbox avänder utgjorde mer än 50% av datan som skickades från servern

script.aculo.us har jag aldrig förstått varför folk använder, det är inte ens speciellt trevligt att jobba med och overheaden är enorm. Men jQuery är fortfarande på 53,7 KB så du får nog kolla igen Om man lägger till UI-komponenter så blir det lite större (man lägger till dem modulärt utefter vilka man använder, så mellan 0-140 kB extra), men det är extremt sällan jag haft användning av ens en enda sån. Det finns oftast plugins som är både bättre och mindre.

Permalänk

Tack för svaren!
YOU: Jag har ju som sagt använt mig nu av ASK, och det är ju det jag vill. Har du själv använt det? Det verkar väldigt smidigt, men jag har ett problem jag inte kan lösa. När man har öppnat en sida en gång och gått till en annan så kan man inte öppna den igen. Antagligen för att den redan är "öppnad". Som man ser i adressfältet. Men antagligen behöver man stänga det innehåll man har öppnat. Enligt deras demo på hemsidan så har de inte med den funktionen, och de skriver inte något om det. Så jag undrar lite hur man går till väga för det.

Angående bredden på min sida, jo den är kanske lite stor. 1000px är bredden.. Bör nog ändra det. Finns det några mått man bör gå efter när man gör en sida, och vilken upplösning den ska vara gjord för och så vidare?

Muchas gracias!

Visa signatur

//Andreas Olsson

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av noname.olsson
Angående bredden på min sida, jo den är kanske lite stor. 1000px är bredden.. Bör nog ändra det. Finns det några mått man bör gå efter när man gör en sida, och vilken upplösning den ska vara gjord för och så vidare?

Prova sätt bredden på själva boxen till 800-900px och en margin: 0px auto; på den (du ändrar såklart 0px till önskad lodrät position).

Permalänk
Citat:

Ursprungligen inskrivet av Ivarska
Prova sätt bredden på själva boxen till 800-900px och en margin: 0px auto; på den (du ändrar såklart 0px till önskad lodrät position).

Och med boxen menar du sidan där jag laddar contents, eller totala sidan? For som det är nu är totala bakgrunden 1000px och sidan där jag laggar är cs 500px.
Antar att du menar minska hela sidbredden och inte bara boxen jag laggar det i? Om jag förstår rätt?

Visa signatur

//Andreas Olsson

Permalänk

jag tycker att du ska lägga till float-left: auto; och float-right: auto; (tror det är så iaf var ett tag sen jag höll på) i #background för på min skärm (1680x1050) så blir själva sidan väldigt långt till vänster, ca 5 ggr så mycket mörkgrå bakgrundsfärg på högersidan.

Visa signatur

Moderkort: Gigabyte GA-EP45-DS3 CPU: Intel C2Q Q6600 @ 3,61 GHz (1,48 vCore) med ZeroTherm NV120 Prem. GPU: Sapphire Radeon HD6950 1GB Minnen: Kingston HyperX PC6400 2x2GB CL5 HDD: Samsung SpinPoint F1 320GB PSU: Corsair TX650W Chassi: Antec Three Hundred
Citera mig om du vill vara säker på att få svar.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av JagHeterFelix
jag tycker att du ska lägga till float-left: auto; och float-right: auto; (tror det är så iaf var ett tag sen jag höll på) i #background för på min skärm (1680x1050) så blir själva sidan väldigt långt till vänster, ca 5 ggr så mycket mörkgrå bakgrundsfärg på högersidan.

Finns inte i CSS. Det är margin: 0 auto som gäller.

Permalänk
Medlem

Till Yous och azoapes diskussion skulle jag vilja tillägga min erfarenhet av AJAX:

AJAX är verkligen så fruktanvärt jävla bra som en del säger. Det är ett faktum. Ska man sen göra allt med AJAX bara för sakens skull? Absolut inte. Min förra chef, som förvisso var vad jag skulle kalla en riktig jävla idiot, fastnade så för uttrycket AJAX att han tyckte vi skulle lösa allt med det. Tilläggas bör att karln inte hade en jävla susning om vad det egentligen var. Det slutade med att vi sa "visst", och sen gjorde vi som vi ansåg var bäst och han hade ju inte en jävla aning om det.

Vad jag vill komma till är att AJAX har blivit ett säljord, ett buzzword, något av webbens messias, och det är det inte. Lika lite som Flash är det. (Hur de som förespråkar flash till allting kan leva med sig själva är bortom min förståelse, men de finns tyvärr därute och det är oftast de som bestämmer vad som ska köpas in )

Tyvärr har jag inte mycket att bidra med till trådskaparen, då jag anser att han har fått utmärkt hjälp redan

Permalänk
Avstängd

Varför meka med iframes? finns bättre sätt.

Visa signatur

Knowledge is not achieved until shared.

Permalänk

darkmoon: intressant inlägg, och ja, jag har fått bra hjälp och löst det med jQuery till slut.

invztr: Det var just därför jag skapade tråden; för att få förklarat vad man ska använda istället för iframes.

Visa signatur

//Andreas Olsson

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av darkmoon
Till Yous och azoapes diskussion skulle jag vilja tillägga min erfarenhet av AJAX:

AJAX är verkligen så fruktanvärt jävla bra som en del säger. Det är ett faktum. Ska man sen göra allt med AJAX bara för sakens skull? Absolut inte. Min förra chef, som förvisso var vad jag skulle kalla en riktig jävla idiot, fastnade så för uttrycket AJAX att han tyckte vi skulle lösa allt med det. Tilläggas bör att karln inte hade en jävla susning om vad det egentligen var. Det slutade med att vi sa "visst", och sen gjorde vi som vi ansåg var bäst och han hade ju inte en jävla aning om det.

Vad jag vill komma till är att AJAX har blivit ett säljord, ett buzzword, något av webbens messias, och det är det inte. Lika lite som Flash är det. (Hur de som förespråkar flash till allting kan leva med sig själva är bortom min förståelse, men de finns tyvärr därute och det är oftast de som bestämmer vad som ska köpas in )

Tyvärr har jag inte mycket att bidra med till trådskaparen, då jag anser att han har fått utmärkt hjälp redan

Är av samma åsikt som du, AJAX må ha sina användningsområden men det är inte alltid rätt. I just det här fallet är det lite gränsfall - personligen skulle jag inte använda AJAX här, men det är upp till trådskaparen.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Är av samma åsikt som du, AJAX må ha sina användningsområden men det är inte alltid rätt. I just det här fallet är det lite gränsfall - personligen skulle jag inte använda AJAX här, men det är upp till trådskaparen.

Även jag håller med, men tyckte här att den snabbaste och bästa vägen till en fungerande sida för honom var via jQuery. Men eftersom du tror/trodde att SEO påverkas så förstår jag dig.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Även jag håller med, men tyckte här att den snabbaste och bästa vägen till en fungerande sida för honom var via jQuery. Men eftersom du tror/trodde att SEO påverkas så förstår jag dig.

Står fast vid att SEO påverkas negativt av AJAX, speciellt om man använder det fel och/eller inte riktigt har koll på hur saker fungerar. Nu har du ju pekat TS i rätt riktning så SEO inte lider i detta fallet, men det finns sjukt hemska lösningar där ute.

Och jag tycker egentligen att det finns två saker man ska undvika att göra med AJAX: navigering (dvs. menyer) och hela sidor som i detta fallet. Det är onödigt. Däremot är AJAX trevligt i andra sammanhang, t.ex. kommentar-formulär, där kommentaren dyker upp utan att hela sidan laddas om, mindre viktigt innehåll som bör uppdateras i intervall, etc. — ofta lämpar sig AJAX när man ska ta emot data från användaren och ur denna data generera något som ska visas, då ger AJAX lite flyt åt applikationen.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Står fast vid att SEO påverkas negativt av AJAX.

Ge exempel på en länk eller ett behov som inte går att ajaxifiera på ett SEO-vänligt sätt.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Ge exempel på en länk eller ett behov som inte går att ajaxifiera på ett SEO-vänligt sätt.

Jag uttrycker mig tydligen lite fel/otydligt. Menar fortfarande att det blir mer jobb, det krävs mer eftertanke och man måste vara mer uppmärksam. Det går förmodligen alltid att göra en SEO-vänlig lösning men man måste vara mer uppmärksam på vad man gör, och applikationen måste vara designad på ett visst sätt.

Har du t.ex. ett stycke du hämtar med AJAX blir det jobbigt att få sökmotorer att se det stycket. Har man - som i det här fallet - länkar som ska hämta AJAX-innehåll så är det enkelt att lösa. Tycker dock fortfarande att AJAX är överflödigt i det här fallet.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Jag uttrycker mig tydligen lite fel/otydligt.

Japp, jag gick nämligen på att du sa:

Citat:

SEO påverkas negativt av AJAX, speciellt om man använder det fel

vilket inte samtidigt kan innebära det du sa nu. Men då förstår jag.