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;
}
Related
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")
}
}
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>
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.
*/
I have developed a login page. I am saving sessionId in local storage on login and I want to clear it after some time. But that to be if someone(logged-user) not active for some time. If he is active, I don't want to clear. But I did that even he is active also, I am clearing the local storage. Please help to know how to catch he is active or not.
localStorage.setItem('userId', data.id);
localStorage.setItem('user', data.phone);
localStorage.setItem('sessionId', (Math.random()*1e64).toString(36));
var interval = setInterval(function(){
console.log('In localStorage');
localStorage.removeItem('sessionId');
clearInterval(interval);
alert('Session expired!!')
}, (30*60*1000));
You can just check use a setInterval:
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 > 19) { // 20 minutes
localStorage.removeItem('sessionId');
}
}
Answer borrowed from here
I would like to record times for two different JavaScript events. One for when the mouse isn't moving, and the other for when the mouse is moving.
$(document).ready(function() {
var timeStart = new Date().getTime();
var elapsedTime = (timeEnd - timeStart)/1000
});
I know of the JQuery event mousemove but am not sure how you would track time when a mouse is moving
Try this:
$(document).ready(function () {
var timer = null;
var idleTime = 0;
timer = setInterval(timerIncrement, 1000);
$(document).bind("mousemove", function (e) {
idleTime = 0;
});
function timerIncrement() {
idleTime = idleTime + 1;
}
});