473,503 Members | 2,167 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to make progress bar while browser is loading page ?

3 New Member
make progress bar while browser is loading page.

ang when finish loading , show the page
Jul 17 '06 #1
2 79919
sashi
1,754 Recognized Expert Top Contributor
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
mbriggs
1 New Member
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

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

Similar topics

8
3721
by: Kerrin | last post by:
I'm trying to go to a new page, but I want it to jump straight to a specific part of the page instead of starting at the top of the page. Anyone got any idea on how this is done? I was trying...
5
12283
by: 1337.geek | last post by:
I have a webpage, lots of javascript that i pulled from various places, the menu script pre-loads about 50 small images, it only takes about 5 seconds for broadband but for lower band connections i...
1
1076
by: Kenny M. | last post by:
In my Sign Out method I want the user to be redirected to his Browser Default Page, Is It possible??? -- Kenny M.
4
52493
dmjpro
by: dmjpro | last post by:
i want to stop loading page after loading starts ... using js how can i do it thanx in advance
1
1379
by: =?Utf-8?B?QWxoYW1icmEgRWlkb3MgS2lxdWVuZXQ=?= | last post by:
Hello misters and miss, I have an application web in asp.net 2.0. I have an Main.aspx page that include javascript code like this: window.location.href = 'anotherpage.aspx'; I want do this:...
2
5339
by: =?Utf-8?B?Z2VvZmZh?= | last post by:
I cannot figure this out and would appreciate any help..... I have a datagrid view that displays the results from a Stored Procedure. it can take awhile to load..... the stored procedure fires...
1
1422
Ajm113
by: Ajm113 | last post by:
How can I create that popup bar that displays "Loading Page" on it. That displays on top of the website. Then close out when page is finished loading? Just like the one on Simple Machines Forum's?
3
1206
by: vingomail | last post by:
Loading pages should be showed before the next page data are loaded. help me friends. How may i know calculate the next page controls are loaded? Is there any methods to find out this problem? ...
3
1868
by: goldenv | last post by:
Hi all, I have worked an open source javascript + html page that has the potential to replace your existing browser home page. If you are interested in trying it out, or learning more about it, it...
0
7093
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7287
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7353
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7011
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7468
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5596
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
4689
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
1521
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
401
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.