This displays a jQuery dialog after 14 minutes of inactivity. If 15 minutes passes and no activity is found to be happening within the browser it is redirected to a logout URL:
// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 900000; // Timeout in 15 mins.
var logoutUrl = 'http://domain.com/logout.aspx'; // URL to logout page.
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
});
}
// Logout the user.
function IdleTimeout() {
window.location = logoutUrl;
}
Add onload to your body tag calling StartTimers(). You can also add an onmousemove to the body tag which calls ResetTimer() so that as long as there is activity on the page a timeout is not triggered. If no mouse activity is seen on the page the dialog is displayed if movement is detected the dialog is closed and the timers reset.
<body onload="StartTimers();" onmousemove="ResetTimers();">
And the div used for the jQuery dialog:
<div id="timeout">
<h1>Session About To Timeout</h1>
<p>You will be automatically logged out in 1 minute.<br />
To remain logged in move your mouse over this window.
</div>
Of course you can modify it to fit your needs and wants such as adding a button click which calls ResetTimers() if you dont want it reset when a mouse is moved over the browser but this should give you a starting point.
// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 900000; // Timeout in 15 mins.
var logoutUrl = 'http://domain.com/logout.aspx'; // URL to logout page.
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
});
}
// Logout the user.
function IdleTimeout() {
window.location = logoutUrl;
}
Add onload to your body tag calling StartTimers(). You can also add an onmousemove to the body tag which calls ResetTimer() so that as long as there is activity on the page a timeout is not triggered. If no mouse activity is seen on the page the dialog is displayed if movement is detected the dialog is closed and the timers reset.
<body onload="StartTimers();" onmousemove="ResetTimers();">
And the div used for the jQuery dialog:
<div id="timeout">
<h1>Session About To Timeout</h1>
<p>You will be automatically logged out in 1 minute.<br />
To remain logged in move your mouse over this window.
</div>
Of course you can modify it to fit your needs and wants such as adding a button click which calls ResetTimers() if you dont want it reset when a mouse is moved over the browser but this should give you a starting point.
No comments:
Post a Comment