Undersidor på puls.se

Här följer en beskrivning på hur man kan dela upp sin presentationssida på puls.se i flera sidor med hjälp av JavaScript. Som en parantes kan nämnas att det istället går utmärkt att använda en s.k. iframe som man länkar till sidor som ligger på en annan webserver. Fördelen med JavaScript-lösningen är bland annat att hela sidan ligger på puls.se och man behöver därmed inte ha tillgång till ett webhotell eller liknande. Nackdelen är att sidan blir lite mer svårredigerad.

Överst i din hemsideskod skapar du alla sidor utom huvudsidan. Du skapar en JavaScript-sträng per undersida och fyller denna med det innehåll du vill ha i HTML-format. I exemplet nedan skapar jag tre undersidor.

<script language="JavaScript">
S1 = 'Första sidan';
S2 = 'Andra sidan, med länk till <a href="http://www.aftonbladet.se">Aftonbladet</a>';
S3 = 'Tredje sidan<br />Denna gången med radbrytning!';
</script>

För att kunna klicka mig runt bland mina sidor behöver jag en meny. Menyn kommer i mitt exempel att ligga överst på sidan och vara densamma hela tiden. Det är inte svårt att skapa olika menyer för olika sidor, men det är överkurs för denna beskrivningen.

I min meny har jag fyra val:

• ”Start” för huvudsidan
• ”Del 1” för första undersidan (S1)
• ”Del 2” för första undersidan (S2)
• ”Del 3” för första undersidan (S3)

Lägg märke till att min Start-länk pekar direkt på min presentationssida. Eftersom jag oftast redigerar min startsida vill jag att denna ska vara enkel att redigera och genom att göra så här slipper jag använda JavaScript-strängar för just startsidan.

<a href="http://www.puls.se/members/pages/homepage.cfm?external=0&memberid=17139"> Start </a>
<a href="#" onClick="document.getElementById('C').innerHTML=S1;">Del1</a>
<a href="#" onClick="document.getElementById('C').innerHTML=S2;">Del2</a>
<a href="#" onClick="document.getElementById('C').innerHTML=S3;">Del3</a>

Slutligen skapar jag platshållaren för innehållet och lägger in huvudsidan. Platshållaren skapas av HTML-taggen <span> och heter i mitt exempel ”C”. Innanför denna span-tagg skriver jag innehållet på min huvudsida.

<span id="C">
Den ordinarie presentationssidan hamnar här!
</span>

Lösningen fungerar på följande sätt: När man klickar på en underside-länk letar webläsaren upp platshållaren genom anropet document.getElementById(C). Webläsaren byter sedan ut innehållet i denna, dvs allt mellan <span> och </span>, mot innehållet i den sträng jag tilldelar den till, t.ex. S1. När jag klickar på ”Start”-länken laddas hela sidan om jag den huvudtexten hamnar åter i platshållaren.

För att få ihop allting till en bra helhet måste du rensa bort alla överflödiga radbrytningar. Detta gör undersidorna en aning mer svårredigerade, men det är tyvärr ett pris du måste betala för att slippa en massa onödig luft. Exemplet ser i sin helhet ut som följer:

<script language="JavaScript">S1 = 'Första sidan'; S2 = 'Andra sidan, med länk till <a href="http://www.aftonbladet.se">Aftonbladet</a>'; S3 = 'Tredje sidan<br />Denna gången med radbrytning!'; </script><a href="http://www.puls.se/members/pages/homepage.cfm?external=0&memberid=17139"> Start </a> <a href="#" onClick="document.getElementById('C').innerHTML=S1;"> Del 1 </a> <a href="#" onClick="document.getElementById('C').innerHTML=S2;"> Del 2 </a> <a href="#" onClick="document.getElementById('C').innerHTML=S3;"> Del 3 </a>

<span id="C">Här är min huvudsida!</span>


Tips:

• Du kan inte göra vanliga radbrytningar i undersidorna, använd <br /> istället.
• Den första länken (”Start”) byter du givetvis ut mot en länk till din sida. Utgå från ditt nickname i t.ex. ett forum- eller gästboksinlägg så du får en länk som andra kan använda.
• Dina undersidor blir lite röriga att redigera eftersom de inte har radbrytningar i sig. Ett tips är att spara en kopia *med* radbrytningar som du redigerar, när du sedan klistrar in resultatet på puls tar du bort dessa (annars ser hela din sida konstig ut!).
• Tänk på att du inte kan använda enkelfnuttar i din HTML för undersidorna, eftersom JavaScript-strängen då avslutas.
• Backup, backup, backup! Kopiera/klistra en kopia på din sida innan du ändrar!
• Utgå gärna från exemplet för att skapa din egen sida!