special sort of countdown [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : special sort of countdown

Detlef

03-27-2001, 06:18 PM

I´d like to have a countdown from 9 to 0 playing 10 seconds.
I made one as an animated gif, but it takes too long to
load:
http://www.schluesseldienstdethlefs.de/Doerte/relocate.htm

I use relocate.htm to redirect visitors according to
their screen-resolution and to preload some images.

Working with layers didn´t work, because the images
have transparent areas; and I didn´t succeed in writing
a script, that stops as soon as the 10 pictures have
been shown.
Can anybody help?

kdjoergensen

03-29-2001, 03:23 PM

I could not access your link.

I dont know why your attempt with layers dont work, but this is how I would do it:

put each image in a layer with visibility set to hidden and placed at same x,y positions.
Each image can have an onload event handler which will fire when the image is fully loaded. Set up a small javascript which counts each successfull image loading, and only when all the images have loaded you can start your count down:

var loaded = 0;
var timer;

function countLoaded(){
loaded++;
if (loaded == 10){ countDown('1'); }
}

function countDown(i){

var i = parseInt(i);

if (i < 10){

if (document.layers){
document.layers["layer"+i].visibility ='show';
if (i>1){
document.layers["layer"+(i-1)].visibility ='hide';
}

} else if (document.getElementById){
document.getElementById('layer'+i).style.visibility = 'visible';
if (i>1){
document.getElementById('layer'+(i-1)).style.visibility = 'hidden';
}
} else if (document.all){
document.all["layer"+i].style.visibility = 'visible';
if (i>1){
document.all["layer"+(i-1)].style.visibility = 'hidden';
}
}
var newCall = "countDown("+i+")";
timer = setTimeout(newCall,500);

} else {
clearTimeout(timer); return;
}

} //end function

<div id="layer1" style="position: absolute; top: 100px; left 50px;"><img name="i1" src="i1.gif" onload="countLoaded()"></div>

<div id="layer2" style="position: absolute; top: 100px; left 50px;"><img name="i2" src="i2.gif" onload="countLoaded()"></div>

<div id="layer3" style="position: absolute; top: 100px; left 50px;"><img name="i3" src="i3.gif" onload="countLoaded()"></div>

..
..

<div id="layer10" style="position: absolute; top: 100px; left 50px;"><img name="i10" src="i10.gif" onload="countLoaded()"></div>

Good luck.
Kenneth

Detlef

03-29-2001, 05:47 PM

Thanks for your help,

I tried this one:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">

<SCRIPT LANGUAGE="JavaScript">

</script>

<div id="layer1" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i1" src="0.gif" onload="countLoaded()"></div>
<div id="layer2" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i2" src="1.gif" onload="countLoaded()"></div>
<div id="layer3" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i3" src="2.gif" onload="countLoaded()"></div>
<div id="layer4" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i4" src="3.gif" onload="countLoaded()"></div>
<div id="layer5" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i5" src="4.gif" onload="countLoaded()"></div>
<div id="layer6" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i6" src="5.gif" onload="countLoaded()"></div>
<div id="layer7" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i7" src="6.gif" onload="countLoaded()"></div>
<div id="layer8" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i8" src="7.gif" onload="countLoaded()"></div>
<div id="layer9" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i9" src="8.gif" onload="countLoaded()"></div>
<div id="layer10" style="position: absolute; top: 100px; left 50px; visibility: hidden"><img name="i10" src="9.gif" onload="countLoaded()"></div>

</body>
</html>

but nothing happens. I also tried to put the
script in the head and initiate the function
with onLoad, but still nothing happens.

Detlef

04-01-2001, 08:15 PM

Help!
I still couldn´t solve this problem!
(Meanwhile my server´s online again.)

kdjoergensen

04-02-2001, 09:01 AM

Let me look into it..