PreLoad Images with Progress Bar Free Javascript

Free Ebooks

Marketer's Tools

Website Tools

Articles

Tutorials

Free Software

Resources

Free Scripts

HOME
Most Popular eBooks

New!!

ALL ABOUT EBAY
THE WORK AT HOME ZONE

Pop-Up Progress Bar
Free Javascript

Pop-Up Progress Bar
Free Javascript
courtesy of http://www.ebusinesshelpcenter.com/

Note: Pop-Up Progress Bar
Free Javascript
more at http://www.ebusinesshelpcenter.com/

Credit: Todd King w/ modifications from JavaScript Kit

Description: Todd's popup progress bar script is used to provide a visual update of an event in progress. Use it, for example, to display a delay before redirecting to another page or loading a script/application. We've modified the script so it:

-Works in NS6 as well (default is IE4+ and NS4)
-Ability to specify duration of progress bar display (ie: 5 seconds)

Definitely a script with many uses.

Example:

Directions: Simply copy the below into the <BODY> portion of your page:

Insert the following code into the <BODY> tag of your html document.

Examples:

Full URL » <body onunload="window.open('http://www.newpage.com')">
Relative » <body onunload="window.open('page.htm')">

Then use Control-C to copy the text into your web page.
 </style> <SCRIPT LANGUAGE="JavaScript"> //Progress Bar script- by Todd King (tking@igpp.ucla.edu) //Modified by JavaScript Kit for NS6, ability to specify duration //Visit JavaScript Kit (http://javascriptkit.com) for script var duration=3 // Specify duration of progress bar in seconds var _progressWidth = 50; // Display width of progress bar var _progressBar = new String(""); var _progressEnd = 10; var _progressAt = 0; // Create and display the progress dialog. // end: The number of steps to completion function ProgressCreate(end) { // Initialize state variables _progressEnd = end; _progressAt = 0; // Move layer to center of window to show if (document.all) { // Internet Explorer progress.className = 'show'; progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2); progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2); } else if (document.layers) { // Netscape document.progress.visibility = true; document.progress.left = (window.innerWidth/2) - 100; document.progress.top = pageYOffset+(window.innerHeight/2) - 40; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'show'; document.getElementById("progress").style.left = (window.innerWidth/2)- 100; document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40; } ProgressUpdate(); // Initialize bar } // Hide the progress layer function ProgressDestroy() { // Move off screen to hide if (document.all) { // Internet Explorer progress.className = 'hide'; } else if (document.layers) { // Netscape document.progress.visibility = false; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'hide'; } } // Increment the progress dialog one step function ProgressStepIt() { _progressAt++; if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd; ProgressUpdate(); } // Update the progress dialog with the current state function ProgressUpdate() { var n = (_progressWidth / _progressEnd) * _progressAt; if (document.all) { // Internet Explorer var bar = dialog.bar; } else if (document.layers) { // Netscape var bar = document.layers["progress"].document.forms["dialog"].bar; n = n * 0.55; // characters are larger } else if (document.getElementById){ var bar=document.dialog.bar } var temp = _progressBar.substring(0, n); bar.value = temp; } // Demonstrate a use of the progress dialog. function Demo() { ProgressCreate(10); window.setTimeout("Click()", 100); } function Click() { if(_progressAt >= _progressEnd) { ProgressDestroy(); return; } ProgressStepIt(); window.setTimeout("Click()", (duration-1)*1000/10); } function CallJS(jsStr) { //v2.0 return eval(jsStr) } </script> <SCRIPT LANGUAGE="JavaScript"> // Create layer for progress dialog document.write("<span id=\"progress\" class=\"hide\">"); document.write("<FORM name=dialog>"); document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">"); document.write("<TR><TD ALIGN=\"center\">"); document.write("Progress<BR>"); document.write("<input type=text name=\"bar\" size=\"" + _progressWidth/2 + "\""); if(document.all||document.getElementById) // Microsoft, NS6 document.write(" bar.style=\"color:navy;\">"); else // Netscape document.write(">"); document.write("</TD></TR>"); document.write("</TABLE>"); document.write("</FORM>"); document.write("</span>"); ProgressDestroy(); // Hides </script> <form name="form1" method="post"> <center> <input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')"> </center> </form> <a href="javascript:CallJS('Demo()')">Text link example</a> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://www.javascriptkit.com">JavaScript Kit</a></font></p>

Change the first two variables as instructed by the comments.

Be sure to check-out these progress bars too!

Preload Images w/Progress Bar - This script will preload images in the browser cache for smooth image swapping or button effects. During loading, a progress bar is shown to provide updates.

Timer (Timed) Bar - This script shows a progress bar used as a timer. You set the total time for delay.

Pop-up Progress Bar - Todd's popup progress bar script is used to provide a visual update of an event in progress. Use it, for example, to display a delay before redirecting to another page or loading a script/application.

Pop-Up Progress BarFree Javascript

Pop-Up Progress BarFree Javascriptcourtesy of http://www.ebusinesshelpcenter.com/

Note: Pop-Up Progress BarFree Javascriptmore at http://www.ebusinesshelpcenter.com/

For More Free Scripts Visit Our Website Tools Section! HOME | Privacy Policy | Terms of Use Site created by Digital Image, Inc.

Pop-Up Progress Bar
Free Javascript

Pop-Up Progress Bar
Free Javascript
courtesy of http://www.ebusinesshelpcenter.com/

Note: Pop-Up Progress Bar
Free Javascript
more at http://www.ebusinesshelpcenter.com/

For More Free Scripts Visit Our Website Tools Section! HOME | Privacy Policy | Terms of Use
Site created by Digital Image, Inc.