How to make countdown redirect using JavaScript

Web programming topics
Post Reply
User avatar
Saman
Lieutenant Colonel
Lieutenant Colonel
Posts: 828
Joined: Fri Jul 31, 2009 10:32 pm
Location: Mount Lavinia

How to make countdown redirect using JavaScript

Post by Saman » 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
  • 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 396 times
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:

Code: Select all

<script src="coolRedirect.js" type="text/javascript"></script>
Step 3
Replace the opening body tag of the Target Page with the following:

Code: Select all

<body onload="coolRedirect('https://robot.lk')"> 
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:

Code: Select all

<body onload="coolRedirect('http://microsoft.com')"> 
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:

Code: Select all

<div class="counter" id="COOL_REDIRECT">12</div> 
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..."

Code: Select all

<body onload='coolRedirect(
   "https://robot.lk",
   "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.

Code: Select all

<body onload='coolRedirect(
   "https://robot.lk",
   "<div style=\"margin-top: 50px\">\
Redirecting to ROBOT.LK.org...</div>")'> 
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
Post Reply

Return to “Web programming”