need help on displaying Loading Please Wait Message page

[Nelluru]

Hi,
The problem is that I want to display a Loading Please Wait Message page when a page is trying to load. This all needs to be done when I click on a submit button.

[acoder]

Welcome to TSDN.

Do you want to display as soon as the page request is made? I doubt this is possible using Javascript. One possibility is to use Ajax in which case, you can easily display a div with that message. Another possibility is to flush content using your server-side language (if it has that capability).

[Nelluru]

Welcome to TSDN.

Do you want to display as soon as the page request is made? I doubt this is possible using Javascript. One possibility is to use Ajax in which case, you can easily display a div with that message. Another possibility is to flush content using your server-side language (if it has that capability).

Actually i want to download a file which the file asks for the IP address page will be displayed asking for the ipaddress
My page asks for IpAddress to download a file and burn that file into the ROM. After entering the IpAddress i will click on a submit button. The time taken to download and burning varies. While this is happening I want to display a message to the user saying that to Loading - please wait.......
both the things should start at the same time. If i dont display the message then there will be a lot of confusion to the user.
will this be possible????????

[iam_clint]

Acoder i have done the impossible :P I had already created a please wait while the next page loads directly after submit and it wait till the next page is loading with animated gif and text saying please wait. please wait.. please wait...please wait....you get the idea

and heres how it works

<script>
function pwait(count, co, color) {
if (count == 1) { document.getElementById("pwimg").src = "images/pwait.gif"; }
//border-top: solid 2px black; border-bottom: solid 2px black; border-right: solid 2px black; border-left: solid 2px black;
var ftable = document.getElementById("pwtable");
if (co == 1) {
ftable.style.borderTop = "solid 2px "+color;
ftable.style.borderBottom = "solid 2px black";
ftable.style.borderLeft = "solid 2px black";
ftable.style.borderRight = "solid 2px black";
}
if (co == 2) {
ftable.style.borderTop = "solid 2px black";
ftable.style.borderBottom = "solid 2px black";
ftable.style.borderLeft = "solid 2px "+color;
ftable.style.borderRight = "solid 2px black";
}
if (co == 3) {
ftable.style.borderTop = "solid 2px black";
ftable.style.borderBottom = "solid 2px "+color;
ftable.style.borderLeft = "solid 2px black";
ftable.style.borderRight = "solid 2px black";
}
if (co == 4) { 
ftable.style.borderTop = "solid 2px black";
ftable.style.borderBottom = "solid 2px black";
ftable.style.borderLeft = "solid 2px black";
ftable.style.borderRight = "solid 2px "+color;
co = 0; 
}
document.getElementById("pleasewait").style.visibility = "visible";
document.getElementById("pwaitblur").style.visibility = "visible";
var vtop = document.body.offsetHeight/2;
var vleft = document.body.offsetWidth/2;
    document.getElementById("pleasewait").style.top = document.body.scrollTop+document.documentElement.scrollTop+vtop-80;
    document.getElementById("pleasewait").style.left = document.body.scrollLeft+document.documentElement.scrollLeft+vleft-80;
document.getElementById("pwaitblur").style.left = document.body.scrollLeft+document.documentElement.scrollLeft;
document.getElementById("pwaitblur").style.top = document.body.scrollTop+document.documentElement.scrollTop;
tmp = document.getElementById("pwait").innerHTML;
if (tmp == "&nbsp;") {
document.getElementById("pwait").innerHTML = ".";
}
if (tmp == ".") {
document.getElementById("pwait").innerHTML = "..";
}
if (tmp == "..") {
document.getElementById("pwait").innerHTML = "...";
}
if (tmp == "...") {
document.getElementById("pwait").innerHTML = "&nbsp;";
}
co = co + 1;
count = count + 1;
var pwaitint = window.setTimeout("pwait("+count+", "+co+", '"+color+"')", 200);
} 
</script>
 

The Divs
[HTML]
<div id="pwaitblur" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filter: alpha(opacity=50); visibility: hidden; background: black;"></div>
<div id="pleasewait" style="position: absolute; top: 50%; left: 50%; width: 200; height: 60; visibility: hidden;"><table width="100%" height="100%" bgcolor="white" style="border-top: solid 2px black; border-bottom: solid 2px black; border-right: solid 2px black; border-left: solid 2px black;" id="pwtable"><tr><td><img src="/images/pwait.gif" id="pwimg"><td width="70%" align="right" style="font-weight: 800;">Please Wait<td id="pwait" width="30%" align="left" style="font-weight: 800;">&nbsp;</table></div>
[/HTML]
The style
[HTML]
<style>
html,body{ margin:0; padding:0; height:100%; border:none }
</style>
[/HTML]
The onclick event
[HTML]
onclick="pwait(0, 1, 'black');"
[/HTML]

The timeout in the code makes all the difference.

You may copy - paste my code :) good luck and let us see the final result please

[chunk1978]

is is possible to use this code on the same page which it rests? i have a 200KB+ javascript/html document, and it takes a bit to load... i'd like to display something like this "please wait" while the page loads... i'm just concerned where to place this...

[iam_clint]

yes you need to place it on the page before the page that you submit to

[chunk1978]

yes you need to place it on the page before the page that you submit to

humm... i'm actually linking my 200+KB javascript/form from a Flash document... not sure sure this javascript will work as actionscript... is it possible to change the onClick event to a body onLoad event?... i'm thinking i could link to a preloader page from the actionscript (with an onLoad event) which would then load the 200+kb javascript/form page?