How to make countdown redirect using JavaScript
Posted: Tue Feb 16, 2010 11:39 pm
Cool Redirect is a JavaScript script that allows you to easily set up a web page redirector that displays a graphical countdown of the seconds to go before the web page is redirected.
No web server is required to run Cool Redirect. It is portable, light-weight, highly configurable, supports foreign languages, and best of all, it's free!
Browser Compatibility
Step 1
Download the file cool_redirect.zip to your computer.
cool_redirect.zip contains the following files:
coolRedirect.js
demo1.htm
demo2.htm
coolRedirect.js is the script that runs the program. Files demo1.htm and demo2.htm are demo files. They are the same demo files that can be viewed at our website by clicking on the buttons above. You're free to modify demo1.htm and demo2.htm for your own personal use. This is probably the easiest way to get started.
Step 2
Unzip cool_redirect.zip. Create an HTML file in the same directory as the one you just unzipped the contents of cool_redirect.zip. We will refer to this HTML file as the Target Page. Instead of creating a new Target Page, you can use a preexisting HTML file. Open the Target Page in an editor and place the following script tag pair between the opening and closing <head></head> tags:
Step 3
Replace the opening body tag of the Target Page with the following:
This will redirect the Target Page to the ROBOT.LK.org home page. Read the next step to learn how to redirect the Target Page to the URL of your choice.
Step 4
In the code above, replace the text in single quotes with the URL you want the Target Page redirected to. For example, if you were Bill Gates and you wanted your page redirected to the Microsoft Home Page, your opening body tag would look as follows:
Step 5
Designate which tag on your Target Page will display digits when the countdown timer is counting down. You do this by assigning the id attribute of the tag to COOL_REDIRECT.
In the demo1.htm example we designated the following tag to display countdown digits by setting the id attribute of the tag to COOL_REDIRECT as follows:
We didn't have to use a div tag. We could have used a span tag as we did in demo2.htm, or any other tag type that can contain text in between its opening and closing tags.
Step 6
Determine the number of seconds you want to count down before the page is redirected and place this number between the tag pair where you want to have countdown digits displayed.
The tag type that you designate to have Cool Redirect display countdown digits must have a positive integer in between its opening and closing tag. Do not place letters or non-numeric characters between the tag pair or the program won't function properly.
Notice in the div tag above, in Step 5, we designated that the countdown timer start counting down at 12 seconds.
Step 7
This is an optional step that involves setting the format of the digits displayed during the countdown. It has nothing to do with the operation of Cool Redirect.
Cool Redirect renders digits in the format specified by your HTML code. In both demo1.htm and demo2.htm we controlled the font size and color of the text by creating a Style Sheet class called counter in the style tag and assigning it to the class attribute of the div tag, as seen above in Step 5.
Step 8
This is an optional step. It is applicable to people who want to provide foreign language support or want to customize the default look of Cool Redirect.
After the countdown timer has finished counting down, by default Cool Redirect displays the text: "Redirecting..." while the page is being redirected. You can change this text by adding it as a string to the second parameter of the coolRedirect function in the onload handler of the body tag. In the example below, we change Cool Redirect's default text to "Redirecting to ROBOT.LK.org..."
Note that the text of the second parameter to the coolRedirect function replaces the existing HTML inside the opening and closing body tags of the document. Because you are adding HTML code to the page, you are free to supply an HTML tag. For example, the following code places our custom message 50 pixels below the top margin of the page.
Also keep in mind that since you are adding HTML, it must be valid HTML.
Step 9
Upload the Target Page and coolRedirect.js to your website, and place them in the same directory.
Courtesy of CodeHouse
No web server is required to run Cool Redirect. It is portable, light-weight, highly configurable, supports foreign languages, and best of all, it's free!
Browser Compatibility
- Internet Explorer 5.0 and above
- Netscape 6.0 and above
- Mozilla 1.0 and above
- Opera 7.0 and above
Step 1
Download the file cool_redirect.zip to your computer.
cool_redirect.zip- (2.21 KiB) Downloaded 484 times
coolRedirect.js
demo1.htm
demo2.htm
coolRedirect.js is the script that runs the program. Files demo1.htm and demo2.htm are demo files. They are the same demo files that can be viewed at our website by clicking on the buttons above. You're free to modify demo1.htm and demo2.htm for your own personal use. This is probably the easiest way to get started.
Step 2
Unzip cool_redirect.zip. Create an HTML file in the same directory as the one you just unzipped the contents of cool_redirect.zip. We will refer to this HTML file as the Target Page. Instead of creating a new Target Page, you can use a preexisting HTML file. Open the Target Page in an editor and place the following script tag pair between the opening and closing <head></head> tags:
Code: Select all
<script src="coolRedirect.js" type="text/javascript"></script>Replace the opening body tag of the Target Page with the following:
Code: Select all
<body onload="coolRedirect('https://robot.lk')"> Step 4
In the code above, replace the text in single quotes with the URL you want the Target Page redirected to. For example, if you were Bill Gates and you wanted your page redirected to the Microsoft Home Page, your opening body tag would look as follows:
Code: Select all
<body onload="coolRedirect('http://microsoft.com')"> Designate which tag on your Target Page will display digits when the countdown timer is counting down. You do this by assigning the id attribute of the tag to COOL_REDIRECT.
In the demo1.htm example we designated the following tag to display countdown digits by setting the id attribute of the tag to COOL_REDIRECT as follows:
Code: Select all
<div class="counter" id="COOL_REDIRECT">12</div> Step 6
Determine the number of seconds you want to count down before the page is redirected and place this number between the tag pair where you want to have countdown digits displayed.
The tag type that you designate to have Cool Redirect display countdown digits must have a positive integer in between its opening and closing tag. Do not place letters or non-numeric characters between the tag pair or the program won't function properly.
Notice in the div tag above, in Step 5, we designated that the countdown timer start counting down at 12 seconds.
Step 7
This is an optional step that involves setting the format of the digits displayed during the countdown. It has nothing to do with the operation of Cool Redirect.
Cool Redirect renders digits in the format specified by your HTML code. In both demo1.htm and demo2.htm we controlled the font size and color of the text by creating a Style Sheet class called counter in the style tag and assigning it to the class attribute of the div tag, as seen above in Step 5.
Step 8
This is an optional step. It is applicable to people who want to provide foreign language support or want to customize the default look of Cool Redirect.
After the countdown timer has finished counting down, by default Cool Redirect displays the text: "Redirecting..." while the page is being redirected. You can change this text by adding it as a string to the second parameter of the coolRedirect function in the onload handler of the body tag. In the example below, we change Cool Redirect's default text to "Redirecting to ROBOT.LK.org..."
Code: Select all
<body onload='coolRedirect(
"https://robot.lk",
"Redirecting to ROBOT.LK.org...")'> Code: Select all
<body onload='coolRedirect(
"https://robot.lk",
"<div style=\"margin-top: 50px\">\
Redirecting to ROBOT.LK.org...</div>")'> Step 9
Upload the Target Page and coolRedirect.js to your website, and place them in the same directory.
Courtesy of CodeHouse