<html>
<div id="Loading">Loading...</div>
<input type="button" value="Remove Loading" onclick="document.getElementById('Loading').innerText=''">
</html><html>
<head>
<script>
var count = 1; //# of dots following 'Loading'
var interval = 5; //# of dots allowed following 'Loading'
var to; //timeout object
[b]//start message even before document has loaded
loading();[/b]
function loading()
{
if(count == interval)
{
//reset to one dot
window.status = "Loading.";
count = 1;
}//end if
else
{
//add a dot
count++;
window.status += ".";
}//end else
//set thread to run independent of page loading
to = setTimeout("loading()",1000);
}//end loading()
function quitTimeout()
{
//interrupt the 'Loading.....' message thread
clearTimeout(to);
window.status = "Done.";
}//end quitTimeout()
</script>
</head>
<body [b]onload='quitTimeout()'[/b]>
Your HTML here.
</body>
</html>
I really was wanting the message to be in the middle of the screen, similar to that of some of the "flash type" loading presentations. Although I do like the status bar code that you gave, but I think that not too many people look at the status bar. Any others up your sleeve?<html>
<head>
<script>
var count = 1; //# of dots following 'Loading'
var interval = 5; //# of dots allowed following 'Loading'
var to; //timeout object
[b]var ready = false;[/b]
//start message even before document has loaded
loading();
function loading()
{
[b]if(ready)[/b]
{
if(count == interval)
{
//reset to one dot
[b]loadingSpan.innerHTML = "Loading.";[/b]
count = 1;
}//end if
else
{
//add a dot
count++;
[b]loadingSpan.innerHTML += ".";[/b]
}//end else
[b]}//end if[/b]
//set thread to run independent of page loading
to = setTimeout("loading()",1000);
}//end loading()
function quitTimeout()
{
//interrupt the 'Loading.....' message thread
clearTimeout(to);
[b]loadingSpan.innerHTML = ""; //clear it out
ready = false; //this line not really needed[/b]
}//end quitTimeout()
</script>
</head>
<body onload='quitTimeout()'>
[b]<h4><span id='loadingSpan'></span></h4>
<script>
ready = true;
</script>
<br />[/b]
The rest of your HTML here.
</body>
</html><html>
<head>
<script>
var count = 1; //# of dots following 'Loading'
var interval = 5; //# of dots allowed following 'Loading'
var to; //timeout object
var ready = false;
//start message even before document has loaded
loading();
function loading()
{
if(ready)
{
if(count == interval)
{
//reset to one dot
[b] loadingSpan.innerHTML = "Loading";
dotSpan.innerHTML = ".";[/b]
count = 1;
}//end if
else
{
//add a dot
count++;
[b]loadingSpan.innerHTML = "Loading";
dotSpan.innerHTML += ".";[/b]
}//end else
}//end if
//set thread to run independent of page loading
to = setTimeout("loading()",1000);
}//end loading()
function quitTimeout()
{
//interrupt the 'Loading.....' message thread
clearTimeout(to);
loadingSpan.innerHTML = ""; //clear it out
[b] dotSpan.innerHTML = ""; //clear it out
loadingTable.style.visibility = 'hidden';
loadingTable.style.display = 'none';[/b]
ready = false; //this line not really needed
}//end quitTimeout()
</script>
</head>
<body onload='quitTimeout()'>
[b]
<!-- NOTE: the problem with just centering the message using CENTER tags would be that as the dots (...) keep getting added to the message, it keeps re-centering. With the table method, below, the message stays put. Check it out. -->
<span id='loadingTable'>
<table align='center' width='100%'>
<tr>
<td width='50%' align='right'>
<span id='loadingSpan'> </span>
</td>
<td width='50%' align='left'>
<span id='dotSpan'> </span>
</td>
</tr>
</table>
</span>
[/b]
<script>
ready = true;
</script>
<br />
The rest of your HTML here.
</body>
</html>