[TypeScript port available in beta] Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.
Clone or download
serkanyersen Merge pull request #49 from fossabot/master
Add license scan report and status
Latest commit 9df50c2 Jun 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Fix timing problem Jul 9, 2016
src Unix Jul 9, 2016
tests Unix Jul 9, 2016
.gitignore Unix Jul 9, 2016
.jshintrc Unix Jul 9, 2016
Gruntfile.js Unix Jul 9, 2016
LICENSE.md Unix Jul 9, 2016
README.md Add license scan report and status Jun 29, 2018
bower.json Unix Jul 9, 2016
ifvisible.d.ts Unix Jul 9, 2016
package.json Unix Jul 9, 2016

README.md

ifvisible.js

Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.

Check out the Demo or read below for code example or Check Annotated Source

Installation

FOSSA Status

From npm

npm install ifvisible.js --save

From Bower

bower install ifvisible.js

For Meteor

mrt add ifvisible

meteor package is provided by @frozeman via Atmosphere

Examples

// If page is visible right now
if( ifvisible.now() ){
	// Display pop-up
	openPopUp();
}

// You can also check the page status
// using `now` method
if( !ifvisible.now('hidden') ){
  // Display pop-up if page is not hidden
  openPopUp();
}

// 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.on("blur", function(){
	// example code here..
	animations.pause();
});

ifvisible.on("focus", function(){
	// resume all animations
	animations.resume();
});

ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page

ifvisible.on("idle", function(){
	// Stop auto updating the live data
	stream.pause();
});

ifvisible.on("wakeup", function(){
	// go back updating data
	stream.resume();
});

Default idle duration is 60 seconds but you can change it with setIdleDuration method

ifvisible.setIdleDuration(120); // 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.idle(); // will put page in a idle status

ifvisible.idle(function(){
	// This code will work when page goes into idle status
});

// other methods are
ifvisible.blur(); // will trigger idle event as well
ifvisible.idle();

ifvisible.focus(); // Will trigger wakeup event as well
ifvisible.wakeup();

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 seconds
ifvisible.onEvery(0.5, function(){
    // Do an animation on the logo only when page is visible
	animateLogo();

});

License

It's MIT, Go crazy.

FOSSA Status