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 less seconds left on the clock.

The message displayed to the visitor states:

The page you are looking for has been moved to .
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 ' + targetURI + '.
Please update your bookmarks.
' + '
Redirect in ' + timeToRedirect + '.
';
    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

Return

There is no return.

Examples

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

The above call will result in the message to the visitor to be displayed at page element ID “missing-conttent”, 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