{"_id":"ifvisible","_rev":"3-3968e31c3dff588971b7f0c31e02a431","name":"ifvisible","description":"Crossbrowser & lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"ifvisible","version":"1.1.0","description":"Crossbrowser & lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)","main":"src/ifvisible.js","directories":{"doc":"docs","test":"tests"},"scripts":{"start":"grunt"},"repository":{"type":"git","url":"git://github.com/muhammaddadu/ifvisible.git"},"typescript":{"definition":"ifvisible.d.ts"},"keywords":["visibility","HTML5","cross","browser","api","UI","idle","status","mousemove","reading","mode","tab","change"],"author":{"name":"Serkan Yersen","email":"serkanyersen@gmail.com","url":"http://serkan.io/"},"license":"MIT","bugs":{"url":"https://github.com/muhammaddadu/ifvisible/issues"},"homepage":"https://github.com/muhammaddadu/ifvisible","devDependencies":{"grunt":"^0.4.5","grunt-contrib-coffee":"^0.13.0","grunt-contrib-uglify":"^0.9.1","grunt-contrib-watch":"^0.6.1","grunt-docco":"^0.3.3"},"gitHead":"a84f8e50ea5ac506a878476f0a60b48127f13dbf","_id":"ifvisible@1.1.0","_shasum":"a47768028c7c256368b16eaf3312e6898280215c","_from":".","_npmVersion":"2.15.8","_nodeVersion":"4.4.7","_npmUser":{"name":"muhammaddadu","email":"muhammad@dadu.co"},"dist":{"shasum":"a47768028c7c256368b16eaf3312e6898280215c","tarball":"https://registry.npmjs.org/ifvisible/-/ifvisible-1.1.0.tgz","integrity":"sha512-lom547N6AuclrUfwElBvSQMyz5QU0FkO9CZAK43z48P7/OV+eoFPpsmMiq2vjrcytyUkJWakmbrIaQYztX4Mfw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMJJTSrjODyzobFa4nudEiV4YEMyEduov87Y0m0E065AiEA0qiR3NQEmrJKjfX2SkgWp3ZWF3eR9ur4VvHaD73Ppb8="}]},"maintainers":[{"name":"muhammaddadu","email":"muhammad@dadu.co"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/ifvisible-1.1.0.tgz_1474369331639_0.5346815856173635"}}},"readme":"ifvisible.js\r\n------------\r\n\r\nCrossbrowser & lightweight way to check if user is looking at the page or interacting with it.\r\n\r\n#### Check out the [Demo](http://serkanyersen.github.com/ifvisible.js/demo.html) or read below for code example or Check [Annotated Source](http://serkanyersen.github.com/ifvisible.js/docs/ifvisible.html)\r\n\r\n\r\n## Installation\r\nFrom npm\r\n```\r\nnpm install ifvisible.js --save\r\n```\r\n\r\nFrom Bower\r\n```\r\nbower install ifvisible.js\r\n```\r\n\r\nFor Meteor\r\n```\r\nmrt add ifvisible\r\n```\r\n> meteor package is provided by [@frozeman](https://github.com/frozeman/meteor-ifvisible.js) via [Atmosphere](https://atmosphere.meteor.com/package/ifvisible)\r\n\r\n## Examples\r\n\r\n```javascript\r\n\r\n// If page is visible right now\r\nif( ifvisible.now() ){\r\n\t// Display pop-up\r\n\topenPopUp();\r\n}\r\n\r\n// You can also check the page status\r\n// using `now` method\r\nif( !ifvisible.now('hidden') ){\r\n  // Display pop-up if page is not hidden\r\n  openPopUp();\r\n}\r\n\r\n// Possible statuses are:\r\n// idle: when user has no interaction\r\n// hidden: page is not visible\r\n// active: page is visible and user is active\r\n\r\n```\r\n\r\nHandle tab switch or browser minimize states\r\n\r\n```javascript\r\n\r\nifvisible.on(\"blur\", function(){\r\n\t// example code here..\r\n\tanimations.pause();\r\n});\r\n\r\nifvisible.on(\"focus\", function(){\r\n\t// resume all animations\r\n\tanimations.resume();\r\n});\r\n\r\n```\r\n\r\nifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page\r\n\r\n```javascript\r\n\r\nifvisible.on(\"idle\", function(){\r\n\t// Stop auto updating the live data\r\n\tstream.pause();\r\n});\r\n\r\nifvisible.on(\"wakeup\", function(){\r\n\t// go back updating data\r\n\tstream.resume();\r\n});\r\n\r\n```\r\n\r\nDefault idle duration is 60 seconds but you can change it with `setIdleDuration` method\r\n\r\n```javascript\r\n\r\nifvisible.setIdleDuration(120); // Page will become idle after 120 seconds\r\n\r\n```\r\n\r\nYou can manually trigger status events by calling them directly or you can set events with their names by giving first argument as a callback\r\n\r\n```javascript\r\n\r\nifvisible.idle(); // will put page in a idle status\r\n\r\nifvisible.idle(function(){\r\n\t// This code will work when page goes into idle status\r\n});\r\n\r\n// other methods are\r\nifvisible.blur(); // will trigger idle event as well\r\nifvisible.idle();\r\n\r\nifvisible.focus(); // Will trigger wakeup event as well\r\nifvisible.wakeup();\r\n```\r\n\r\nYou can set your smart intervals with ifvisible.js, if user is IDLE or not seeing the page the interval will automatically stop itself\r\n\r\n```javascript\r\n\r\n// If page is visible run this function on every half seconds\r\nifvisible.onEvery(0.5, function(){\r\n    // Do an animation on the logo only when page is visible\r\n\tanimateLogo();\r\n\r\n});\r\n\r\n```\r\n\r\n### License\r\nIt's MIT, Go crazy.\r\n","maintainers":[{"name":"muhammaddadu","email":"muhammad@dadu.co"}],"time":{"modified":"2022-06-19T00:19:14.509Z","created":"2016-09-20T11:02:11.900Z","1.1.0":"2016-09-20T11:02:11.900Z"},"homepage":"https://github.com/muhammaddadu/ifvisible","keywords":["visibility","HTML5","cross","browser","api","UI","idle","status","mousemove","reading","mode","tab","change"],"repository":{"type":"git","url":"git://github.com/muhammaddadu/ifvisible.git"},"author":{"name":"Serkan Yersen","email":"serkanyersen@gmail.com","url":"http://serkan.io/"},"bugs":{"url":"https://github.com/muhammaddadu/ifvisible/issues"},"license":"MIT","readmeFilename":"README.md"}