Skip to content

jQuery Redirection With Countdown – Live Demo

Share Button

Sometimes we want to redirect a user to a specific page within a certain amount of time.
It’s good and clear if we let the user know when exactly redirection will start.
jQuery comes with a perfect solution that can make it happen.

Below is a screenshot of complete jQuery redirection example:

 

jQuery_redirection_with_countdown

 

Live Demo

 

Below is a jQuery script that let us to redirect page after a countdown and display necessary text.
I’ve applied appropriate comments throughout the script for better understanding.

/* Countdown seconds */
var count = 5;
/* Website to redirect */
var url = "http://www.sharemyweb.com";
/* Call function at specific intervals */
var countdown = setInterval(function() { 
    /* Display Countdown with txt */
    $('#displayTimer').text("Redirection in: " + count-- + " seconds");
    /* If count is smaller than 0 ...*/
    if (count < 0) {
        $('#displayTimer').text("Redirecting now....");
        /* Clear timer set with setInterval */
        clearInterval(countdown);
        /* Redirect */
        $(location).attr("href", url);
   } 
    // milliseconds
}, 1000);

 

You can set your own countdown time redirection link. The only thing you need to do is to set first variables on the top of the script: url and countdown.

 

Just before redirection after a countdown is completed a counter will change into redirection text like below:

 

 

 

Demo version of he code contains two files. First one is the script above and second one is index.html that contains all markup, styles etc.:

<!DOCTYPE html>

<html>    
    
    <head>        
        <title>jQuery Redirection With Time Delay</title>        
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">           </script>        
        <style>
            #timeCounterHolder{
                margin:0 auto;    
            }
            #displayTimer{
                color:#666;
                font-size:50px;
                text-align:center;
            }
        </style>        
    </head>

<body>

    <div id='timeCounterHolder'>
        <div id='row'>
            <p id='displayTimer'></p>
        </div>            
    </div>

    <footer>
        <!--Main jQuery Script-->
        <script type="text/javascript" src="script.js"></script>    
    </footer>
    
</body>
    
</html>

 

Checkout Live Demo and download full code for FREE!

 

Live Demo

Share Button