Ved hjelp av CSS er det fullt mulig å skifte fargen på scrollbarene du har på siden din. Personlig liker jeg ikke denne effekten, og jeg føler ikke at jeg har nok frihet til å gjøre det jeg ønsker. Da jeg nylig ønsket et alternativ til iframe på siden min, hvor jeg også skulle ha muligheten til å kontrollere scrollbaren, satt jeg meg ned ved tegnebordet. Resultatet ble bedre enn jeg hadde håpet på.
Jeg får ofte spørsmål om hvordan man kan skifte farge på scrollbaren på en webside. Dette kan gjøres ved hjelp av CSS (Cascading Style Sheet) har jeg da fortalt, og en innføring på hvordan det kan gjøres finnes i Tips og Triks seksjonen her på ITpro.
Men det er ikke alltid dette en er ute etter, blant annet fordi denne funksjonen kun fungerer i IE 5.5 eller nyere (den er slått av som standard i Opera). Fram til nå har jeg ikke funnet noen god innføring i hvordan man selv kan bestemme hvordan scrollbaren skal se ut, uten at hver enkelt bruker skal være tvunget til å endre innstillinger lokalt på sin maskin.
Dette problemet ble en realitet for meg da jeg skulle forandre på en side jeg har laget. Jeg ønsket en enkel boks i menyen min der hvor jeg kunne legge ut noen elementer fra et arkiv. Jeg fant ut at denne boksen kunne bli litt stor, og av den grunn ønsket jeg å kutte ned på den. Det er mange måter å gjøre dette på, et alternativ jeg har sett flere steder er å bruke ilayer eller iframe. Allikevel syntes jeg ikke dette var noe godt alternativ, rett og slett fordi jeg ikke liker å bruke rammer på websider.
Det å lage denne boksen er derimot veldig enkelt å gjøre i CSS. Det er også en annen fordel ved å bruke CSS, og det er at det er lettere å lage kode som fungerer i mange ulike nettlesere, i tillegg til at CSS er fremtiden innenfor utseende på websider.
Jeg startet å konstruere boksen min, og samtidig skrive css koden som skulle til for å gi denne boksen en størrelse på 200px*200px. Resultatet jeg kom frem til var som følgende:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id wisi vel wisi hendrerit adipiscing. Duis congue laoreet risus.
<style type="text/css"> .hidden { width: 200px; height: 200px; overflow: auto; border: 1px #999999 dashed; border-right: 0px; } .content { font-size: 10px; font-family: arial; color: #000000; background: #FFFFFF; } .scroll_headline { background: #FFCB97; } .scroll_tekst { padding-left: 5px; padding-right: 3px; } </style> <div class="hidden"> <div class="content"> <div class="scroll_headline"> + 05.03.2004 </div> <div class="scroll_tekst"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pulvinar enim et magna. Quisque rutrum mollis orci. Nam sit amet magna. Sed consequat. In wisi orci, commodo in, mollis sit amet, rhoncus nec, diam. </div> <br /> <div class="scroll_headline"> + 03.03.2004 </div> <div class="scroll_tekst"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pulvinar enim et magna. Quisque rutrum mollis orci. Nam sit amet magna. Sed consequat. In wisi orci, commodo in, mollis sit amet, rhoncus nec, diam.<br /><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id wisi vel wisi hendrerit adipiscing. Duis congue laoreet risus. </div> </div> </div> 
Jeg er fornøyd med resultatet så langt, men det er langt igjen dit jeg vil. Scrollbaren passer ikke inn i det designet jeg ønsker, men hvordan kan man forandre på det? Dersom du bruker Tech-temaet på ITPro og Internet Explorer 5.5 eller høyere vil du antageligvis legge merke til at scrollbaren er tilpasset designet, den er grå og sort. Men da jeg hadde kommet til dette punktet begynte jeg å tenke på hva jeg kunne gjøre dersom jeg ønsket en helt egen stil på scrollbaren, siden jeg ikke kunne nøye meg med kun å forandre farge. Jeg fant ut at det enkleste ville være å lage et bilde som så ut slik som jeg ønsket det, og så fortsette videre derfra senere.
Jeg åpnet derfor et bilderedigeringsprogram og begynte å tenke. Selv bruker jeg Adobe Photoshop 7.0, men det er ikke så viktig hvilket program du velger. Jeg vet at jeg kommer til å bli hatet for dette i lang tid fremover, men personlig liker jeg scrollbarene som finnes i Windows XP. Problemet er at de ikke passer helt med det designet jeg bruker på min web-side, så det må litt redigering til. Etter litt prøving og feiling kom jeg frem til det resultatet du ser på bildet til høyre.
Denne lagde jeg ved å trykke på “print screen” knappen på tastaturet og klippe ut scrollbarene i Adobe Photoshop. Deretter gjennomgikk de en hard behandling før jeg fant ut at det enkleste var å legge på et “Hue/Saturation” filter (CTRL + U i Photoshop). Mine innstillinger var: Hue: 27 – Saturation: 73 – Lightness: 0 med colorized alternativet valgt. Jeg ble ikke helt fornøyd med effekten, så jeg fant frem penselen og gikk løs på scrollbaren. Deretter tegnet jeg opp pilene på knappene på nytt for å få dem sorte.
Nå som scrollbarene eksisterte i form av et bilde tenkte jeg at jeg ikke hadde mye igjen (Så feil kan man ta). For å klare å lage denne scrollbaren om til en scrollbar jeg kan bruke på nettsiden min fant jeg ut at jeg måtte dele den opp i mindre biter. Grunnen til at jeg valgte å gjøre dette er at jeg da har muligheten til å beregne hvor stor den skal være, slik at scrollbaren vil kunne forandre størrelsen alt etter hvor mye tekst det er i boksen. På denne måten vil den ligne mer på en vanlig scrollbar.
Jeg lagret de forskjellige bitene som ulike bilder i gif formatet og kunne endelig starte med den morsomme biten; Matematikken. Vel, det var ikke akkurat matte jeg gledet meg til, men nå skulle jeg iallefall få se noen virkelige resultater. Problemet er at det ikke finnes noen metoder for å skifte scrollbaren på en nettside med egne bilder, så denne prosedyren måtte jeg dermed skrive selv. Jeg valgte å bruke javascript til å løse denne oppgaven.
Men hvordan er det nå man kan klare å få en tekst til å scrolle ved å klikke på noen linker/knapper/bilder eller hva du nå velger? CSS kombinert med javascript er løsningen. I CSS 2.0 kom position egenskapen, som gjør at du kan bestemme posisjonen til et element, og ved å legge til overflow egenskapen klarte jeg å lage boksen med scrollbar som ble omtalt tidligere i guiden. Ved hjelp av javascript kan du endre style attributten til et element dynamisk. Dette gjøres ved hjelp av syntaksen object.style["attributt"] = “verdi”; og det er altså dette jeg fant ut at jeg kunne benytte meg av. Dersom du tar en titt på den følgende koden forstår du kanskje hva jeg mener:
<script language="javascript" type="text/javascript"> function setStyleById() { var tekst = document.getElementById("fargediv"); tekst.style["color"] = document.fargeskjema.farge.value; } </script> <div id="fargediv" style="color: #FF0000">Klikk på knappen for å endre farge.</div> <form name="fargeskjema"> <input type="text" name="farge" value="#0000FF"> <input type="button" value="Endre farge" onclick="setStyleById()"> </form>“Ok, da vet jeg hvordan man endre style ved hjelp av javascript, men hva hjelper det?” hører jeg i det fjerne. Dette er egentlig et lite gjennombrudd. Det er ikke uten grunn at jeg nevnte position og overflow egenskapene tidligere. Dersom vi lager to nestede <div>-tagger, og legger overflow:hidden; i den ytterste <div>-taggen, og position: absolute; top: 0px; i den innerste, samtidig som vi setter størrelsen 200px*200px i begge <div>-taggene har vi kommet et stykke på vei. Dersom det nå er nok tekst i boksen vil teksten bli klippet bort nederst, og boksen, eller <div>-taggen, vil aldri bli større enn 200px*200px. Det neste vi så kan gjøre er å lage en funksjon i javascript som forandrer stilen til den innerste <div>-taggen fra position: absolute; top: 0px; til for eksempel position: absolute; top: -20px;. Du vil oppleve dette som om teksten scroller oppover. I eksempelet nedenfor er det laget en funksjon for å scrolle opp og en funksjon for å scrolle ned:
<script language="javascript" type="text/javascript"> var pos = 0; function setStyleById(pixel) { var tekst = document.getElementById("inner"); pos += pixel; tekst.style["top"] = pos; } </script> <div id="box" style="width:200px;height:200px;overflow:hidden;border:1px #000000 dashed;"> <div id="inner" style="width:200px;height:200px;position:absolute;top:0px;"> Morbi lacus. Nam sollicitudin urna eget risus. Fusce nunc. Fusce orci. Sed in sem. Praesent aliquam turpis ac odio. In pellentesque mauris vitae arcu. Morbi lacus. Nam sollicitudin urna eget risus. Fusce nunc. Fusce orci. </div> </div> <input type="button" value="Flytt opp" onclick="setStyleById(-20)"> <input type="button" value="Flytt ned" onclick="setStyleById(20)">Da skulle man tro at vi nesten er i mål, og det kunne vi vært. Nå kunne vi lagt opp bildene vi har laget av scrollbaren, plassert dem til høyre for <div>-taggen og deretter lagt til javascriptkoden på opp og ned pilen. Denne løsningen ville fungert greit, men er det ikke vanlig at selve midtdelen av scrollbaren flytter på seg i takt med innholdet? Det er vel også vanlig at midtdelen blir liten dersom det er mye tekst, og omvendt? Det er her matematikken som jeg snakket om i sted kommer inn i bildet, for det er nemlig ganske kompliserte beregninger som skal til. Nå ja, jeg synes det var komplisert da jeg skulle regne ut dette iallefall, men du trenger igrunnen kun å lese gjennom og si til deg selv at du ville tenkt på akkurat det samme selv.
Nedenfor finner du fullstendig javascriptkode til scrollbaren. Det er tatt med i betraktning at du kanskje har lyst til å ha flere scrollbarer på en side, og dette gjorde koden litt tyngre. Dette var en funksjon jeg igrunnen ikke hadde bruk for selv, men jeg antar at spørsmålet ville ha kommet senere og tenkte at det var bedre å være føre var enn etter snar (hadde jeg på den annen side visst hvor mye problemer dette lagde ville jeg nok heller ha valgt å være “etter snar”). Uansett, nå er det slutt på ventetiden:
<script language="javascript" type="text/javascript"> <!-- // // ****************************** // Denne må IKKE endres // ****************************** var divHeight = new Array(); // ******************************************** // Du må endre verdiene nedenfor så de passer // med de verdiene du har oppgitt i css og html // ******************************************** // Antall scrollbokser du har på siden antallDiv = 2; // Her setter du høyden til div nummer 'n'. // Dersom du har flere div kopierer du // og lager en ny en med neste nummer. divHeight[1] = 200; divHeight[2] = 300; // Her kan du sette hastigheten. Høyere tall // er raskere. speed = 4; // Her har du høyden til pilene opp og ned. // Høyden er angitt i pixler. arrowHeight = 17; // Minstehøyden til baren i midten. // Dette utgjør bildene på toppen og i midten // av midtbaren. ekstraHeight = 12; // ******************************************** // ## ADVARSEL ## // Du må IKKE endre noe av scriptet nedenfor // med mindre du vet hva du gjør. All redigering // nedenfor denne linjen gjøres på eget ansvar. // ******************************************** // Deklarerer tabeller var divArray = new Array(); var barHeight = new Array(); for (x=1;x<=antallDiv;x++) { divArray[x] = 0; barHeight[x] = divHeight[x] - (arrowHeight*2); //Kalkulerer maksimumshøyde på midtbaren } var scrollLength = 0; function setStyleById(antall, number) { var scroll = document.getElementById("content_"+number); var divScrollBar = document.getElementById("sbar_"+number); tekstHeight = scroll.offsetHeight; if (tekstHeight <= divHeight[number]) { imageHeight = (barHeight[number]-ekstraHeight)/2; }else{ imageHeight = (((divHeight[number]/tekstHeight)*barHeight[number])/2); } if (imageHeight < (ekstraHeight)) { imageHeight = ekstraHeight; } fyll1 = document.getElementById("sbarmidup_"+number); fyll2 = document.getElementById("sbarmiddown_"+number); fyllvalue = imageHeight; fyll1.style["height"] = fyllvalue; fyll2.style["height"] = fyllvalue; divFaktiskHoyde = (tekstHeight - divHeight[number]); if (divFaktiskHoyde < 0) { divFaktiskHoyde = 0; } divFaktiskHoyde = divFaktiskHoyde*(-1); divArray[number] = divArray[number] + antall; if (divArray[number] > 0) { divArray[number] = 0; }else if (divArray[number] < divFaktiskHoyde) { divArray[number] = divFaktiskHoyde; }else{ divArray[number] = divArray[number] + antall; } scroll.style["top"] = divArray[number]; if (divArray[number] != 0) { scrollLength = ((((barHeight[number]-((imageHeight*2)+ekstraHeight))))); scrollLength = (((scrollLength/divFaktiskHoyde)*divArray[number])+arrowHeight+2); divScrollBar.style["top"] = scrollLength } } function movedown(number){ setStyleById(speed, number); movedownvar=setTimeout("movedown("+number+")",20) } function moveup(number){ setStyleById(-1*speed, number); moveupvar=setTimeout("moveup("+number+")",20) } function setCorrectHeight() { for (i=1;i<=antallDiv;i++) { setStyleById(0, i); } } // --> </script>Som vi enkelt ser fungerer denne koden akkurat slik den skal fungere (grunnen til at noen kan ha problemer med å se dette er kanskje fordi jeg sluttet å kommentere koden halvveis. Dette har absolutt ingenting med at jeg ikke orket å kommentere mer :p, det handler mer om at jeg ønsket at du skulle lære mer når du måtte sette deg mer inn i koden for å forstå den). Koden kalkulerer først høyden på scrollbaren ut i fra de opplysningene du har fyllt inn øverst. Dette er også grunnen til at jeg delte opp scrollbaren i flere deler. Dermed kan jeg rett og slett stille inn høyden til delene mellom ikonet på midten og toppen av midtscrollbaren, og det vil se bra ut uansett hvor høy scrollbaren er. Etter at høyden er beregnet, beregner koden hvor mye tekst som finnes i forhold til hvor høy boksen skal være. På bakgrunn av denne informasjonen finner den også ut hvor sakte scrollbaren få gå nedover i forhold til hvor fort teksten går oppover.
Det siste som skjer er at den lagrer informasjon om hvor alle de ulike scrollbarene på siden befinner seg, før den sørger for at scrollbaren går motsatt vei av teksten. Når teksten går oppover skal jo scrollbaren gå nedover. Sånn som koden er satt opp der er den for to tekstbokser, og dersom du kun skal ha èn må du redigere to linjer i toppen av koden. Den første er å endre antallDiv = 2; til antallDiv = 1;, og du må også fjerne eller kommentere ut linjen hvor det står divHeight[2] = 300;. Det er de samme linjene du skal endre dersom du ønsker flere scrollbokser enn 2. Scriptet har ingen maksimumsgrense for dette, så lenge det er innenfor rimelighetens grenser.
Da har vi kommet langt på vei, og det neste steget er å se på CSS koden som trengs for at scrollbaren skal fungerer på en ordentlig måte. Deler av koden kan virke litt overflødig, og du tenker kanskje at mange av klassene kunne, og kanskje også burde, ha blitt slått sammen. Siden jeg er klar over dette er det antagelig også en grunn til at jeg har valgt å gjøre det på denne måten. Årsaken er så enkel som at dersom du skal ha flere tekstbokser på siden vil du på denne måten gjøre så lite som mulig for hver nye tekstboks med scrollbar som du setter inn. Denne koden kan selvfølgelig slenges inn i et ekstern stilsett dersom du foretrekker det.
<style type="text/css"> #scrollboks_1 { position: absolute; top: 200px; left: 300px; width: 200px; height: 200px; } #hidden_1 { /* ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ Må være #scrollboks_1 sin bredde minus bredden av scrollbaren (16px) ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ */ width: 184px; /* ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ Må være lik #scrollboks_1 sin høyde. Denne må stilles på i scriptet også! ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ */ height: 200px; } #scrollbar_1 { width: 16px; height: 200px; position: absolute; right: 0px; top: 0px; background: #FFE5CA; } #scrollboks_2 { position: absolute; top: 200px; left: 550px; width: 200px; height: 300px; } #hidden_2 { width: 184px; height: 300px; } #scrollbar_2 { width: 16px; height: 300px; position: absolute; right: 0px; top: 0px; background: #FFE5CA; } .content_boks_class { position: relative; top: 0px; font-size: 10px; font-family: arial; color: #000000; background: #FFFFFF; } .up { position: absolute; top: 0px; right: 0px; } .down { position: absolute; bottom: 0px; right: 0px; } .sbar_class { position: absolute; top: 18px; right: 0px; width: 16px; height: 60px; } .sbarmid_class { width: 16px; height: 0px; } .scroll_headline { background: #FFCB97; } .scroll_tekst { padding-left: 5px; padding-right: 3px; } .hidden_boks_class { position: relative; top: 0px; left: 0px; overflow: hidden; border: 1px #999999 dashed; border-right: 0px; } </style>Fordi guiden allerede er lang nok som den er har jeg droppet å kommentere store deler av CSS-koden, rett og slett fordi det ikke er noe hokus pokus med den. Jeg har kommentert de to stedene som jeg mente det var nødvendig, og regner med at resten er forståelig dersom du har grunnleggende kjennskap til CSS og stilsett. Dersom du skal ha flere bokser enn 2 må du kopiere de tre øverste id-ene og slenge på et 3-tall på slutten av de du kopierer inn osv. Scrollbar_n (hvor ‘n’ er et tall) må naturlig nok ha samme høyde som Scrollboks_n.
Den siste delen av koden er HTML-koden, som ikke er fullt så avansert som de andre delene av koden for scrollboksene våre:
<!– ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
Det er viktig å få body-taggen riktig
dersom du ønsker å få stilt inn riktig
høyde på midtdelene i det scripter lastes
og ikke når du først begynner å scrolle.
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
–>
<body onload=”setCorrectHeight();”>
<!– Scrollboks nummer 1 –>
<div id=”scrollboks_1″>
<!– Ramme –>
<div class=”hidden_boks_class” id=”hidden_1″>
<!– Innhold –>
<div class=”content_boks_class” id=”content_1″>
<!– Element 1 –>
<div class=”scroll_headline”>
+ 05.03.2004
</div>
<div class=”scroll_tekst”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.
</div>
<!– Element 1 – Slutt –>
<br />
<!– Element 2 –>
<div class=”scroll_headline”>
+ 03.03.2004
</div>
<div class=”scroll_tekst”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer id wisi vel wisi hendrerit adipiscing.
Duis congue laoreet risus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer id wisi vel wisi hendrerit adipiscing.
Duis congue laoreet risus.
</div>
<!– Element 2 – Slutt –>
</div>
<!– Innhold – Slutt–>
</div>
<!– Ramme – Slutt –>
<!–Scrollbar –>
<div id=”scrollbar_1″>
<div class=”up”><img src=”up.gif” width=”16″ height=”17″ alt=”" onmousedown=”movedown(1);” onmouseup=”clearTimeout(movedownvar)” /></div>
<div class=”sbar_class” id=”sbar_1″><img src=”mtopp.gif” width=”16″ height=”2″ alt=”"/><img src=”mmid.gif” width=”16″ alt=”" class=”sbarmid_class” id=”sbarmidup_1″ /><img src=”mikon.gif” height=”8″ width=”16″ alt=”" /><img src=”mmid.gif” width=”16″ alt=”" class=”sbarmid_class” id=”sbarmiddown_1″ /><img src=”mbunn.gif” height=”2″ width=”16″ alt=”" /></div>
<div class=”down”><img src=”down.gif” width=”16″ height=”17″ alt=”" onmousedown=”moveup(1);” onmouseup=”clearTimeout(moveupvar)” /></div>
</div>
<!– Scrollbar – Slutt –>
</div>
<!– Scrollboks nummer 1 – Slutt>
<!– Scrollboks nummer 2 –>
<div id=”scrollboks_2″>
<!– Ramme –>
<div class=”hidden_boks_class” id=”hidden_2″>
<!– Innhold –>
<div class=”content_boks_class” id=”content_2″>
<!– Element 1 –>
<div class=”scroll_headline”>
+ 05.03.2004
</div>
<div class=”scroll_tekst”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.
</div>
<!– Element 1 – Slutt –>
<br />
<!– Element 2 –>
<div class=”scroll_headline”>
+ 03.03.2004
</div>
<div class=”scroll_tekst”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer id wisi vel wisi hendrerit adipiscing.
Duis congue laoreet risus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer id wisi vel wisi hendrerit adipiscing.
Duis congue laoreet risus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pulvinar enim et magna. Quisque rutrum mollis orci.
Nam sit amet magna. Sed consequat. In wisi orci, commodo in,
mollis sit amet, rhoncus nec, diam.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer id wisi vel wisi hendrerit adipiscing.
Duis congue laoreet risus.
</div>
<!– Element 2 – Slutt –>
</div>
<!– Innhold – Slutt–>
</div>
<!– Ramme – Slutt –>
<!–Scrollbar –>
<div id=”scrollbar_2″>
<div class=”up”><img src=”up.gif” width=”16″ height=”17″ alt=”" onmousedown=”movedown(2);” onmouseup=”clearTimeout(movedownvar)” /></div>
<div class=”sbar_class” id=”sbar_2″><img src=”mtopp.gif” width=”16″ height=”2″ alt=”"/><img src=”mmid.gif” width=”16″ alt=”" class=”sbarmid_class” id=”sbarmidup_2″ /><img src=”mikon.gif” height=”8″ width=”16″ alt=”" /><img src=”mmid.gif” width=”16″ alt=”" class=”sbarmid_class” id=”sbarmiddown_2″ /><img src=”mbunn.gif” height=”2″ width=”16″ alt=”" /></div>
<div class=”down”><img src=”down.gif” width=”16″ height=”17″ alt=”" onmousedown=”moveup(2);” onmouseup=”clearTimeout(moveupvar)” /></div>
</div>
<!– Scrollbar – Slutt –>
</div>
<!– Scrollboks nummer 2 – Slutt>
</body>
Som de andre delene av koden er også HTML-koden tilpasset til to scrollbarer. Den koden som er mellom kommentaren <!– Scrollboks nummer 1> og <!– Scrollboks nummer 1 – Slutt> er den koden som tilhører den første scrollboksen. Det er dette som må kopieres dersom du skal ha enda en scrollboks, og da må alle 1 (ett) tallene erstattes med neste tall i rekken, som for dette scriptet blir 3 (tre) (det er allerede 2 bokser). Merk: Tallene i kommentarene trenger du ikke skifte navn på. Dersom du er usikker sjekk ut forskjellen mellom boks nummer 1 og boks nummer 2.
Nedenfor er den koden som er blitt vist gjennom denne guiden samlet til et script, og du kan få se hvordan det til slutt vil se ut. Dersom du ønsker å forandre utseende gjelder det bare å lage noen tabeller eller forandre CSS-koden, men grunnprinsippet har du iallefall lært i denne guiden:
Jeg håper du synes guiden var interessant og at du har lært noe av den. Jeg blir glad for kommentarer og innspill, og dersom du har problemer kan du slenge inn en kommentar, legge inn et innlegg i supportforumet eller sende meg en privat melding så skal jeg se hva jeg kan få gjort. Jeg har også en dragbar scrollbar i tankene, men er litt usikker på hvordan det kan løses. Send meg gjerne en melding dersom du har noen tips.
Last ned en zip fil med alle filene du trenger for å bruke denne scrollbaren (23 KB).
Sender din rapport, vennligst vent...