JavaScript voorbeelden

Lopende teksten in de statusbalk

m een tekst te laten lopen in de statusbalk onderaan het venster van je browser zijn er diverse mogelijkheden. Ik behandel er twee.

Een lopende tekst
Tekst die letter voor letter verschijnt

1. Een lopende tekst
Met dit script toon je een tekst die van links naar rechts in de statusbalk loopt. Het script zet in je de <head>, aanroepen doe je met:

<body onLoad="timerStart=window.settimeout('scrollDit(100)',500);">

Door de getallen te wijzigen kun je de snelheid waarmee de tekst verschijnt beïnvloeden.

» Bekijk het voorbeeld

<script type="text/javascript" language="JavaScript">
<!-- 
function scrollDit(toontekst)
{

// vul de gewenstte tekst(en) in

        var m1  = " 'O Deep Thought computer,' he said, 'the task we have designed you to perform is this. We want you to tell us ...', he paused, 'the Answer.' ";
        var m2  = " 'The Answer?' said Deep Thought. 'The Answer to what?' ";
        var m3  = " 'Life!' urged Fook. 'The Universe!' said Lunkwill. 'Evertyhing!' they said in chorus. ";
        var m4  = " Deep Thought paused for a moment's reflection. 'tricky,' he said finally. ";
        var msg=m1+m2+m3+m4;
        var out = " ";
        var c   = 1;

        if (toontekst > 100) {
                toontekst--;
                var cmd="scrollDit(" + toontekst + ")";
                timerStart=window.settimeout(cmd,100);
        }

        else if (toontekst <= 100 && toontekst > 0) {
                for (c=0 ; c < toontekst ; c++) {
                        out+=" ";
                }
                out+=msg;
                toontekst--;
                var cmd="scrollDit(" + toontekst + ")";
                    window.status=out;
                timerStart=window.settimeout(cmd,100);
        }

        else if (toontekst <= 0) {
                if (-toontekst < msg.length) {
                        out+=msg.substring(-toontekst,msg.length);
                        toontekst--;
                        var cmd="scrollDit(" + toontekst + ")";
                        window.status=out;
                        timerStart=window.settimeout(cmd,100);
                }
                else {
                        window.status=" ";
                        timerStart=window.settimeout("scrollDit(100)",75);
                }
        }
}
// -->
</script>

2. Tekst die letter voor letter verschijnt
Het script zet in je de <head>, aanroepen doe je met:

<body onLoad="starttekst()">

» Bekijk het voorbeeld

<script type="text/javascript" language="JavaScript">
<!--
var speed = 150 
var pause = 1000
var timerID = null
var tekstAan = false
var ar = new Array()

ar[0] = " De Webmees "
ar[1] = " Tips, trucs en links "
ar[2] = " Een begrip sinds 1997 "

var deBoodschap = 0
var offset = 0

function stopTekst() {

	if (tekstAan)
	clearTimeout(timerID)
	tekstAan = false
}

function starttekst() {

	stopTekst()
	showTekst()
}

function showTekst() {

	var text = ar[deBoodschap]

	if (offset < text.length) {
	if (text.charAt(offset) == " ")
			offset++			
	var opbouwBoodschap = text.substring(0, offset + 1) 
	window.status = opbouwBoodschap
	offset++ 

		timerID = settimeout("showTekst()", speed)
		tekstAan = true
}

else {
		offset = 0
		deBoodschap++
		if (deBoodschap == ar.length)
		deBoodschap = 0
		timerID = settimeout("showTekst()", pause)
		tekstAan = true
}
}

// -->
</script>