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

How to make progress bar while browser is loading page ?

P: 3
make progress bar while browser is loading page.

ang when finish loading , show the page
Jul 17 '06 #1
Share this Question
Share on Google+
2 Replies


sashi
Expert 100+
P: 1,754
Hi there,

kindly refer to the below code segment.. hope it works and helps you to get started.. take care and goos luck my fren.. :)

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script>
  3. var secondWindow = false;
  4. function ProgressBar(sLength) {
  5.  
  6. var BarLength = 400;
  7. var iLength = parseFloat(sLength);
  8. var Bar = parseInt(iLength); 
  9. if(Bar==0)Bar=1;
  10. var Trough = (BarLength - Bar);
  11. if(Trough==0){Trough=1;Bar=99;}
  12.  
  13. if(Bar >99) {Bar=99; Trough=1;}
  14. if(Trough <0) {Trough=1;Bar=99;}
  15.  
  16. var leftVal = (screen.width-490) / 2;
  17. var topVal = (screen.height-20) / 2;
  18. var cellLayer="id1";
  19.  
  20.  
  21. if(secondWindow == false) { 
  22.  
  23. if (navigator.appName=="Microsoft Internet Explorer"){
  24.  
  25. var theWindow = 
  26.  
  27. 'width=490,height=20,left='+leftVal+',top='+topVal+',menubar=no,toolbar=no,location=no,personalbar=no,status=no,scrollbars=no,directories=no,resizable=no';
  28. Window02 = window.open('','wind',theWindow);
  29. Window02.document.open();
  30. Window02.document.write('<html><head><script>window.onunload=function(){window.close();} <\/script><title>RezTrip Administrator Application - Please Wait.....Page is loading.</title></head><body bgColor=#EAF2FF><div id=t1 style="position:absolute; top:10; left:10; background-color:#000000; z-index:2; height:20px;"></DIV><div id=t2 style="position:absolute; top:10; left:10; background-color:#cccccc; z-index:1; height:20px; border:#ff0000 1px solid;"></div></body></html>');
  31.  
  32. Window02.document.close();
  33. }
  34. secondWindow = true;
  35. }
  36. if (secondWindow == true){
  37. if (navigator.appName=="Microsoft Internet Explorer"){
  38.  
  39. if(!Window02.closed){
  40. if(Bar <0 || Trough<0) alert("hello");
  41. Window02.document.getElementById("t1").style.width=(Bar * (BarLength/100)).toString();
  42. Window02.document.getElementById("t2").style.width=BarLength;
  43.  
  44. }
  45.  
  46. }
  47.  
  48. secondWindow = true;
  49. }
  50.  
  51. function demo(){
  52. progressCounter=0;
  53. progressCount=parseFloat(100/250);
  54. for(i=0;i<250;i++){
  55. progressCounter+=progressCount;
  56. ProgressBar(progressCounter);
  57. }
  58. if (navigator.appName=="Microsoft Internet Explorer")
  59. {
  60. if(!Window02.closed)
  61. Window02.close(); 
  62. }
  63. secondWindow = false;
  64. }
  65. </script>
  66. <body>
  67. <input type=button value="show Progress Bar" onClick=demo()>  
  68. </body>
  69. </html>
  70.  
Jul 17 '06 #2

P: 1
Hey Great script. I have been looking for one for a while now and i am trying to make it work. I am using this for now.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head></head>
  3.  <SCRIPT LANGUAGE="JavaScript">
  4.  
  5. <!-- Begin                                PRELOADER *******************************************************
  6. function clearPreloadPage() { //DOM
  7. if (document.getElementById){
  8. document.getElementById('prepage').style.visibility='hidden';
  9. }else{
  10. if (document.layers){ //NS4
  11. document.prepage.visibility = 'hidden';
  12. }
  13. else { //IE4
  14. document.all.prepage.style.visibility = 'hidden';
  15. }
  16. }
  17. }
  18. // End PRELAODER **********************************************-->
  19. </SCRIPT>
  20.  
  21. <!-- onLoad in BODY TAGE FOR PRELOADER -->
  22.   <body topmargin="0" leftmargin="0" onLoad="clearPreloadPage();">
  23.  
  24.  
  25. <!-----------------------------BANNER IMAGE ------------------------------>
  26.   <IMG SRC="/container/images/pics/header.png" BORDER="0">
  27. <!-----------------------------BANNER IMAGE ------------------------------>
  28.  
  29. <div id="prepage" style="position:absolute; font-family:arial; font-size:30; left:310px; 
  30.  
  31. top:250px;= background-color:white; layer-background-color:white; height:100%; width:100%;">
  32.  
  33. <table>
  34.     <tr>
  35.         <td align="center" id="prepage">
  36.  
  37.  
  38.             <H2><FONT SIZE="" COLOR="RED">Loading Data..........Please Wait!</FONT></H2>
  39.             <BR>
  40.             <H2><FONT SIZE="" COLOR="RED">It will just be a Moment.</FONT></H2>
  41.  
  42.  
  43.         </td>
  44.  
  45. </tr>
  46. </table>
  47.  
  48. </div>
  49.  
  50.  
  51. </body>
  52. </html>

it works pretty good. I just put the onLoad call into the body tag and aafter the page loads my report that takes a moment to load it tells the user to just hang on and it is loading.

I am tyring to make your script work and i see it opens a second window. But i want it to not look like a window but just a progress bar or a little gif or what ever that blinks like its LOADING page. I am sure you 've seen a few in your time.

Anyway, In regards to your script above Do i have to use a second window or do the fancy progress bars you see out there really a second window that doesn't look like it? And if you need to referance the LOAD picture how do you call it ?
Oct 10 '06 #3

Post your reply

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