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.

- Page redirection with Live time left preview using jquery:

First we have to write some css scripts to show the time in our browser. Have a look at top css section.

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 javascripts, 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.

timecounter variable read the value of current time and updatetime 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.

Now, I am going to talk on the HTML segments. when you load this script for the first time you can see a window like below-

"my-timer" Div show the time left for page redirecting. Here you can show 10 (you can show any value as per your requirements). In every 1 second interval, time will decrease and when this time going to 0(zero) then window.location function redirect you in your desired page. You can set relative path or absoulate path for redirect url.

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. Have a look at the:

Demo

Download Now

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!

Like our site? Be a member of Coolajax fan page to get daily posts updates!