How to make progress bar while browser is loading page ?

Saint's Knight

make progress bar while browser is loading page.

ang when finish loading , show the page

Jul 17 '06 #1

Subscribe Post Reply

79897

sashi

1,754

Expert 1GB

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

 
<html>

<script>

var secondWindow = false;

function ProgressBar(sLength) {
 
var BarLength = 400;

var iLength = parseFloat(sLength);

var Bar = parseInt(iLength); 

if(Bar==0)Bar=1;

var Trough = (BarLength - Bar);

if(Trough==0){Trough=1;Bar=99;}
 
if(Bar >99) {Bar=99; Trough=1;}

if(Trough <0) {Trough=1;Bar=99;}
 
var leftVal = (screen.width-490) / 2;

var topVal = (screen.height-20) / 2;

var cellLayer="id1";
 
if(secondWindow == false) { 
 
if (navigator.appName=="Microsoft Internet Explorer"){
 
var theWindow = 
 
'width=490,height=20,left='+leftVal+',top='+topVal+',menubar=no,toolbar=no,location=no,personalbar=no,status=no,scrollbars=no,directories=no,resizable=no';

Window02 = window.open('','wind',theWindow);

Window02.document.open();

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>');
 
Window02.document.close();

}

secondWindow = true;

}

if (secondWindow == true){

if (navigator.appName=="Microsoft Internet Explorer"){
 
if(!Window02.closed){

if(Bar <0 || Trough<0) alert("hello");

Window02.document.getElementById("t1").style.width=(Bar * (BarLength/100)).toString();

Window02.document.getElementById("t2").style.width=BarLength;
 
}
 
}
 
secondWindow = true;

}
 
} 

function demo(){

progressCounter=0;

progressCount=parseFloat(100/250);

for(i=0;i<250;i++){

progressCounter+=progressCount;

ProgressBar(progressCounter);

}

if (navigator.appName=="Microsoft Internet Explorer")

{

if(!Window02.closed)

Window02.close(); 

}

secondWindow = false;

}

</script>

<body>

<input type=button value="show Progress Bar" onClick=demo()>  

</body>

</html>

Jul 17 '06 #2

mbriggs

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

 <html>

<head></head>

 <SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin                                PRELOADER *******************************************************

function clearPreloadPage() { //DOM

if (document.getElementById){

document.getElementById('prepage').style.visibility='hidden';

}else{

if (document.layers){ //NS4

document.prepage.visibility = 'hidden';

}

else { //IE4

document.all.prepage.style.visibility = 'hidden';

}

}

}

// End PRELAODER **********************************************-->

</SCRIPT>
 
<!-- onLoad in BODY TAGE FOR PRELOADER -->

  <body topmargin="0" leftmargin="0" onLoad="clearPreloadPage();">
 
<!-----------------------------BANNER IMAGE ------------------------------>

  <IMG SRC="/container/images/pics/header.png" BORDER="0">

<!-----------------------------BANNER IMAGE ------------------------------>
 
<div id="prepage" style="position:absolute; font-family:arial; font-size:30; left:310px; 
 
top:250px;= background-color:white; layer-background-color:white; height:100%; width:100%;">
 
<table>

    <tr>

        <td align="center" id="prepage">
 
            <H2><FONT SIZE="" COLOR="RED">Loading Data..........Please Wait!</FONT></H2>

            <BR>

            <H2><FONT SIZE="" COLOR="RED">It will just be a Moment.</FONT></H2>
 
        </td>
 
</tr>

</table>
 
</div>
 
</body>

</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

Similar topics

Loading page and staring half way down

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...

Javascript

How to make a Loading Page

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...

HTML / CSS

Redirecting to the Browser Default Page

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.

ASP.NET

how to stop loading page after loading starts

by: dmjpro | last post by:

i want to stop loading page after loading starts ... using js how can i do it thanx in advance

Javascript

Loading page

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:...

ASP.NET

How to display a "loading page, please wait" box...

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...

ASP.NET

Loading Page ... (How?)

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?

Javascript

waiting or loading pages problem

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? ...

.NET Framework

A javascript based browser home page app

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...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

AI Job Threat for Devs

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,...

Career Advice