...

View Full Version : A script that will display 1, 2 then 3 dots then return to 1 dot as a progress bar



Jeepers
07-23-2002, 11:06 PM
Hi Guys

Whilst a page is loading (nothing at all to do with pre-loading images) I have a div(IE and NS6)/layer(NS4) displayed saying 'Please wait' (hidden when page finishes loading) from an external .js file. I want to add first one dot then two dots and finally three dots then retun to one dot etc etc after the 'Please wait' bit.

I've tried a few ways with for loops and arrays but can't get anything to work. I've seen a number of 'page loading' scripts but all are based up on pre-loading images, which is not the case here.

Can anybody give me a clue how to do this.

caldasgsm
07-23-2002, 11:36 PM
<script>
var timerHandle = setTimeout('Dots(1)',100);

function Dots(numberOfDots)
{
switch(numberOfDots)
{
case 1:
theDivName.innerText = 'Loading.';
timerHandle = setTimeout('Dots(2)',100);
break;
case 2:
theDivName.innerText = 'Loading. .';
timerHandle = setTimeout('Dots(3)',100);
break;
case 3:
theDivName.innerText = 'Loading. . .';
timerHandle = setTimeout('Dots(1)',100);
break;
}
}
</script>
<body onload="clearTimeout(timerHandle )">

Jeepers
07-24-2002, 12:27 AM
That works great, thanks a lot.

A little question .. When my original 'page loading' div is hidden when the page completes it's loading (I use body onload to call a function to hide the div) will the Dots function carry on or does the clearTimeout(timerHandle ) stop it. If this is the case then that does not happen.

I'm sorry if I'm being a bit thick here but I was just wondering.

adios
07-24-2002, 12:52 AM
Whilst a page is loading...

Hey - you English or sumpin'? Impressive.
Dug this up:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#progressbar {
font: 200 16px arial;
background: black;
}

</style>
<script type="text/javascript">

var progchar = '&amp;#187;'; //try '&amp;#149;&amp;nbsp;' or '&amp;#164;'
var speed = 111;

var color = new Array();
color[0] = '#440000';
color[1] = '#550000';
color[2] = '#661100';
color[3] = '#772200';
color[4] = '#883300';
color[5] = '#994400';
color[6] = '#aa5500';
color[7] = '#bb6600';
color[8] = '#cc7700';
color[9] = '#dd8800';
color[10] = '#ee9900';
color[11] = '#ffbb00';
color[12] = '#ffff00';

function prog() {
if (typeof prog.n == 'undefined') prog.n = 0;
var z = '', d = document.getElementById('progressbar');
d.style.color = color[prog.n];
for (i=0;i<=prog.n;i++) z += progchar;
d.innerHTML = 'loading, please wait ' + z;
prog.n = (prog.n == 12) ? 0 : ++prog.n;
progger = setTimeout('prog()',speed);
}

</script>
</head>
<body bgcolor="black">
<span id="progressbar"></span>
<script>
prog();
/* onload = function() {
clearTimeout(progger);
document.getElementById('progressbar').style.visibility = 'hidden';
}*/
</script>
</body>
</html>

Jeepers
07-24-2002, 01:35 AM
Thanks Guys

Spoilt for choice now.

Yeah I'm English, (Watcha cocker, well I'll go t' bottom o' stairs, and stuff like that, old boy!!)

Toodle pip



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum