Function: countdown_redirect [JavaScript]

The countdown_redirect function will display a message and an active countdown at a specified location on the current web page. Once the countdown has reached zero the visitor will be redirected to the target page.

The countdown numbers will become bold and red at 5 or fewer seconds left on the clock.

The message displayed to the visitor states:

The page you are looking for has been moved to <link>.
Please update your bookmarks.
Redirect in <counter>.

Source Code

/* Countdown to auto-redirect
* Author: Alexandar Tzanov
* Revised: 2013-05-31
* Version: 02.00.00
* Description: The function will display a countdown before redirecting
* the user to a new address.
* Input: Page element ID ; Seconds before redirect; Target URI.
*/

function countdown_redirect(targetURI, optVars) {
  // Check if the optional variable is integer or a string
  function value_type(varType) {
    for (i = 0; i < optVars.length; i++) {
      if (typeof(optVars[i]) === varType) {
        return optVars[i];
      }
    }

    return false;
  }

  // Default values
  var timeToRedirect = (typeof(optVars) !== 'undefined' && value_type('number')) ? value_type('number') : 8;
  var pageBlockID = (typeof(optVars) !== 'undefined' && value_type('string')) ? value_type('string') : 'redirect-message';

  // Display the message on the page.
  var viewMessage = 'The page you are looking for has been moved to <a href="' + targetURI + '">' + targetUR + '</a>.<br>Please update your bookmarks.<br>Redirect in <span id="viewCounter" style="color: black;">' + timeToRedirect + '</span>.';
  document.getElementById(pageBlockID).innerHTML = viewMessage;

  var viewCounter = document.getElementById('viewCounter');

  // Countdown
  function countdown() {
    timeToRedirect--;

    // If the remaining seconds are 5 or less then change view to red.
    if (timeToRedirect <= 5) {
      viewCounter.style.color = 'red';
      viewCounter.style.fontWeight = 'bold';
    }

    // Update counter on the page view.
    viewCounter.innerHTML = timeToRedirect;

    // Sleep and update the view.
    if  (timeToRedirect > 0) {
      setTimeout(countdown, 1000);
    } else {
      // Redirect the visitor to the target page.
      window.location = targetURI;
    }
  }

  setTimeout(countdown, 1000);
}

Usage

countdown_redirect(string targetURI, array [[integer timeToRedirect], [string pageBlockID]]);

Parameters

Name	Definition	Default Value
targetURI	The URI of the page where the visitor should be redirected to. Also visible in the message displayed on the page to the visitor.	required
timeToRedirect	The number of seconds to count down before sending the visitor to the target page.	8
pageBlockID	References the ID attribute of the HTML block where the message to the visitor should be displayed.	redirect-message

Return

There is no return.

Examples

window.onload = countdown_redirect('http://titanfusion.net', [10, 'missing-content']);

The above call will result in the message to the visitor to be displayed at page element ID “missing-content”, and after 10 seconds the visitor will be redirected to “http://titanfusion.net”.

window.onload = countdown_redirect('http://titanfusion.net', [3]);

The above call will result in the message to the visitor to be displayed at the default page element ID “redirect-message”, and after 3 seconds the visitor will be redirected to “http://titanfusion.net”.

Revision History

Date	Version	Changes
2013-05-31	02.00.00	Made the timeToRedirect and pageBlockID optional. They can now be passed as an array. A local function will parse the array and interpret the values so they can be assigned accordingly.
2013-05-30	01.00.00	Initial release.