jQuery.nap is a plugin that detects when the user is "taking a nap" and executes the defined functions when the user "falls asleep" and "wakes up".
The so called nap does ofcourse not mean the user actually fell asleep, it merely indicates that the user has been idle on the page for a given amount of time. For example when the page stays open during a break or while doing the groceries, or when the user is visiting another website while keeping yours open.
To minimize the computers CPU-use, running animations can be paused to be resumed as soon as the user becomes active again.
The plugin could also be used to automatically log the user out if he has been idle for some time.
Below the nap-plugin is applied 3 times: on the carouFredSel-plugin, the Cycle-plugin and with self defined functions.
Let go of your mouse and keyboard and wait for 5 seconds.
$('#caroufredsel_foo')
.carouFredSel()
.nap('pause', ['next', 'play']);
$('#cycle_foo').cycle().nap(
function() {
$('#cycle_foo').cycle('pause');
},
function() {
$('#cycle_foo').cycle('next').cycle('resume');
}
);
Here's some custom napping.
Let go of your mouse and keyboard and wait...
$(document).nap(
function() {
$('#custom_foo')
.addClass('sleep')
.find('p')
.html('You fell asleep!<br />CarouFredSel and Cycle paused.');
},
function() {
$('#custom_foo')
.removeClass('sleep')
.find('p')
.html('You woke up!<br />CarouFredSel and Cycle resumed.');
}
);
Please note: By default, the "standbyTime" (the elapsed time before a user falls asleep) is set to 1 minute, for this demo it is reduced to 5 seconds:
$.fn.nap.standbyTime = 5;
Include the jQuery library and the nap plugin inside the <head> tag of the page.
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.nap.js"></script>
Add the following JavaScript inside the <head> tag of the page:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#foo').nap(fallAsleep, wakeUp, standbyTime);
});
</script>
The parameters to configure (all are optional):
fallAsleep String, Object or Function
The functie to be executed when the user "falls asleep", can be:
- A String of the function beloning to the jQuery-object, for example: "fadeOut" or "slideUp".
- An Object containing multiple Strings as described above.
- An actual Function, for example: function() { $("#selector").fadeOut(); }
WakeUp String, Object or Function
The functie to be executed when the user "wakes up", See the description of the fallAsleep-parameter.
standbyTime Number
The amount of seconds the user is idle before the fallAsleep-functions will be executed.
This is a global time, all functions executed by the nap-plugin are bound to the same standbyTime.
By default, the standbyTime is set to 1 minute, for this demo it is reduced to 5 seconds.
The jQuery.nap plugin is licensed under the MIT license.