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>
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/
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.