By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,081 Members | 1,885 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,081 IT Pros & Developers. It's quick & easy.

need help on displaying Loading Please Wait Message page

P: 31
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.
Mar 16 '07 #1
Share this Question
Share on Google+
6 Replies


acoder
Expert Mod 15k+
P: 16,027
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).
Mar 16 '07 #2

P: 31
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????????
Mar 16 '07 #3

iam_clint
Expert 100+
P: 1,208
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
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function pwait(count, co, color) {
  3. if (count == 1) { document.getElementById("pwimg").src = "images/pwait.gif"; }
  4. //border-top: solid 2px black; border-bottom: solid 2px black; border-right: solid 2px black; border-left: solid 2px black;
  5. var ftable = document.getElementById("pwtable");
  6. if (co == 1) {
  7. ftable.style.borderTop = "solid 2px "+color;
  8. ftable.style.borderBottom = "solid 2px black";
  9. ftable.style.borderLeft = "solid 2px black";
  10. ftable.style.borderRight = "solid 2px black";
  11. }
  12. if (co == 2) {
  13. ftable.style.borderTop = "solid 2px black";
  14. ftable.style.borderBottom = "solid 2px black";
  15. ftable.style.borderLeft = "solid 2px "+color;
  16. ftable.style.borderRight = "solid 2px black";
  17. }
  18. if (co == 3) {
  19. ftable.style.borderTop = "solid 2px black";
  20. ftable.style.borderBottom = "solid 2px "+color;
  21. ftable.style.borderLeft = "solid 2px black";
  22. ftable.style.borderRight = "solid 2px black";
  23. }
  24. if (co == 4) { 
  25. ftable.style.borderTop = "solid 2px black";
  26. ftable.style.borderBottom = "solid 2px black";
  27. ftable.style.borderLeft = "solid 2px black";
  28. ftable.style.borderRight = "solid 2px "+color;
  29. co = 0; 
  30. }
  31. document.getElementById("pleasewait").style.visibility = "visible";
  32. document.getElementById("pwaitblur").style.visibility = "visible";
  33. var vtop = document.body.offsetHeight/2;
  34. var vleft = document.body.offsetWidth/2;
  35.     document.getElementById("pleasewait").style.top = document.body.scrollTop+document.documentElement.scrollTop+vtop-80;
  36.     document.getElementById("pleasewait").style.left = document.body.scrollLeft+document.documentElement.scrollLeft+vleft-80;
  37. document.getElementById("pwaitblur").style.left = document.body.scrollLeft+document.documentElement.scrollLeft;
  38. document.getElementById("pwaitblur").style.top = document.body.scrollTop+document.documentElement.scrollTop;
  39. tmp = document.getElementById("pwait").innerHTML;
  40. if (tmp == "&nbsp;") {
  41. document.getElementById("pwait").innerHTML = ".";
  42. }
  43. if (tmp == ".") {
  44. document.getElementById("pwait").innerHTML = "..";
  45. }
  46. if (tmp == "..") {
  47. document.getElementById("pwait").innerHTML = "...";
  48. }
  49. if (tmp == "...") {
  50. document.getElementById("pwait").innerHTML = "&nbsp;";
  51. }
  52. co = co + 1;
  53. count = count + 1;
  54. var pwaitint = window.setTimeout("pwait("+count+", "+co+", '"+color+"')", 200);
  55. </script>
  56.  
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
Mar 16 '07 #4

chunk1978
100+
P: 224
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...
Mar 17 '07 #5

iam_clint
Expert 100+
P: 1,208
yes you need to place it on the page before the page that you submit to
Mar 17 '07 #6

chunk1978
100+
P: 224
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?
Mar 18 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.