Actieve scroll-buttons II
In de linker bovenhoek van dit document bevinden zich twee knoppen (blauwe driehoeken). Die zijn gemaakt om het document waarin ze staan te laten scrollen.
Op deze pagina wordt uitgelegd hoe je dat maakt. De code met de plaatjes kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML, CSS (in de file styles.css en JavaScript (in de file scroll2.js).
- De HTML en het JavaScript kun je zonder meer toepassen, de CSS zul je soms moeten veranderen.
- De HTML bestaat uit geneste <div>-tags, zie de code aan het einde van de pagina.
- De buitenste <div> heeft id="scroller". Dit dient om de twee scroll-knoppen op het scherm te positioneren en eventueel op te maken. Het is dus een container. De positie is fixed, dat wil zeggen dat dit blok nooit van plaats verandert. Door z-index een hoge waarde te geven zweeft het blok boven de pagina.
- Binnen de scroller staan twee <div>-tags, voor elke knop een. De ene heeft id="scrollingUp", de andere heeft id="scrollingDn".
- Beide <div>s hebben de event-handler onmouseover die de function startscrolling() starten. Als
parameter geef je het aantal pixels op dat per scroll-stap wordt verwerkt. Een positief getal is scrollen naar beneden, met
een negatief getal scroll je naar boven.
Een kleiner getal betekent langzamer scrollen. Op deze website wordt 15, resp. -15 gebruikt. Dat is al behoorlijk snel. - De plaats van de knoppen bepaal je met de function initscrolling(), die je eenmalig laat werken zodra de pagina is geladen. Dat doe je door in de <body>-tag de event-handler onload() mee te geven.
- Om de knoppen te positioneren geeft je aan initscroller() een parameter mee. Deze kan de volgende waarden hebben:
- TopLeft De knoppen staan links bovenaan in het document. Dit is de default-instelling, die ook wordt gebruikt als je een niet-bestaande waarde of helemaal niets meegeeft.
- TopRight De knoppen staan rechts bovenaan in het document.
- BottomLeft De knoppen staan links onderaan in het document.
- BottomRight De knoppen staan rechts onderaan in het document.
- De parameter van initscroller() is een karakterstring, die tussen enkele of dubbele aanhalingstekens staat.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit.
- Zet de code in je webspagina zoals hier onder is aangegeven.
- Als je grotere (of kleinere) knoppen wilt moet je de CSS aanpassen. Houd je daarbij aan het volgende:
- De width en height in scrollingUp en scrollingDn moeten gelijk zijn.
- De width en height moeten gelijk zijn aan de afmetingen van de afbeeldingen.
- De breedte van scrollers moet gelijk zijn aan de breedte van de plaatjes + 2 × de padding in scrollers.
- Als de knoppen onder content de verdwijnen moet je z-index in scrollers verhogen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
<script src="scroll2.js"></script>
(Neem dit attribuut op in <BODY>-tag).
onload="initscrolling('TopLeft')"
(Zet dit helemaal boven in de <BODY>, direct na de <body>-tag).
<div id="scrollers">
<div id="scrollingUp" onMouseOver="startscrolling(-15)"
onMouseOut="stopscrolling()"></div>
<div id="scrollingDn" onMouseOver="startscrolling(15)"
onMouseOut="stopscrolling()"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb524.zip, 1471 bytes.
Opmerking:
Zie het item Actieve scroll-buttons III voor een variant van deze techniek.
