Page redirection with Live time left preview using jquery

We are going to learn how to create a page redirection script using jQuery. Generally, we use the PHP and JavaScript redirection function to redirect the users in to different URL. Those function simply take the users to another URL. However, today we will build a new way how to redirect and display the a countdown like – “page redirect within 10, 9,8 …….1 seconds“.

Often this type of scripts uses in the download page, where we halt the users for few seconds. In this interval, we can display the advertisement or offer something useful like – Free E-book or Discount Coupon. So, It will be a great script for them who want to hold the users for few moment and then redirect in another URL after specific period of time.

– CSS Scripts:

body{ 
  font-family: verdana; 
  font-size:12px; 
} 
       
div#my-timer{
  width: 400px;
  background: lightblue; 
  margin:0 auto;
  text-align: center;
  padding:5px 0px 5px 0px;
}

– jQuery Scripts:

var settimmer = 0;
$(function(){
    window.setInterval(function() {
        var timeCounter = $("b[id=show-time]").html();
        var updateTime = eval(timeCounter)- eval(1);
        $("b[id=show-time]").html(updateTime);

        if(updateTime == 0){
            window.location = ("redirect.php"); // any page or URL
        }
    }, 1000);

});

– HTML Scripts:

<div id="my-timer">
Page Will Redirect with in <b id="show-time">10</b> seconds
</div>

Div#my-timmer is the main div where we show the count down timer. we have used “margin: 0 auto” property to show the time in the center of the window. Other codes, like the anchor tag used just for visualization purpose.

Now, it’s time to explain the jQuery scripts. Firstly, I have setup a timer variable called “settimmer” and value of this variable is 0. Here I have used a setInterval property of JavaScript, this property called a function after a specific period of time. In the example, I have set up 1 second interval. You can add the time interval according to your application requirement. Here is a screen shoot of my application.

Time counter variable read the value of current time, and update time variable calculate existing time to redirect the page. After that, I assign update time in to show-time block. When the update time value reach at 0(zero), then the jQuery script will redirect the page with [removed] function . In the final line,  1000 means the amount of time interval between function is re-called.

That’s all for the redirection scripts. Simple and useful scripts. I hope you can easily implement this scripts in your web apps and website.

Thanks for reading my tutorial. Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!