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:




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 = "";
/* 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 */
        /* 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>

        <title>jQuery Redirection With Time Delay</title>        
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <script src="">           </script>        
                margin:0 auto;    


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

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


Checkout Live Demo and download full code for FREE!


Live Demo

Share Button