We Keep Coding

Javascript popup when idle, only after a button is clicked

I'm trying to create a popup when a user is idle for (x) seconds and the idle timer only starts after a button is clicked but the timer is reset if there is mouse movement or another click. I also want this popup to only occur 1 timer per session.
So far I have the function working when the button is clicked and the popup shows up after 3 seconds. I would like the timer to be able to be reset when the mouse moves or is clicked.
Here's my javascript
function idlePop() {
var timer = 3000;
function resetTimer() {
}
$(document).ready(function() {
if (!sessionStorage.getItem('popupPreviouslyShown') || false) {
setTimeout(function() {
$('#donate-overlay').css('display', 'block');
sessionStorage.setItem('popupPreviouslyShown', true);
}, timer);
}
});
}
And the html button if you wanted to see it
<button onclick="idlePop();">Start</button>
I'm getting choked up on the function to reset the timer on mouse move (onmousemove) and on mouse click. Any help would be extremely appreciated.

i propose a solution , we'll see with what you say:
i suggest you to replace
<button onclick="idlePop();">Start</button>
by
<button id="start">Start</button>
user clicks on start button and after an idle of 3sec the popup appears
UPDATED V1.0
$(document).ready(function() {
var stage = 0;
var timer = 3000;
var timout = -1;
var isDetectionActivated = false;
$("#start").on('click', function(e) {
$("#start").prop("disabled", true);
//e.stopPropagation();
console.log("start");
idlePop();
})
function activateDetection() {
isDetectionActivated = true;
$(document).on("mousemove click", function(e) {
console.log("timeout aborted")
// you couldt test the type of event with e.type
clearTimeout(timout);
//console.log("you have moved or clicked", e.type);
//re-launch process
idlePop();
});
}
function desactivateDetection() {
$(document).off("mousemove click");
isDetectionActivated = false;
}
function idlePop() {
console.log("idlePop");
//for debuging
/*
timout = launchTimeout(timer);
return;
*/
if (!sessionStorage.getItem('popupPreviouslyShown') || false) {
timout = launchTimeout(timer);
}
}
function launchPopup() {
console.log("popup");
$('#donate-overlay').css('display', 'block');
sessionStorage.setItem('popupPreviouslyShown', true);
}
function launchTimeout() {
if (!isDetectionActivated) {
activateDetection();
}
console.log("timeout activated");
return setTimeout(function() {
console.log("timeout finished");
$("#start").prop("disabled", false);
clearTimeout(timout);
desactivateDetection();
launchPopup();
}, timer);
}
});

Idle event on mouse move - how to create loop?

Im trying to create this kind of code on my website:
When user is idle div "#news-main-page" have to fade in and fade out every 15 seconds.
But when user moves mouse I want function to break.
When user break function when news-main-page is visible it stays visible,
when user break function when news-main-page is hidden it stays hidden.
How to achieve this?
Right now it work like this if user will start moving mouse after sometime idle, function still execute
Below is my code
jQuery(document).ready(function( $ ){
idleTimer = null;
idleState = false;
idleWait = 15000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page").delay(15000).fadeOut();
$("#news-main-page").delay(15000).fadeIn();
$("#news-main-page").delay(15000).fadeOut();
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery)
});

Just call .stop() on news-main-page
$(document).ready(function () {
var myFunc =
function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page").delay(15000).fadeOut();
$("#news-main-page").delay(15000).fadeIn();
$("#news-main-page").delay(15000).fadeOut();
idleState = true; }, idleWait);
});
$("body").mouseMove(function() {
$('*').unbind('mousemove keydown scroll',myFunc);
$("#news-main-page").stop();
});
});
$('*').bind('mousemove keydown scroll',myFunc);
}) (jQuery)

reset timer on click using javascript

