/* Cool Javascript Progress Bar for HTML Page Written by: Jeff Baker on 9/6/07 Copyright 2007 By Jeff Baker 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+ */ /* You may edit the following variables */ var bar_length = 200; // the bar will be this many pixels long var bar_height = 70; // the bar will be this many pixels high var bar_color = "#DBBBB6"; // the progress bar color var bar_background = "white"; // the color of the empty part of bar var bar_border = "#FF6699"; // the color of the bar border var window_background = "#ffffff"; // the color of the pop-up window var window_border = "#2A4F66"; // the border color of pop-up window var text_color = "#5C7F9B"; // the color of the percentage text (50%) var display_close_button = 1; // 1 = on; 0 = off /* Change 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 = saydone' below, but only if you are not using a window.unload function. */ var wait = 5000; // How many milliseconds to wait for other browsers //window.onload = saydone; /* Do NOT edit anything below this point */ var more = 0; // Add more to the bar ever second var doneyet = 0; // changes to 1 when the DOM is done loading function setup_bar() { // Add 50 to the window_width so that it can have 25px borders window_width = bar_length + 50; // Add 50 to window_height so that is can have 25px borders window_height = bar_height + 50; if (document.all) // if IE { // Internet Explorer makes the bar two pixels too low bar_height2 = bar_height - 2; // Internet Explorer makes empty_bar 4 pixels too thin bar_width2 = bar_length + 3; } else { bar_height2 = bar_height; bar_width2 = bar_length + 1; } /* Now we create the pop-up window for the progress bar. screen.height and screen.width gives us the height and width of the user's screen so that we can center the window in it. */ document.write('

'); if (display_close_button) { document.write('

'); document.write('[X]

'); } document.write('

'); document.write('

'); document.write('

For Email Marketing you can trust

'); document.write('

'); // close DIV for bar_window } // end function setup_bar() function close_bar() { //if done then close the progress bar pop-up window document.getElementById('bar_window').style.visibility = 'hidden'; } // end function close_bar() // If IE if(document.readyState) { document.onreadystatechange=checkstate; } else if (document.addEventListener) // if Mozilla or Netscape { document.addEventListener("DOMContentLoaded", saydone, false); } function checkstate() { // Besides IE, Safari also can use document.readyState // but Safari does not support onreadystatechange, so // we will keep calling this function with progress_bar(). // Check to see if document is not "complete" but // is loaded enough to be "interactive" if (document.readyState=="complete" || document.readyState=="complete") doneyet = 1; } // end function checkstate() function saydone() { doneyet = 1; } // end function saydone() // for other browsers that don't have DOM complete variables setTimeout('saydone();', wait); //setup_bar(); // call the function setup_bar() first