Timer Bar




This script shows a progress bar used as a timer. You set the total time for delay. Then set the bar width, height, and colors in the .js file and the bar "counts" up the amount of time you specified. Note: the script starts only once the page is fully loaded.

Once the bar is done, you can specify a set of javascript actions to perform or cause a page redirect. There is a function in the script called action(). You simply add your javascript commands here or you can cause a redirect to another page by adding something like: document.location.href="http://redirect_page.html";. Currently it is set to hide the bar and display an alert message.

You can also cause the current page to reload by adding something like: document.location.reload(). Note: If the script is used in this way, the current page will reload itself continuously after n seconds. This would really only be useful for pages that have changing content like a webcam page, or maybe a news page.

You can specify an action to take place when the bar is clicked with the mouse. The action(s) to take place when this happens is determined by a function called clickBar(). This can be used to cancel the timerbar if the user clicks it. If you do not want anything to happen, just remove everything in this function.



Instructions:



1: Copy and paste the following script in the BODY section of your page wherever you want the bar to appear:
Select all...




2: Adjust the settings in the .js file. You can set the colors, width, height, and the number of seconds for the script to count. Placement is determined by where in your HTML page you pasted the code in step 1.


3: Upload the "timerbar.js" file to your server.