snappymail/vendors/ifvisible
RainLoop Team 333c063cf1 Change build system (Grunt -> Gulp)
Remove attachments on reply (Closes #195)
Do not show deleted (flag \Deleted) messages (Closes #185)
Release commit
2014-06-16 23:56:11 +04:00
..
src Simple prefetch functionality (ifvisible.js) 2014-01-26 18:23:37 +04:00
.jshintrc Simple prefetch functionality (ifvisible.js) 2014-01-26 18:23:37 +04:00
component.json Simple prefetch functionality (ifvisible.js) 2014-01-26 18:23:37 +04:00
ifvisible.min.js Change build system (Grunt -> Gulp) 2014-06-16 23:56:11 +04:00
README.md Simple prefetch functionality (ifvisible.js) 2014-01-26 18:23:37 +04:00

ifvisible.js

Crosbrowser & 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 Sorce

Installation

From Bower

bower install ifvisible

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();
}

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();
ifvisible.focus();
ifvisible.idle();
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();

});