We Keep Coding

javascript autologout for inactivity for 10 minutes

hello all i am writing a code for auto logout for inactivity for about 20 minutes which should interact with keyboard as well as mouse and i have following code which works for most of the function but it is not resetting the timer for mouse movement and keyboard activity.
var timoutWarning = 9000; // Display warning in 14 Mins.
var timoutNow = 9000; // Warning has been shown, give the user 1 minute to interact
var logoutUrl = 'logout.php'; // URL to logout page.
var warningTimer;
var timeoutTimer;
// Start warning timer.
function StartWarningTimer() {
warningTimer = setTimeout("IdleWarning()", timoutWarning);
}
// Reset timers.
function ResetTimeOutTimer() {
clearTimeout(timeoutTimer);
StartWarningTimer();
$("#timeout").hide();
}
// Show idle timeout warning dialog.
function IdleWarning() {
clearTimeout(warningTimer);
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
$("#timeout").show();
}
// Logout the user.
function IdleTimeout() {
window.location = logoutUrl;
}
$( document ).ready(function() {
StartWarningTimer();
});
$('html').mousemove(function() {
ResetTimeOutTimer();
});
i want the code should intract with mouse movement and keyboard press
all kind of help is appreciated please suggest me something

At first, you should not use setTimeout this way - inactive tabs getting slower, so there's no guarantee that your code will be executed in 14 minute. The better way to do that is to check repeatedly the elapsed time.
var startTime = +new Date();
function checkForWarning () {
if (+new Date() - startTime > maxInactiveTime) {
// show warning
}
}
You can track activity this way:
$(document)
.on('click', ResetTimeOutTimer)
.on('mousemove', ResetTimeOutTimer);
Hope it helps.

Show Popup after 10min of inactive

Hello,
can't find a code :x Can someone post, or explain how can i make a Popup after 10minutes of inactive ?
When member is inactive of 10minutes after Page is loaded, the members will get a Popup with some Buttons and Text
<div>
<p>Away from keyboard?</p>
<ul class="button">
<li>I'm Back!</li>
</ul>
</div>

var seconds = 0;
var timeoutCounter = setInterval(function(){
seconds++;
if(sec == 600) {
// do stuff to launch popup
clearInterval(timeoutCounter);
}
}, 1000);
$(document).mousemove(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
$(document).keypress(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
This basically runs every second - and if it's the 600th second, it quits after running your code.
Source for idle checking

Attach the events to the document object along with the setTimeout method to display the popup. One way to do it is
var popupTimer,
TIME_OUT = 600;
// function that displays the popup
function displayPopup() {
// display the popup here
}
// Set the timeout to display the popup
popupTimer = setTimeout(displayPopup, TIME_OUT);
// attch events to the document object
// you can add more events here based on
// what events you want to track
$(document).on('click change keypress', function() {
// clear the timeout whenever the event is handled
clearTimeout(popupTimer);
// Reset the timer
popupTimer = setTimeout(displayPopup, TIME_OUT);
});

setTimeout function if user not active

I can do something such as the following every 30 seconds to reload the page, and the backend logic will determine which session have been invalidated:
setInterval(function () {
location.reload()
}, 30000);
However, how would I only run this 30s location.reload() if the user is not active? For example, how banks will have a user-timeout if the user has not been active on the page (which only starts counting after the user is 'inactive'). How would this be done?

One way is to track mousemoves. If the user has taken focus away from the page, or lost interest, there will usually be no mouse activity:
(function() {
var lastMove = Date.now();
document.onmousemove = function() {
lastMove = Date.now();
}
setInterval(function() {
var diff = Date.now() - lastMove;
if (diff > 1000) {
console.log('Inactive for ' + diff + ' ms');
}
}, 1000);
}());

First define what "active" means. "Active" means probably, sending a mouse click and a keystroke.
Then, design your own handler for these situations, something like this:
// Reseting the reload timer
MyActivityWatchdog.prototype.resetReloadTimer = function(event) {
var reloadTimeInterval = 30000;
var timerId = null;
...
if (timerId) {
window.clearInterval(timerId);
}
timerId = window.setInterval( reload... , reloadTimeInterval);
...
};
Then, make sure the necessary event handler will call resetReloadTimer(). For that, you have to look what your software already does. Are there key press handlers? Are there mouse movement handlers? Without knowing your code, registering keypress or mousemove on document or window and could be a good start:
window.onmousemove = function() {
...
activityWatchdog.resetReloadTimer();
...
};
But like this, be prepared that child elements like buttons etc. won't fire the event, and that there are already different event handlers. The compromise will be finding a good set of elements with registered handlers that makes sure "active" will be recognized. E.g. if you have a big rich text editor in your application, it may be enough to register only there. So maybe you can just add the call to resetReloadTimer() to the code there.

To solve the problem, use window blur and focus, if the person is not there for 30 seconds ,it will go in the else condition otherwise it will reload the page .
setTimeout(function(){
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
$('div').text("user is not active on page ");
break;
case "focus":
location.reload()
break;
}
}
$(this).data("prevType", e.type);
})},30000);
DEMO : http://jsfiddle.net/rpawdg6w/2/

