All Projects → serkanyersen → Ifvisible.js

serkanyersen / Ifvisible.js

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Ifvisible.js

Create React Library
React NPM library starter kit based on Facebook's create react app
Stars: ✭ 597 (-68.51%)
Mutual labels:  library, npm
Angular Library Starter Kit
Angular 5 Library Starter Kit based on Angular-CLI
Stars: ✭ 35 (-98.15%)
Mutual labels:  library, npm
Rando.js
The world's easiest, most powerful random function.
Stars: ✭ 659 (-65.24%)
Mutual labels:  library, npm
Length.js
📏 JavaScript library for length units conversion.
Stars: ✭ 292 (-84.6%)
Mutual labels:  library, npm
Best Of Python
🏆 A ranked list of awesome Python open-source libraries and tools. Updated weekly.
Stars: ✭ 1,869 (-1.42%)
Mutual labels:  library, utilities
Box Shadows.css
♓️ A cross-browser collection of CSS box-shadows
Stars: ✭ 335 (-82.33%)
Mutual labels:  library, cross-browser
Preppy
A simple and lightweight tool for preparing the publish of NPM packages.
Stars: ✭ 23 (-98.79%)
Mutual labels:  library, npm
Holster
A place to keep useful golang functions and small libraries
Stars: ✭ 166 (-91.24%)
Mutual labels:  library, utilities
Geotic
Entity Component System library for javascript
Stars: ✭ 97 (-94.88%)
Mutual labels:  library, npm
Raisincss
An Utility CSS only library. It supports css grid and many more useful css properties.
Stars: ✭ 93 (-95.09%)
Mutual labels:  library, utilities
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-85.65%)
Mutual labels:  npm, cross-browser
Criterion
Microbenchmarking for Modern C++
Stars: ✭ 140 (-92.62%)
Mutual labels:  mit, library
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-86.5%)
Mutual labels:  library, npm
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-77.32%)
Mutual labels:  library, npm
Stdlib
✨ Standard library for JavaScript and Node.js. ✨
Stars: ✭ 2,749 (+44.99%)
Mutual labels:  library, utilities
Functions.js
📦 A hub of numerous functions with various functionalities
Stars: ✭ 22 (-98.84%)
Mutual labels:  library, npm
Markdown Builder
1kb Markdown builder for Node.js
Stars: ✭ 67 (-96.47%)
Mutual labels:  library, npm
Szl
A lightweight, embeddable scripting language
Stars: ✭ 134 (-92.93%)
Mutual labels:  mit, library
Tosin
Initialize a npm package with everything included, from CI to documentation website
Stars: ✭ 142 (-92.51%)
Mutual labels:  library, npm
Webpages To Ebook
Create an EPUB from a list of URLs. Standing on the shoulders of Wget, Readability and Pandoc.
Stars: ✭ 155 (-91.82%)
Mutual labels:  npm

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 use ifvisible.off() to remove event triggers:

ifvisible.off('idle', triggeredFunction); // will remove only triggeredFunction from being tiggered on idle
ifvisible.off('idle'); // will remove all events triggered on idle

// works with other events:
ifvisible.off('blur');
ifvisible.off('wakeup');
ifvisible.off('focus');

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].