I'm a complete newb to javascript, and much of this code was pulled from other sites. I'm trying to use two things I found to make a page redirect after the user is inactive for a specified amount of time.
I was able to get the timer working and make the page reload instead of redirecting, but my redirect code doesn't work for some reason.
EDIT: forgot to mention this code needs to work for specific pages, as I will be using one page to redirect to a specific page, and another to a different page.
jQuery(document).ready(function( $ ){
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 10000); // 10 seconds
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if ((idleTime > 0) && (window.location.pathname == '/wp')) { // 10 seconds
window.location.href = "https://www.google.com";
}
}
});
I tried you code, it works, but wrong. If it don't work for you - remove that && (window.location.pathname == '/wp') and try again. You have bigger problem, your code just redirects after 10 seconds no matter what. You need to replace to something like that:
jQuery(document).ready(function( $ ){
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1 second
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if ((idleTime > 9) && (window.location.pathname == '/wp')) { // 10 seconds
window.location.href = "https://www.google.com";
}
}
});
Related
I have written some code that brings up a message for the user to either ignore the message or go to another page if they have been idle for more than a minute. Everything works, as I want it to except when the user ignores the message. Here is my code:
if ( valid ) {
var idleTime = 0;
jQuery(document).ready(function () {
var idleInterval = setInterval(timerIncrement, 60000);
});
function resetTimer() {
idleTime = 0;
}
jQuery(document)
.on('mousemove', resetTimer)
.on('keydown', resetTimer)
.on('scroll', resetTimer);
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 1) {
jQuery('#popup').show();
}
jQuery(window).unbind();
}
jQuery('#popupClose').click(function() {
jQuery('#popup').hide();
});
}
I want the popup to not repopulate after they click #popupClose.
I'd do it like this. Just define a start time when you initialize your script. Let an interval run that checks how much time has passed. If it's more than your time wished show the dialog. if not hide it. Also reset the timer on your events.
Your javascript will look like this
$('#btclose').on('click', function(){
clearInterval(interv);
$('#popup').hide();
});
var start = new Date();
var interv = setInterval(function(){
var now = new Date();
console.log()
if(now-start > 5*1000){
$('#popup').show();
}
},10);
$('body').on('mousedown click mousemove', function(){
start = new Date();
});
Here's my fiddle
https://jsfiddle.net/c2L7wpn3/8/
Seems to work. Let me know if this helps
You can either store the information in a cookie, or with a flag (depending on whether you want the popup on each pageview or only once, period).
Then, check the flag/cookie before the showing of the popup. For example:
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 1) {
if (jQuery('#popup').data('closed') == 1){
jQuery('#popup').show();
}
}
jQuery(window).unbind();
}
jQuery('#popupClose').click(function() {
jQuery('#popup').data('closed', 1);
jQuery('#popup').hide();
});
I am working on an application which requires to logout itself after certain amount of time, if user is not active on the page. I am using azure authentication token, and it expires in One hour. Now here I am trying to setup two timers, first timer will run every one min and will keep on resetting itself with every mouse action, and the 2nd timer should load after 58 mins of inactive, showing there are only 120 seconds remaining in the session. I am unable to get desired the functionality, the first timer runs after 1 min, but simultaneously it also kicks of the second timer.
Here's my Javascript code..
<script>
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
$(this).mousemove(function (e) {
count = 120;
});
$(this).keypress(function (e) {
count = 120;
});
clearInterval(counter);
//vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime => 57) { // 57 minutes
$("#sessionTimeout").show();
timerModal();
}
console.log(idleTime);
}
</script>
I required the same effect for a site once, here is the code if it helps. (it's set to immediately show the prompt for testing purposes)
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
resetlogout();
});
$('textarea').keypress(function(e) {
resetlogout();
});
var autolog1 = setTimeout("logmeoutmsg()", 1);
var autolog = setTimeout("logmeout()", 10000);
function logmeout() {
window.location.href = "index.php?logout=1";
}
function logmeoutmsg() {
$("#logoutmsg").show();
var count=10;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
timer();
function timer()
{
$("#counterdown").html(count);
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
}
}
function resetlogout() {
clearTimeout(autolog1);
clearTimeout(autolog);
autolog1 = setTimeout("logmeoutmsg()", 1);
autolog = setTimeout("logmeout()", 10000);
$("#logoutmsg").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoutmsg" style="display:none;position:fixed;left:50%;top:100px;margin-left:-400px;border:1px solid #2e2e2e;width:800px;background:#eedbba;padding:10px 0px;">
<div style="width:760px;margin-left:20px;text-align:center;">
You will be logged out in <div style="display:inline-block;" id="counterdown"></div> seconds.<br><input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Cancel">
<input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Logout">
</div>
</div>
I fixed it my self with some modifications, here's the modified code !!
Works perfectly fine!!
<script>
var idleTime = 0;
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
function timerIncrement() {
idleTime = idleTime + 1;
console.log(idleTime);
if (idleTime > 2) { // 57 minutes
clearInterval(idleInterval);
timerModal();
console.log("hello");
}
console.log(idleTime);
}
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
</script>
How can i fire a JQuery event when the user is gone on idle from the website for a specified time, and reset the timer on mouse move, scroll or on a key press.
This works by using a setTimeout function to fire at the end of the specified seconds. If basically anything happens during that time (the mouse moves, the page is scrolled, or a key is pressed) the timeout period is reset.
Set the idle period on the third line.
idleTimer = null;
idleState = false;
idleWait = 2000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$("body").append("<p>Welcome Back.</p>");
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery)
Here is a simple script using JQuery that handles mousemove and keypress events. If the time expires, the spinner-wrap event is fired.
<script type="text/javascript">
var idle = 0;
$(document).ready(function () {
//Increment the idle time counter every seconds.
var idleInterval = setInterval(timerIncrement, 1000); // 1 seconds
//Zero the idle timer on mouse move.
$(this).mousemove(function (e) {
idle = 0;
});
// zero the idle timer on keypress
$(this).keypress(function (e) {
idle = 0;
});
});
function timerIncrement() {
idle = idle + 1;
if (idle > 5) { // 5 seconds
$('.spinner-wrap').trigger('click');
}
}
</script>
I am looking fo ra jQuery plugin that does the following behaviour:
1. Find user inactivity for a period of 10 minutes.
2. After 10 minutes display an alert or lightbox message. I believe lightbox would be better.
3. After 5 more minutes, perform an action.
My javascript code is :
<script type="text/javascript">
var idleTime = 0;
var activeTime = 0;
var warningFlag = 0;
setInterval(function checkIdle() {
idleTime += 1;
activeTime += 1;
//document.write(idleTime + ' ' + activeTime);
if(idleTime > 5) {
alert("Idle from last 5 seconds!! You have been active for last "+ activeTime);
warningFlag=1;
}
if((idleTime > 10) && (warningFlag==1)) {
alert("Idle from last 10 seconds!! You have been active for last "+ activeTime);
window.location = "www.tinyprints.com";
}
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
},1000);
function resetTimer() {
idleTime = 0;
}
</script>
But i was thinking to use a jQuery plugin.
There's a good jQuery plugin here:
http://www.erichynds.com/jquery/creating-a-mint-com-style-idle-logout-timer-using-jquery/
which allows you to do exactly what you want. You can easily get it to change pages after 10 minutes by changing the redirectAfter parameter.
Scenario is that I have written a function for auto refresh on form element and I want onclick event on login button to disable the auto refresh function.
I'm not able to get disable the autorefresh and the page still refreshes.
My code is:
$('#form').ready(function () { //Increment the idle time counter every minute.
var idleInterval = setInterval("timerIncrement()", 15000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e){
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 2) { // 20 minutes
window.location.reload();
}
}
$('#login').ready(function () {
alert("working promptly");
//Zero the idle timer on mouse movement.
$(this).click(function (e) {
alert("Hi In click !");
$('#form').attr("disabled","true");
});
});
I guess you are needing to clear the interval timer:
$(this).click(function (e) {
alert("Hi In click !");
$('#form').attr("disabled","true");
clearInterval(idleInterval);
});