Automatische scroller
voor het lezen van lange teksten
Webpagina's zijn heel geschikt om korte teksten te presenteren. Voor lange lappen tekst is het niet ontworpen en dus minder geschikt. Als er heel veel tekst op een pagina staat moet je steeds met de hand doorscrollen. Dat is niet handig. Daarom presenteer ik hier een scroller, die de lange teksten langzaam, op leessnelheid, over het scherm laat bewegen. De beweging kan tijdelijk gestopt worden en de snelheid is instelbaar.
In de rechter bovenhoek staat een soort bedieningspaneel. Het lijkt wel wat op de knopjes van een Media-player. De betekenis is als volgt:
Start de scroller
Stop de scroller
Sneller scrollen
Langzamer scrollen
In dit voorbeeld staat het bedieningspaneel rechts boven. Maar het kan ook links bovenaan of in het midden
staan. Onder in het window kan ook.
Als je lange verhalen hebt te vertellen kun je deze scroller op je site zetten als service aan je bezoekers.
De code kun je downloaden voor eigen gebruik, inclusief het plaatje van de scrollerbesturing.
- Er worden drie items besproken:
- Inbouwen in je eigen website
- De globale werking van het script
- Je eigen skins toevoegen
- De rekenfuncties van deze scroller zijn geschreven in JavaScript. De functions staan in de file scroller.js. Deze file hoeft voor toepassing op je eigen site niet te worden gewijzigd.
- De bij behorende HTML-code staat bij voorkeur direct na de <BODY>-tag.
- De HTML-code bestaat uit een <div>-tag met het id="floatingPanel". Deze naam mag niet worden veranderd. De visibility is hidden.
- De <div>-tag omsluit een <img>-tag. Dat is het besturingspaneel van de scroller. De vier knoppen zitten hier 'hard' in. Om ze te koppelen aan de JavaScript-functions wordt een <map> gebruikt.
- De scroller wordt zichtbaar gemaakt door de function InitScroll(), die wordt aangeroepen door de event-handler onload in de <BODY>-tag.
- De aanroep van InitScroll() luidt:
InitScroll(PanelHeight,PanelWidth,PanelLoc,Top_Bottom_Margin,Left_Right_Margin)
De betekenis van de parameters is als volgt:
| Parameter | Betekenis | ||||||||||||||
| PanelHeight | Hoogte (pixels) van het besturingspaneel. Dit is een getal, gelijk aan het
height-attribuut van het plaatje. Moet aanwezig zijn. Als deze parameter ontbreekt geeft InitScroll() een foutmelding; de scroller zal niet werken. |
||||||||||||||
| PanelWidth | Breedte (pixels) van het besturingspaneel. Dit is een getal, gelijk aan het
width-attribuut van het plaatje. Moet aanwezig zijn. Als deze parameter ontbreekt geeft InitScroll() een foutmelding; de scroller zal niet werken. |
||||||||||||||
| PanelLoc | Plaats waar het besturingspaneel op het scherm verschijnt. Dit is een Keyword, dat tussen
aanhalingstekens moet worden geplaatst. Mag worden weggelaten indien de twee volgende parameters ook
afwezig zijn. In dat geval wordt 'TopLeft' gebruikt. Mogelijke waarden zijn:
De keywords zijn hoofdletter-gevoelig. Bij onjuiste opgave geeft InitScroll() een foutmelding; de scroller zal niet werken. |
||||||||||||||
| Top_Bottom_Margin | Afstand (in pixels) die wordt vrijgehouden tussen de boven- of onderrand van het
besturingspaneel en de rand van het window of frame. Mag worden weggelaten indien de volgende parameter
ook wordt weggelaten. In dat geval wordt 0 gebruikt (dus geen afstand tussen rand van het window en
het paneel). |
||||||||||||||
| Left_Right_Margin | Afstand (in pixels) die wordt vrijgehouden tussen de linker- of rechterrand van
het besturingspaneel en de rand van het window of frame. Mag worden weggelaten. In dat geval wordt 0
gebruikt (dus geen afstand tussen rand van het window en het paneel). Deze parameter heeft geen betekenis in combinatie met 'TopMiddle' en 'BottomMiddle'. |
- Als de function InitScroll() wordt aangeroepen zonder dat er een <div>-tag met
id="floatingPanel" in de HTML-code aanwezig is, ontstaat er een foutmelding; de scroller
zal niet werken.
- De werking van het script is -zonder in detail te treden- als volgt:
- Bij de aanroep van InitScroll() wordt eerst gekeken naar de parameters. Noodzakelijke parameters moeten aanwezig zijn, anders volgt een foutmelding en stopt de function. Voor de optionele parameters wordt zonodig een verstekwaarde (default) ingesteld.
- Vervolgens wordt gekeken of de code een <div>-tag met id="floatingPanel" bevat. Als die er niet is stopt de function met een foutmelding.
- Daarna wordt aan de hand van de parameter PanelLoc de plaats van de linkerbovenhoek van het
besturingspaneel in het document berekend. De function reageert hierbij op zowel op horizontaal als op
verticaal scrollen.
Als PanelLoc een onjuiste waarde bevat stopt de function met een foutmelding. - Het besturingspaneel wordt nu zichtbaar gemaakt door de visibility van hidden te veranderen in visible.
- Elke 10 ms (0,01 seconde) wordt de plaats van het besturingspaneel opnieuw berekend en aangepast.
- Als op een knop van het besturingspaneel wordt geklikt wordt een JavaScript function aangeroepen. Hierdoor verandert de scrollbeweging van het document. De beweging is echter zo langzaam dat het besturingspaneel gemakkelijk op zijn plaats wordt gehouden.
- De vier knoppen in het besturingspaneel corresponderen elk met een JavaScript-function. De namen van
deze functions spreken voor zich:
- StartScroll(). Het document wordt één pixel omhoog geschoven met tijdstappen scrollSpeed.
- StopScroll(). De beweging wordt gestopt.
- SpeedUp(). Als het scrollen aan staat wordt de beweging gestopt. Het tijdsinterval scrollSpeed wordt met 50 ms (= 0,05 sec) verminderd, waardoor de beweging sneller gaat. Als de scroller aan stond wordt deze weer ingeschakeld.
- SlowDown(). Als het scrollen aan staat wordt de beweging gestopt. Het tijdsinterval scrollSpeed wordt met 50 ms (= 0,05 sec) verlengd, waardoor de beweging langzamer gaat. Als de scroller aan stond wordt deze weer ingeschakeld.
- Bij het openen van de pagina is scrollSpeed = 150 ms. De stapgrootte voor het aanpassen van scrollSpeed is 50 ms. Er is voor gezorgd dat scrollSpeed nooit kleiner kan worden dan 50 ms en nooit groter kan worden dan 250 ms.
- De schuifknop de scrollbar aan de rechterkant van de bladzijde werkt óók als de automatische scroller aan staat. Ook de twee scroll buttons, rechtsboven op deze pagina, werken gewoon.
- Andere scripts of acties die de browser onderbreken kunnen de automatische scroller laten vastlopen.
Dat gebeurt bijvoorbeeld als je de codes gaat downloaden terwijl de scroller loopt.
- Je kunt de verschijningsvorm ("skin") van het besturingspaneel veranderen. Dat doe je door
een ander plaatje te gebruiken in combinatie met een daar op aangepaste <map>.
In de downloadfile tref je onderstaande skins aan:
|
 |
 |
 |
