Actieve scroll-buttons III
In de rechter boven- en onderhoek 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 scroll3.js).
- De HTML en het JavaScript kun je zonder meer toepassen, de CSS zul je soms moeten aanpassen.
- De HTML bestaat uit geneste <div>-tags, zie de code aan het einde van de pagina.
- De buitenste <div> heeft id="scrollerUp". Dit dient om de bovenste scroll-knop 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 scrollerUp staat een <div>-tag met id="scrollingUp". Deze heeft de event-handler onmouseover die de function startscrolling() start.
- 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. - Op dezelfde manier is er ook een <div>-tag met id="scrollerUp". Deze staat gefixeerd onderaan de pagina.
- Evenzo staat er binnen scrollerDn een <div>-tag met id="scrollingDn". Ook deze heeft de event-handler onmouseover die de function startscrolling() start. Hiermee scroll je naar beneden.
- 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:
- Left De knoppen staan aan de linkerkant in het document. Dit is de default-instelling, die ook wordt gebruikt als je een niet-bestaande waarde of helemaal niets meegeeft.
- Right De knoppen staan aan de rechterkant in het document.
- De parameter van initscroller() is een karakterstring, die tussen enkele of dubbele aanhalingstekens staat.
- 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 scrollerUp resp. scrollerDn.
- Als de knoppen onder content de verdwijnen moet je z-index in scrollerUp en scrollerDn 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="scroll3.js"></script>
(Neem dit attribuut op in <BODY>-tag).
onload="initscrolling('Right')"
(Zet dit helemaal boven in de <BODY>, direct na de <body>-tag).
<div id="scrollerUp">
<div id="scrollingUp" onMouseOver="startscrolling(-15)"
onMouseOut="stopscrolling()"></div>
</div>
<div id="scrollerDn">
<div id="scrollingDn" onMouseOver="startscrolling(15)"
onMouseOut="stopscrolling()"></div>
</div
Downloaden:
Druk op de knop:
File: voorb525.zip, 1479 bytes.
Opmerking:
Zie het item Actieve scroll-buttons II voor een variant van deze techniek.
