Wednesday 21 August 2013

jQuery - Page Redirect after X seconds wait

You must have come across any website which uses a webpage with some annoying advertisement and a message that says “You will be redirected to actual page after X seconds”. This can be easily implemented with jQuery. In this post, find jQuery code to redirect user to another webpage after specific time interval or few seconds.


The below jQuery code uses JavaScript setInterval which executes a function, over and over again, at specified time intervals. So all is required is to set the setInterval as 1 second and then minus the counter from actual time interval. When it reach to zero second , simply redirect to specific path.


HTML Code


<h1>You will be redirect to actual page after <span id="spnSeconds">10</span> seconds.</h1>

CSS Code


body {
font-size:12pt;
font-family:Calibri;
}
#spnSeconds {
font-size:25pt;
color:Red;
}

Jquery Code


$(document).ready(function () {
window.setInterval(function () {
var iTimeRemaining = $("#spnSeconds").html();
iTimeRemaining = eval(iTimeRemaining);
if (iTimeRemaining == 0) {
location.href = "http://paceinfonet.org/jquery-page-redirect-after-x-seconds-wait/";
} else {
$("#spnSeconds").html(iTimeRemaining - 1);
}
}, 1000);
});


jQuery - Page Redirect after X seconds wait

No comments:

Post a Comment