Develop Reference

swal alert after 10 minutes of inactivity

How can I make a swal alert that gets triggered after 10 minutes of inactivity on my laravel app?
Also, there should be a logout button in the swal alert. Is it possible?

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 > 10) { // ten minute
alert("enter your html code for logout")
}
}

Cannot understand why event is undefined

I'm sorry, I feel this is a really classic issue but since I'm learning I don't know why it's not working in my case.
I'm trying to have a script that detect your idle time and if so, execute a function that get your mouse position.
In order to do that, I have the function TimerIncrement() that can check 2 seconds of inactivity, if so I would like to execute another function called GetMousePos in order to get the mouse position and to have a console.log of it.
I've tried looking online and on the forums but nothing I have been doing is helping.
Thanks for the precious help.
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1s
//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) { // 2sec
getMousePos();
idleTime = 0; // reset timer
}
}
function getMousePos(event) {
x = event.pageX;
y = event.pageY;
console.log(x);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

So you're calling getMousePos which takes a parameter of event and you are not passing anything to it hence the Cannot read property 'pageX' as event.pageX (event not defined). You can only get to the event object ON a event callback so I am assuming you want to get the last event you have seen if any.
The below should work for you, storing the lastEvent seen you should then be able to get the info you want. Hopefully, this code example makes you understand what you were missing.
var idleTime = 0;
var lastEvent = undefined;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1s
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
lastEvent = e;
});
$(this).keypress(function (e) {
idleTime = 0;
lastEvent = e;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 2) { // 2sec
getMousePos(lastEvent);
idleTime = 0; // reset timer
}
}
function getMousePos(event) {
if (!event) {
console.log("No mouse or keypress has been executed yet");
return;
}
x = event.pageX;
y = event.pageY;
console.log(x);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can't get the mouse position without an event, so we need to track the mousemove and save the latest position.
$(function() {
let idleTime = 0
let pos = []
let timer = window.setInterval(incTime, 1000)
function incTime() {
idleTime++
checkTime()
$('.time span')[0].innerText = idleTime
}
function checkTime() {
if (idleTime > 2) {
resetTime()
$('.x span')[0].innerText = pos[0]
$('.y span')[0].innerText = pos[1]
}
}
$(document).on('mousemove', e => {
window.clearInterval(timer)
resetTime()
pos[0] = e.pageX
pos[1] = e.pageY
timer = window.setInterval(incTime, 1000)
})
function resetTime() {
idleTime = 0
$('.time span')[0].innerText = idleTime
}
})
<div class="time">Idle time: <span>0</span></div>
<div class="x">X: <span></span></div>
<div class="y">Y: <span></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Detect inactivity on touch devices with javascript

I've been researching and found code that detects inactivity(when the user doesn't touch the screen) after the user goes idle for x amount of time which works perfectly when using the mouse but when I try using this with touch screen devices, it doesn't detect my finger or work. I've added a lot of DOM events such as "touchstart", "touchmove", "touchend", "touchcancel" and others but they don't seem to work either. Here is my code
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 3000);
//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 > 1) {
alert("ok");
}
}

I will adjust the timer (you sayd you want an update every minute but you set you setInterval to 3000 millisec and i will try with this:
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000);
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
//Zero the idle timer on touch events.
$(this).bind('touchstart', function(){
idleTime = 0;
});
$(this).bind('touchmove', function(){
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 1) {
alert("ok");
}
}