You can check user Session in a background , for example send AJAX call every 30 - 60 seconds. And if AJAX's response will be insufficient (e.g. Session expired) then you can reload the page.
var timer;
function checkSession() {
$.ajax({
url : 'checksession.php',
success: function(response) {
if (response == false) {
location.reload();
}
}
});
clearTimeout(timer);
timer = setTimeout(checkSession,30 * 1000);
}
checkSession();

Close popup after x minutes unless there was activity

I have a link that when clicked, opens a new window using:
var win = window.open(url,....);
This window contains a flash game.
I want to close the window after 20 minutes of inactivity.
I know I can create a timeout using:
var t = setTimeout("dosomething()", 5000)
But how can I figure out if there was activity or not on the popup?
If the user interacts with the flash, can I get this information still via the dom events?
I want to avoid the situation of closing the window while they are playing :)
This is in a IE based environment.

theInterval = 0;
function doSomething(){
do something;
}
function ScheduleDoSomething(){
theInterval = setInterval(function () {
doSomething();}, timeToClose);
}
jQuery(document).keydown(function (e) {
clearInterval(theInterval);scheduleDoSomething();
});
I hope this helps.

How about adding a listening event for the mousemove, keypress, and click events and clearing the timer every time the events happen.
var t = setTimeout(closeWindow, 5000);
$(document).on('mousemove keypress click', function(){
clearTimeout(t);
t = setTimeout(closeWindow, 5000);
});
function closeWindow(){
window.close();
}

Jquery timeout code not re-running after first time user extends session

I wrote a Jquery function that blacks out the screen after a certain amount of inactivity, creates a pop-up that allows the user to click a button to stay logged in, and logs them out (closing the application window) if they do not respond in time.
The environment is ASP.NET (VB). We don't technically use master pages, but we do have a parent page in which our header, footer and nav reside, and my Jquery code is called from that window, loaded via an IFrame.
I've got a function in the child window that reports activity (currently keydown, mousedown and blur) to the parent window, and resets the timer. My code seems to be working fine, except in one scenario. If the user is prompted with the timeout warning, and then they click the button to continue their session, if they take no action on the page (mouseclick, keydown, etc.) then the timeout code is not running a second time.
Here is my main jquery function:
function pop_init() {
// show modal div
$("html").css("overflow", "hidden");
$("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
//$("#popup_overlay").click(popup_remove); // removed to make sure user clicks button to continue session.
$("#popup_overlay").addClass("popup_overlayBG");
$("#popup_overlay").fadeIn("slow");
// build warning box
$("#popup_window").append("<h1>Warning!!!</h1>");
$("#popup_window").append("<p id='popup_message'><center>Your session is about to expire. Please click the button below to continue working without losing your session.</center></p>");
$("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/> Continue Working</button></center></div>");
// attach action to button
$("#continue").click(session_refresh);
// display warning window
popup_position(400, 300);
$("#popup_window").css({ display: "block" }); //for safari using css instead of show
$("#continue").focus();
$("#continue").blur();
// set pop-up timeout
SESSION_ALIVE = false;
window.setTimeout(popup_expired, WARNING_TIME);
}
Here is the code from the parent window:
<script language="javascript" type="text/javascript">
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
//SESSION_ALIVE = true;
timer = window.setTimeout(pop_init, SESSION_TIME);
}
</script>
Here is the code from the child window:
<script type="text/javascript">
$(document).ready(function() {
window.parent.reportChildActivity();
});
</script>
<script type="text/javascript">
$(document).bind("mousedown keydown blur", function() {
window.parent.reportChildActivity();
});
The last script runs in a file (VB.NET ascx file) that builds the header/menu options for every page in our system.
The last line in the pop_init function clearly should be re-starting the timer, but for some reason it doesn't seem to be working.
Thanks for any help and insight you may have.
Forgot to add my code for the session_refresh function:
function session_refresh() {
SESSION_ALIVE = true;
$(".buttons").hide();
$("#popup_message").html("<center><br />Thank you! You may now resume using the system.<br /></center>");
window.setTimeout(popup_remove, 1000);
$("#popup_window").fadeOut("slow", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
}

use this: http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/

You need to restart your timer after the user clicks the button.

Well, I seem to have fixed the problem by changing this:
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
to this:
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
I didn't need to re-declare the reportChildActivity function as I was.