Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.
Demo or read below for code example or Check Annotated SourceCheck out the
npm install ifvisible.js --save
bower install ifvisible.js
mrt add ifvisible
// If page is visible right nowif ifvisible// Display pop-up;// You can also check the page status// using `now` methodif !ifvisible// Display pop-up if page is not hidden;// Possible statuses are:// idle: when user has no interaction// hidden: page is not visible// active: page is visible and user is active
Handle tab switch or browser minimize states
ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page
Default idle duration is 60 seconds but you can change it with
ifvisible; // Page will become idle after 120 seconds
You can manually trigger status events by calling them directly or you can set events with their names by giving first argument as a callback
ifvisible; // will put page in a idle statusifvisible;// other methods areifvisible; // will trigger idle event as wellifvisible;ifvisible; // Will trigger wakeup event as wellifvisible;
You can set your smart intervals with ifvisible.js, if user is IDLE or not seeing the page the interval will automatically stop itself
// If page is visible run this function on every half secondsifvisible;
It's MIT, Go crazy.