| scroller_0 | scroller_1 | scroller_2 | scroller_3 |
 |
 |
 |
 |
| scroller_4 | scroller_5 | scroller_6 | scroller_7 |
Je eigen skin kan hier ook bij staan! |
|||
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet in de <BODY>, bijvoorbeeld helemaal aan het begin).<script src="scroller.js"></script>
(Neem het onderstaande attribuut op in de <BODY>-tag)<div id="floatingPanel" style="position:fixed; top:0; left:0;
visibility:hidden">
<img src="scroller_0.png" alt="" width="153" height="46" border="0" usemap="#scrollPanel">
</div>
<map name="scrollPanel">
<area alt="Start scroll" shape="circle" coords="34,13,10" href="JavaScript:StartScroll()">
<area alt="Stop scrollen" shape="circle" coords="57,13,10" href="JavaScript:StopScroll()">
<area alt="Sneller" shape="circle" coords="79,13,10" href="JavaScript:SpeedUp()">
<area alt="Langzamer" shape="circle" coords="101,13,10" href="JavaScript:SlowDown()">
</map>
onload="InitScroller(46,153,'TopRight',10,10)"
Downloaden:
Druk op de knop:
File: voorb166.zip, 36 226 bytes.
Opmerking:
Nieuwe skins zijn welkom. Als je er een hebt gemaakt die je wilt delen met anderen: Stuur een mailtje. Dat wordt
jouw skin er bij gezet!
Deze scroller is een combinatie van technieken die elders op deze website zijn beschreven:
"Aftiteling",
"Terug- of Top-knop op een vaste plaats op het scherm" en
"Meerdere links in één plaatje: <map>"