Try adding this code:
$(this).bind('touchstart touchmove click', function(){
idleTime = 0;
}

Execute function only once for user idle timeout

I want to display offer banner when the user idle timeout 5 seconds, however following code is showing offer banner every idle 5 seconds.But i want execute the following function only once for first idle 5 seconds.Any body help me out
$(document).ready(function(){
idleTime = 0;
//Increment the idle time counter every five second.
var idleInterval = setInterval(timerIncrement, 5000);
function timerIncrement()
{
console.log(idleTime++);
if (idleTime > 5)
{
doPreload();
}
}
//Zero the idle timer on mouse movement.
$(this).mousemove(function(e){
idleTime = 0;
});
function doPreload()
{
$('#add-click').click();
}
});

you are using only mouse move what if the user working with keyboard you have to check for that also
var inactivityTime = function () {
var temp;
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function resetTimer() {
clearTimeout(temp);
temp = setTimeout(logout, 3000)
// 1000 milisec = 1 sec
}
};

you need to use setTimeout instead of setInterval
window.setTimeout(function(){
timerIncrement();
}, 5000);
This will execute only once.

Why don't you try setTimeout instead of setInterval?

Correct the logic in this function as :
var idleInterval = setInterval(timerIncrement, 1000);
function timerIncrement() {
console.log(idleTime++);
if (idleTime == 5) {
doPreload();
idleTime = 0; // reset idleTime variable
}
}
/** This will increase counter by one every second,
* and if counter reaches to 5 then call to banner
* display and reset counter.
*/

Using system clock for accurate idle timeout warning

I am working on a modal which will alert users of a pending logout due to idle time. Overall it works, but I notice the timer is not 100% accurate. I know there are issues with setInterval and accuracy. I still seeing discrepancies and will welcome a suggestion on how to improve my code.
var sessionTimeoutPeriod = 240;
var state = "L";
var timeoutPeriod = sessionTimeoutPeriod * 1000;
var logout = Math.floor(timeoutPeriod / 60000);
var idleInterval;
if (state == "L" || state == "O" || state == "C") {
var idleTime = 0;
$(document).ready(function() {
//Zero the idle timer on mouse movement.
$(this).mousemove(function(e) {
idleTime = 0;
console.log("The mouse moved, idle time = " + idleTime);
});
$(this).keypress(function(e) {
idleTime = 0;
console.log("A key was pressed, idle time = " + idleTime);
});
idleInterval = setInterval(timerIncrement, 60000); // 1 minute
});
function timerIncrement() {
idleTime++;
console.log("The total idle time is "+idleTime+ " minutes.");
if (idleTime >= 1) {
console.log("The modal will fire if idle time = " +idleTime);
var modal = new window.AccessibleModal({
mainPage: $('#main'),
overlay: $('#overlay').css('display', 'block'),
modal: $('#modal-session-timeout'),
prevFocus: $('#main')
});
modal.show();
$('#modal-overlay').removeClass('opened');
$('.js-timeout-refresh, .xClose').click(function() {
modal.hide();
$('#overlayTY').css('display', 'none');
idleTime = 0;
console.log("The total idle time is "+idleTime+ " minutes.");
});
$('.js-timeout-session-end').click(function() {
modal.hide();
$('#overlay').css('display', 'none');
endSession();
});
console.log(idleTime);
}
if (idleTime == logout) { // 9 minutes
endSession();
}
var endSession = function() {
document.location.replace(logoutPageUrl);
};
}
}

Instead of relying on the interval to determine how much time has passed, you could validate how much time has passed manually by comparing the current time against the time since last activity.
This way you can increase the checking interval without having to modify the code. The discrepancy will never be higher then then the interval timeout now, the discrepancy will also not change incrementally, it will always be lower or equal to the interval ( in worst case scenario ).
Here is a basic example.
var sessionTimeoutPeriod = 240;
var timeoutPeriod = sessionTimeoutPeriod * 1000;
var oneMinute = 60000;
var showIdlePopUpTimeOut = oneMinute * 2;
var lastActivity = new Date();
function getIdleTime() {
return new Date().getTime() - lastActivity.getTime();
}
$(document).ready(function () {
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
console.log("The mouse moved, idle time = " + getIdleTime());
lastActivity = new Date();
});
$(this).keypress(function (e) {
console.log("A key was pressed, idle time = " + getIdleTime());
lastActivity = new Date();
});
setInterval(checkIdleTime, 5000);
});
function endSession() {
document.location.replace(logoutPageUrl);
};
function checkIdleTime() {
var idleTime = getIdleTime();
console.log("The total idle time is " + idleTime / oneMinute + " minutes.");
if (idleTime > showIdlePopUpTimeOut) {
var modal = new window.AccessibleModal({
mainPage: $('#main'),
overlay: $('#overlay').css('display', 'block'),
modal: $('#modal-session-timeout'),
prevFocus: $('#main')
});
modal.show();
$('#modal-overlay').removeClass('opened');
$('.js-timeout-refresh, .xClose').click(function () {
modal.hide();
$('#overlayTY').css('display', 'none');
lastActivity = new Date();
});
$('.js-timeout-session-end').click(function () {
modal.hide();
$('#overlay').css('display', 'none');
endSession();
});
console.log(lastActivity);
}
if (idleTime > timeoutPeriod) { // 4 minutes
endSession();
}
}

The problem is that your function "timerIncrement" checks the difference every minute after loading the page, so you will never get exact 1 minute after last activity.Changing interval from 60000 to 1000 will solve the issue.
You don't even need to calculate diff, you can just reset timeout every time there is activity. like this:
$(this).on("mousemove keypress", function(e) {
clearInterval(idleInterval);
idleInterval = setTimeout(functionThatExecutesAfter1minInactivity, 60000);
});