This are the code that I currently have:
var interval;
function printPageState() {
console.log("active");
}
window.onfocus = function() {
console.log("focus");
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
window.onblur = function() {
console.log("blur");
clearInterval(interval);
};
window.onscroll = function() {
console.log("scroll");
if (!document.hasFocus())
document.getElementById("some-id").focus();
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
I'm attempting to create a user attention checker/page-pinging like functionality. the checker currently has an event handler for blur, focus, and scroll event.
And I'm having the problem that was stated above when the following stuff are met.
Your browser had some viewable part on the browser view port which make it possible to scroll even if the page was not in focus.
The page was out of focus and or blur event was already fired.
I want to stop the interval but the blur event was not firing anymore as the browser isn't focus so I tried to force the focus state on one of the element but no locky it wasn't working.
Do the following issue to replicate the issue:
Open the page in minimized browser > then focus out the page.
Scroll on the visible browser view port but do not click (which won't make focus state true).
Related
I have a Progressive Web App that I need to refresh every time the user opens it.
To achieve this I have tried:
1) First Option
window.onblur = function() {
window.onfocus= function () {
window.location = self.location;
}
};
2) Second Option
var blurred = false;
window.onblur = function() {
blurred = true;
};
window.onfocus = function() {
blurred && (window.location = self.location);
};
Credit of Option 1: https://stackoverflow.com/a/16406350/11843328
Credit of Option 2: https://stackoverflow.com/a/11313719/11843328
This work well but the problem is that sometimes whenever you click something, it reloads again. It basically reloads like 4 times in a row with some action. Other times it works as expected, just reloading once, but most of the times is like 4 or 5 times in a row.
I need it to reload just once when opened (on focus). Is there any alternatives I could try or any advice would be appreciated!
Make sure you're using window focus event. As others have pointed out, there is no need to use the blur event, as focus will only fire if the window focus was blurred.
You can use the window.location.reload method to reload the window as well.
window.addEventListener("focus", e => window.location.reload());
<p>Look for a flicker</p>
You don't need the onblur event. Using just the onfocus event will do the work.
I want to make a touch screen web kiosk (running Edge) that resets itself after idle timeout.
When no one touches the screen for 2 min (for example), it will refresh itself.
How can I do this with js? I want to use it on a local html page.
This code ended up working for me, tried many others:
https://stackoverflow.com/a/39725556/11185656
var idleTime;
$(document).ready(function () {
reloadPage();
$('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
clearTimeout(idleTime);
reloadPage();
});
});
function reloadPage() {
clearTimeout(idleTime);
idleTime = setTimeout(function () {
location.reload();
}, 10000);
}
in my Cordova App I have a problem on iOS devices and I have no idea how to solve.
I have a custom auto-suggest which shows up below an input field while typing. All is contained in a dialog box with "position: fixed;".
Autocomplete is an unordered list. Click on < li > Element should place the selected text into the input.
The problem is, when user clicks on the li, the input loses focus, the keyboard disappears and the whole fixed dialog box "jumps" down and the click event is not recognized.
It is recognized when the keyboard already IS closed.
I tried several workarounds, like giving focus back to input field immediately after blur. But it does not help. Keyboard closes and opens instead of just keeping opened.
Any Ideas how to solve?
Here is a video showing the behaviour. It is recorded on the iOS Simulator but same behaviour on real iPhone 6s.
I have found a solution now. As I said the click event is not triggered when the keyboard hides, but a touchstart event is triggered.
So I did a workaround, looking for touchstart event followed by a blur event. If the touchstart-target does not receive a click event within a given time, I will trigger one. This works on my test iPhone 6s.
Here is the code:
var iosTapTarget=null;
if (device.platform === 'iOS') {
js.eventListener(document.body).add('iosTap', 'touchstart', function (e) {
iosTapTarget = e.target;
js.eventListener(iosTapTarget).add('iosTapClick', 'click', function(e) {
// when the target receives a click, do not trigger another click
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
});
// after short time unset the target
window.setTimeout(function () {
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
}, 600)
});
// on each input fields listen for blur event and trigger click event on element received touchstart before
var blurableElements = document.querySelectorAll('input[type=text],input[type=email],input[type=password],textarea');
for (var j = 0; j < blurableElements.length; ++j) {
js.eventListener(blurableElements[j]).remove('iosBlur', 'blur');
js.eventListener(blurableElements[j]).add('iosBlur', 'blur', function () {
window.setTimeout(function() {
if (iosTapTarget) {
js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
js.triggerEvent(iosTapTarget, 'click');
}
}, 50);
});
}
}
PS: Event handling comes from my own JS "framework" js.js available here: https://github.com/JanST123/js.js
But you can use vanilla JS event handling or jQuery event handling too, of course.
I want to dismiss bootstrap modal if no action in browser screen for 10-15 seconds.
I have tried settimeout() function but this will not check the action in the browser.
setTimeout(function() {$('#form').modal('hide');}, 10000);
So, Is there any way to hide modal box if no action in the browser?
The snippet below with set the flag actionAppeared if there a keypress in the keyboard or 'mousemove' in the mouse.
var actionAppeared = false;
jQuery(document).mousemove(function (e) { actionAppeared = true; });
jQuery(document).keypress(function (e) { actionAppeared = true; });
setTimeout(function() {
if(!actionAppeared) {
$('#form').modal('hide');}
}
, 10000);
Here is a working demo. Open the console to see the mousemove and keypress events.
The mousemove events is triggered really easy so to test it open the modal and quickly move the cursor away from the keyboard.
Need your valuable feedback on this. I have implemented idletimeout functionalty so that session will expire in 3 minutes if the user is idle.
In three scenario, I am resetting the timer.
On click or tap
after 2 seconds while processing is in progress
on scroll or scrollstart
The problem is sometimes session is getting timeout before the 3 minutes even if I tap, click or scroll and user is redirected to login page even if the function is gets called on tap click or scroll and resettimers is getting called. I am facing a bit hard time to figure out the loophole.
I am posting the code; please let me know if you notice anything.
// Set timeout variables.
var timoutNow = 180000 ;
var ua = navigator.userAgent;
var event = ((ua.match(/iPad/i)) || (ua.match(/iPhone/i)) || (ua.match(/iPod/i))) ? 'touchstart' : 'click';
var logoutUrl = Mobile+'/login.html'; // URL to logout page.
var timeoutTimer;
// Start timers.
function StartTimers() {
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
//console.log(timoutNow);
}
// Reset timers.
function ResetTimers() {
clearTimeout(timeoutTimer);
StartTimers();
}
// Processing time check.
function Laodtimercheck()
{
setInterval(function(){
if($("body").hasClass("loading-processing")==true)
{
ResetTimers();
}
}, 2000);
}
// Logout the user.
function IdleTimeout() {
sessionStorage.clear();
document.location.href = Mobile+'/login.html';
}
$(document).live(event, function(){
//console.log("Reset timers: ON TAP OR CLICK");
ResetTimers();
});
$(document).mouseover(function() {
//console.log("Reset timers: ONMOUSEOVER");
ResetTimers();
});
$(window).scroll(function() {
//console.log("Reset timers: SCROLL");
ResetTimers();
});
$(document).live("scrollstart", function(){
//console.log("Reset timers: SCROLLSTART");
ResetTimers();
});
EDIT: setTimeout only working first two times; next time ResetTimers are getting invoked but the setTimeout is not working or I might be missing something here as the session is getting timed out as per pervious two call time only....
The real problem that you're having is the folowing: "ResetTimers" not being invoke enough.
Why is not being invoked enough? I'll try to answer that.
All the logic is Ok with a few exceptions. There are two "problematic" events that not work or I think don't work like you want.
1.- LIVE (event)
That event is not being fired never. You cannot attach a live event to a document, yo need to specify a node, like html or body.
$("body").live(event, function(){
//console.log("Reset timers: ON TAP OR CLICK");
ResetTimers();
});
That's why when clicked the timer don't reset.
Another (and recomended) way to use a variable for binding events is to use .delegate().
Since jQuery 1.4.3+ is the recomended way of doing this.
$(document).delegate("body", event, function(){
//console.log("Reset timers: ON TAP OR CLICK (delegate)");
ResetTimers();
});
Any of those (live on body or delegate) would work and timer get reset on click or tap event.
2.- MOUSEOVER
There isn't a problem per se with this event, but I think it would be insuficient. MouseOver only fires where the pointer get on screen first time, if the mouse don't leave the window the mouseover never fires again. Maybe, a better or added way of control "mouse hovering" on the document is to use onmousemove event. Like I said in a comment before, I don't know if you want to be strict on this, so I left you a proposal and let's see if it fits your needs.
$(document).mouseover(function() {
console.log("Reset timers: ONMOUSEOVER");
ResetTimers();
});
In my tests, events get fires a lot, and the timers get reset on each event without problems. I hope it helps you.