How to make a number to be counted every second
I have this code to accomplish this task: if there is no activity from the user (mousemove and keypress) for 10 seconds then display a dialog (JQuery UI dialog) to alert and inform the user that they will be redirected to another page in the next 5 seconds if they don't do anything. How to do " 5 " to "You will be automatically redirected to ... in 5 seconds". to count down as 5, 4, 3, 2, 1 => then redirect?
<script>
// Set timeout variables.
var timoutWarning = 10000; // Display warning in 10 seconds.
var timoutNow = 15000; // Timeout in 15 seconds
var logoutUrl = 'http://google.com'; // URL to redirect to.
var warningTimer;
var timeoutTimer;
// Start timers.
function StartTimers() {
warningTimer = setTimeout("IdleWarning()", timoutWarning);
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}
// Reset timers.
function ResetTimers() {
clearTimeout(warningTimer);
clearTimeout(timeoutTimer);
StartTimers();
$("#timeout").dialog('close');
}
// Show idle timeout warning dialog.
function IdleWarning() {
$("#timeout").dialog({
modal: true
});
}
// redirect the user.
function IdleTimeout() {
window.location = logoutUrl;
}
</script>
Html
<style>
#timeout {
display: none;
}
</style>
<body onload="StartTimers();" onmousemove="ResetTimers();" onclick="ResetTimers();">
<form id="form1" runat="server" defaultbutton="DoNothing">
<asp:Button ID="DoNothing" runat="server" Enabled="false" Style="display: none;" />
<div class="page-container">
<div class="container">
Hold your mouse and don't press any key for 10 seconds, an dialog alert will be displayed.
<div id="timeout">
<h1>Session About To Timeout</h1>
<p>
You will be automatically redirected to google after 5 seconds.<br />
To stay on this page move your mouse or press any key.
</p>
</div>
</div>
</div>
</form>
source to share
Vano's suggestion of the jQuery plugin is good and there is no reason not to use it. If you want to do it yourself, the code should be pretty simple:
var timer = -1; //so the timer doesn't start until everything is rendered
setInterval(function() {
timer--;
if (!timer) {
window.location = logoutUrl;
} else if (timer <= 5) {
$('#timeout').html("Redirecting in " + timer + " seconds");
}
}, 1000);
$(document).on('ready keypress mousemove focus click scroll', function() {
timer = 15;
});
Working example: http://jsfiddle.net/jvvgepo4/
source to share
You can use jquery-idleTimeout
Here is a demon
Usage example:
$(document).ready(function(){
$(document).idleTimeout({
inactivity: 10000,
noconfirm: 5000,
dialogTitle: 'title',
dialogText: 'warning text',
redirect_url: 'http://google.com',
});
});
Edit:
To add a countdown function you can use jquery-idle-timeout
It has an onCountdown event. Here is a working example.
source to share