i have this JS Code:
<script>
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, 6000)
});
$(document).ready(function () {
window.setTimeout(function () {
location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, 12000)
});
</script>
it displays a DIV after X Seconds then redirects the page after Y Seconds
is there a way to create a link that will reset the timer back to X seconds and without having to refresh the page?

You could write a wrapper for setTimeout like this
function myTimeout(fn, delay) {
var o = {i: null};
o.cancel = function () {
if (o.i) window.clearTimeout(o.i);
};
o.reset = function () {
if (o.i) window.clearTimeout(o.i);
o.i = window.setTimeout(fn, delay);
};
o.reset();
return o;
}
Then
// common (ancestor?) scope
var t;
// descendant scope, set
t = myTimeout(function () {
$('#logout_warning').reveal();
}, 6000);
// descendant scope where you attach listener to your link
$('#my_link').on('click', function () {
t.reset(); // re-start the timeout
return false;
});

Detect Mousemovent inside of blur function Jquery

I am trying to create a neat way to stop an AJAX called based upon if the browser is in focus, and if the mouse moves.. So here's what I want it to do:
If the user goes to a different tab in their browser, minimized the window, or goes somewhere else other than the web app, I want it to kill the AJAX calls in 1 minute. If the user moves the mouse anywhere in the web app, it should consider the user "focused" on the app, and thus continue the ajax calls. I put a timeout called "st" in there to take care of the "timeout" portion, but adding in a mouse detector is a little more advanced. Here's what I have:
var window_focus = true;
$(document).ready(function () {
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});
waitForMsg();
});
I was going to try adding in something like this:
$(function () {
$().mousemove(function () {
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
});
});
But it didn't work. Thanks for your help.

http://jsfiddle.net/popnoodles/5mqMm/
You probably want this using .one(). This will see the mouse move, run your procedure and not run it again, until the window is reloaded or it's on another page.
Putting it inside of blur means blurring sets it up again.
}).blur(function () {
$(document).one('mousemove', function(){
// i react ONCE to the mouse being moved
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
// focus the window again as desired
$(window).trigger('focus');
});
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});

Try this jsfiddle
var window_focus = true, lastMouseMoveTime;
$(document).ready(function () {
lastMouseMoveTime = new Date().getTime();
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
window_focus = false;
console.log('Init Suspension...');
// Set Timeout
});
waitForMsg();
$(document).mousemove(function(){
lastMouseMoveTime = new Date().getTime();
if(!window_focus ){
waitForMsg(); // restarting ajax if it stopped because of mousemove.
}
});
});
in your ajax call method
if( !window_focus){
if( new Date().getTime() - lastMouseMoveTime > 60*1000 ){
return;
}
}

How to differentiate between single and double click

I added to my handler the function you shared, and it looks like this:
initMouseHandling:function(){
var dragged = null,
_mouseP,
selected,
nearest = null,
show = true,
num_console = 0,
timeout,
clicks,
delay = 500;
var handler = {
single_double_click: function (element, clicked, double_click, timeout) {
$(element).observe('click', function (event) {
++clicks;
if (clicks === 1) {
var timeoutCallback = function (event) {
if (clicks === 1) {
clicked.call(this, event);
} else {
double_click.call(this, event);
}
clicks = 0;
};
timeoutCallback.bind(this, event).delay(timeout / 1000);
}
}.bind(this));
return false;
},
clicked:function(e){
...
},
dragged:function(e){
...
},
dropped:function(e){
...
},
over_edge:function(e){
...
},
over_node:function(e){
...
},
double_click:function(e){
...
}}
canvas.mousemove(handler.over_node);
canvas.mousemove(handler.over_edge);
canvas.mousedown(handler.single_double_click);
//canvas.mousedown(handler.clicked);
//canvas.dblclick(handler.double_click);
}
It says:
"Uncaught TypeError: Object [object Object] has no method 'observe'"
Regardless of using $(canvas) or $(window) as I've seen in other places...
I don't know if I should introduce the handlers as parameters or not, why I cannot use "observe" and if for a case like mine I should call my handlers like that:
clicked.call(this, event);
double_click.call(this, event);
Any suggestions?

Have you looked into jQuery's dblclick?

There is no jquery function observe and the error tells you that.
To detect double clicks you start a timeout on the first click,
cancel it if clicked in timeout duration (200ms) and trigger single click or trigger double click on next click:
let timeout;
$("button").on("click", () => {
if (timeout) {
clearTimeout(timeout);
timeout = null;
alert("double click")
return;
}
timeout = setTimeout(() => {
alert("single click");
timeout = null;
}, 200); // 200ms, try other values for best ux
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>