/*
* Created Nov. 3, 2008
* Progress bar script
* Downloaded from: http://www.seabreezecomputers.com/tips/progress.js
*/
/* Cool Javascript Progress Bar for HTML Page
Written by: Jeff Baker on 9/6/07
Copyright 2007 By Jeff Baker -
www.seabreezecomputers.com
vastly modified by grassfedart.com
Copyright 2009
This javascript when called at the beginning of your HTML code
will pop up a progress bar in the middle of the screen and
dynamically show you the percentage of your images that are
loaded. Paste the following code just before in your
HTML document:
Cross Browser Support: This javascript seems to work
fine in IE 6+, Firefox 1.5 and up, Safari 3.0, and Netscape 6+ */
function progBar(idProgBar){
this.setup_bar = setup_bar;
this.progress_bar = progress_bar;
this.close_bar = close_bar;
this.checkstate = checkstate;
this.saydone = saydone;
function setup_bar(visible_state)
{
// alert("setup bar");
this.OneHundredShown = false;
/* You may edit the following variables */
this.bar_length = 200; // the bar will be this many pixels long
this.bar_height = 8; // the bar will be this many pixels high
this.bar_color = "gray"; // the progress bar color
this.bar_background = "white"; // the color of the empty part of bar
this.bar_border = "gray"; // the color of the bar border
this.window_background = "white"; // the color of the pop-up window
this.window_border = "gray"; // the border color of pop-up window
this.text_color = "black"; // the color of the percentage text (50%)
this.display_close_button = 0; // 1 = on; 0 = off
/* Change this.display_close_button to 0 if you do not want the
closing x to appear on the progress bar pop up window. However,
you may want to leave the close button on because every once in
a while there may be a mess up with the images (like one of
the images refuses to load) and then the progress bar may never
close by itself. But regardless of having the close button
display or not, the user can still close the progress bar
window by clicking anywhere on it, but they may not know that
unless you display a close button.
/* the 'wait' variable below should only matter for older
browsers or browsers other than IE, Firefox, Netscape and Safari.
For these other browsers the progress bar will not close until
'wait' seconds have past. If you have a fast loading page you
may want to set this to 4000 or smaller, but if you have a lot
of dial-up users visiting your website or you have a slow loading
page then you may want to change it to 7000 or higher.
Instead of relying on the timer to tell the progress bar to
close, you may want to just uncomment 'window.onload = this.saydone'
below, but only if you are not using a window.unload function. */
this.wait = 5000; // How many milliseconds to wait for other browsers
//window.onload = this.saydone;
/* Do NOT edit anything below this point */
this.more = 0; // Add more to the bar every second
this.doneyet = 0; // changes to 1 when the DOM is done loading
// Add 1 to the window_width so that it can have 1px borders
window_width = this.bar_length + 0;
// Add 1 to window_height so that is can have 1px borders
window_height = this.bar_height + 0;
if (document.all) // if IE
{
// Internet Explorer makes the bar two pixels too low
this.bar_height2 = this.bar_height - 0;
// Internet Explorer makes empty_bar 4 pixels too thin
bar_width2 = this.bar_length + 0;
}
else
{
this.bar_height2 = this.bar_height;
bar_width2 = this.bar_length + 0;
}
/* Now we create the empty part of the progress bar with its
border */
document.getElementById("ImgProgBar").style.display = "block";
pbHTML = document.getElementById("ImgProgBar");
pbHTML.style.visibility = visible_state;
/* pbHTML.innerHTML =
'';
*/
/* Now we create the part that will display the progress bar.
At first it is the width of 0 because percent is 0. */
// tmpHtml = document.getElementById("ImgProgBar").innerHTML;
pbHTML.innerHTML =
'';
/* Now we create the text part that will display the percent */
pbHTML.innerHTML += '0%
';
// for other browsers that don't have DOM complete variables
setTimeout("this.saydone", this.wait);
// If IE
if(document.readyState)
{
// document.onreadystatechange=this.checkstate;
}
else if (document.addEventListener) // if Mozilla or Netscape
{
document.addEventListener("DOMContentLoaded", this.saydone, false);
}
} // end function setup_bar()
function progress_bar()
{
/* the following document element retreives the number of
images on the HTML document */
var image_count = document.getElementsByTagName("img").length;
/* the following variable gets an array of all the images
in the document */
var image_array = document.getElementsByTagName("img");
/* Each part of the progress bar will be this.bar_length divided by
image_count rounded. For example: If there are 5 images and
the total this.bar_length is 300 then each bar_part will be 60 */
var bar_part = Math.round(this.bar_length / image_count);
var bar_rmndr = this.bar_length - (image_count * bar_part);
/* To display the correct percentage, bar_perc is 100 divided
by the number of images on the page rounded */
var bar_perc = Math.round(100 / image_count);
// Width of progress bar //(start with first segment filled)
var new_width = 0; //bar_part + bar_rmndr;
var j = 0; // count how many images are complete
var percent = 0; // Add up the percentage
for (var i = 0; i < image_count; i++)
{
/* The javascript variable 'complete' when used on an
image element retrieves whether an image is done
loading or not. It returns true or flase */
if (image_array[i].complete)
{
percent = percent + bar_perc;
new_width = new_width + bar_part;
j++;
}
}
// alert('check for image complete: ' + j + 'doneyet: ' + this.doneyet);
// If the new_width is not growing because an image is still
// loading then we want to make the bar go up 1% every 1 second
// as long as it has not reached the next bar_part
var curBarWidth = parseInt(document.getElementById('bar').style.width);
if((new_width < curBarWidth) && (new_width < (j * bar_part))){
this.more += .50;
new_width += Math.round(this.more);
percent += Math.round(this.more);
}
else
this.more = 0; // reset more if we loaded next image
// Write the new percent in the progress bar window
percent = (percent < 100 ? percent : 100);
document.getElementById('percent').innerHTML = percent + '%';
// Make the width of the bar wider so that it matches the percent
//If it's longer, set to the bar length
if(new_width <= this.bar_length)
document.getElementById('bar').style.width = new_width + 'px';
else if(new_width > this.bar_length)
document.getElementById('bar').style.width = this.bar_length + 'px';
/* else
this.doneyet = true; //This shouldn't happen!
*/
//this.checkstate(); // need for safari
//document.getElementById('bar').innerHTML = document.readyState;
/* If all the images have not loaded then call this
function again in 500ms. There must be at least one
image in the document or the progress bar window
never closes */
/* if((j < image_count || j == 0) || (this.doneyet == 0))
setTimeout('this.progress_bar();', 500);
else // if done then close the progress bar pop-up window
setTimeout('this.close_bar();', 500); // in half a second
*/
//After reaching 100%, go around one more time so "100%" is shown on bar
if( ((j >= image_count) || (image_count == 0)) && (this.OneHundredShown) )
this.close_bar();
else if((j >= image_count) || (image_count == 0))
this.OneHundredShown = true;
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Microsoft Internet Explorer") && (version <= 7)){
this.checkstate(); //IE bullshit
// alert(browser + " " + version);
if(this.doneyet == true){ //Got set in checkstate (IE)?
// alert('in: progress_bar, doneyet == true (at top)');
this.close_bar(); //Then we're done
return this.doneyet;
}
}
return this.doneyet;
} // end function progress_bar()
function close_bar()
{
//if done then close the progress bar pop-up window
// document.getElementById('bar_window').style.display = 'none';
document.getElementById('ImgProgBar').style.display = 'none';
this.doneyet = true;
} // end function close_bar()
function checkstate()
{
// Besides IE, Safari also can use document.readyState
// but Safari does not support onreadystatechange, so
// we will keep calling this function with this.progress_bar().
// Check to see if document is not "complete" but
// is loaded enough to be "interactive"
if (document.readyState == "complete"){
this.doneyet = true;
// alert(document.readyState);
//Finish percent
// document.getElementById('percent').innerHTML = '100%';
//Finish bar width
// document.getElementById('bar').style.width = this.bar_length + 'px';
}
} // end function checkstate()
function saydone()
{
this.doneyet = true;
alert('in: saydone');
} // end function saydone()
} //END: progBar class