Page redirection with Live time left preview using jquery

Today we learn how to create a page redirection script using jquery. Usually we use simple redirection function in PHP, javascript, But today we know a new way how to page redirect with show time like “page redirect within 10, 9,8 …….1 seconds”.

Basically, we use this type of scripts in content download page, we want to hold user before they click in the download button. In this time interval period, our downloaded topics get proper time to complete it’s own execution. So, It will be a great scripts for them who want to hold download or terminate script execution for a specific time interval.

Let’s start.

Demo

– 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. I use “margin: 0 auto” property to show the time in the center of the window. Rest of the style sheet like- anchor tag used just for visualization purpose.

Now I’m going to discuss about jQuery scripts. Initially I’ve setup a timer variable called “settimmer” and value of this variable is 0. Here I’ve used a setInterval property of JavaScript, this property called a function after a specific period of time. I have set up 1 second interval in my scripts. If you want you can change this time interval as you like for your application. 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 update time value is going to 0(zero), then my jQuery script redirect the page with [removed] function . In the last line 1000 means, amount of time interval between function is re-called.

That’s all for the redirection scripts. Simple and smooth 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!