Lichtkrant in een venster
Hieronder staat een lichtkrant. Deze maakt geen gebruik van <marquee>, maar is helemaal in JavaScript geschreven. Daardoor werkt deze lichtkrant met elke browser die JavaScript ondersteunt. De mogelijkheden zijn echter veel beperkter.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.
- De werking van het script en de HTML is -in het kort- als volgt:
- Het venster waarin de lichtkrant loopt wordt gemaakt in de <body> met behulp van een formulier: <form>.
- Het venster is eigenlijk een invoerveld (<input>) van het type text (er zit dus tekst in). Dit invoerveld heeft de naam regel en is read-only, zodat je er zelf niets in kunt typen.
- De <form> heeft de naam lichtkrant. Er is geen method aan gegeven. Hierdoor is het
niet mogelijk om er zelf iets in te typen.
- Het stukje JavaScript dat volgt na de <form> zorgt ervoor dat de lichtkrant wordt gestart.
Eerst wordt er een string gemaakt, blanco, die wordt gevuld met 75 spaties. Daarna wordt de string
tekst gevuld met de inhoud van de lichtkrant.
Tenslotte wordt de functie afdraaien() aangeroepen. Deze functie staat in de <head>.
- De functie afdraaien() vervangt steeds de inhoud van het venster. Hiervoor gebruikt het de referentie:
document.lichtkrant.regel.value
document is de pagina zelf.
lichtkrant is de <form>.
regel is de <input>.
value is de waarde die <input> heeft. - De inhoud van het venster wordt bij elke aanroep van afdraaien() vervangen door andere delen van
blanco en tekst:
blanco.substring(.....) en tekst.substring(.....).
- In de variable positie wordt bijgehouden of het nodig is om overnieuw te beginnen met het tonen van de lichtkrant (nl. als de tekst helemaal is getoond).
- De functie afdraaien() roept zichzelf steeds aan om de inhoud van de lichtkrant te verversen.
- De "loopsnelheid" van de lichtkrant wordt ingesteld met het getal in de aanroep van setTimeout. Een kleiner getal is kortere wachttijd, dus de krant loopt sneller. Een groter getal geeft een lanzamer lopende lichtkrant.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- De tekst van de lichtkrant wordt ingesteld met tekst="". Dit staat in het stukje JavaScript in de <BODY>.
(Zet dit in de <HEAD>).
<script>
// Lichtkrant. Overgenomen uit:
// Basishandleiding JavaScript door J. Kampherbeek, 2e druk 1998
// Uitg. Bijleveld Press, Utrecht, ISBN 90-72019-81-4
function afdraaien() {
if (positie < 0 ) {
document.lichtkrant.regel.value = blanco.substring(0,-positie) +
tekst.substring(0,positie+lengte);
} else {
document.lichtkrant.regel.value = tekst.substring(positie,tekst.length);
}
positie++;
if (positie == tekst.length) {
positie = -lengte;
}
window.setTimeout("afdraaien()",100);
}
</script>
(Zet dit in de <BODY> op de plaats waar de lichtkrant moet komen).
<form name="lichtkrant">
<input type="text" name="regel" size="40" readonly>
</form>
<script>
lengte = 75;
blanco = " ";
for (teller=0; teller<75; teller++) {
blanco = blanco + " ";
}
positie = -lengte;
tekst = "Met dank aan webmasters, site bouwers en
boekenschrijvers....";
afdraaien();
</script>
Downloaden:
Druk op de knop:
File: voorb015.zip, 648 bytes.
Opmerking:
Het is ook mogelijk om een scroller te maken zonder venster. Zie daarvoor het item "Browser-onafhankelijke marquee".
Bedenk dat steeds weer herhalende beweging op het scherm al gauw irriteert. Maak de lichtkrant niet te lang
en zet er niet meer dan één op een pagina. Houd ook het aantal pagina's van je site waarop
een lichtkrant staat beperkt.
