jQuery nap plugin
Introduction
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.
Examples
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-plugin
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
$('#caroufredsel_foo')
.carouFredSel()
.nap('pause', ['next', 'play']);
Cycle-plugin
$('#cycle_foo').cycle().nap(
function() {
$('#cycle_foo').cycle('pause');
},
function() {
$('#cycle_foo').cycle('next').cycle('resume');
}
);
Self defined functions
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;
Installation
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>
Configuration
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.
License
The jQuery.nap plugin is licensed under the MIT license.
\ No newline at end of file diff --git a/include/nap-1.0.0/nap_nl.html b/include/nap-1.0.0/nap_nl.html new file mode 100644 index 00000000..1a2b0921 --- /dev/null +++ b/include/nap-1.0.0/nap_nl.html @@ -0,0 +1 @@ +jQuery nap plugin
Introductie
jQuery.nap is een plugin die het merkt wanneer de bezoeker "een dutje doet" en voert de aangegeven functies uit zodra de bezoeker "in slaap valt" en weer "wakker wordt".
Het zogenoemde dutje (een "nap" in 't Engels) betekend natuurlijk niet dat de bezoeker daadwerkelijk in slaap is gevallen, het geeft slechts aan dat de bezoeker gedurende een bepaalde tijd niet meer actief is geweest op de pagina. Bijvoorbeeld wanneer de pagina geopend blijft tijdens de pauze of het doen van de boodschappen, of wanneer er tegelijkertijd een andere website bezocht wordt.
Om het CPU-gebruik van de computer waar mogelijk te sparen, kunnen lopende animaties worden gestopt om pas weer te beginnen zodra de bezoeker weer actief wordt.
Een andere toepassing zou kunnen zijn dat de bezoeker automatisch wordt uitgelogd als na een tijdje niet actief te zijn geweest.
Voorbeelden
Hieronder wordt de nap-plugin 3 keer toegepast: op de carouFredSel-plugin, de Cycle-plugin en met zelf gedefinieerde functies.
Laat de muis en het toetsenbord los en wacht 5 seconden.
carouFredSel-plugin
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
$('#caroufredsel_foo')
.carouFredSel()
.nap('pause', ['next', 'play']);
Cycle-plugin
$('#cycle_foo').cycle().nap(
function() {
$('#cycle_foo').cycle('pause');
},
function() {
$('#cycle_foo').cycle('next').cycle('resume');
}
);
Zelf gedefinieerde functies
Hier is wat op maat gemaakte napping.
Laat de muis en het toetsenbord los en wacht...
$(document).nap(
function() {
$('#custom_foo')
.addClass('sleep')
.find('p')
.html('Je bent in slaap gevallen!<br />CarouFredSel en Cycle gepauzeerd.');
},
function() {
$('#custom_foo')
.removeClass('sleep')
.find('p')
.html('Je bent wakker geworden!<br />CarouFredSel en Cycle hervat.');
}
);
N.B.: De "standbyTime" (de tijd voordat de bezoeker in slaap valt) is standaard ingesteld op 1 minuut, voor deze demo is het teruggebracht tot 5 seconden:
$.fn.nap.standbyTime = 5;
Installeren
Importeer de jQuery bibliotheek en de nap plugin in de <head> van de pagina.
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.nap.js"></script>
Voeg het volgende JavaScript toe in de <head> van de pagina:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#foo').nap(fallAsleep, wakeUp, standbyTime);
});
</script>
Configuratie
De te configureren parameters (allen zijn optioneel):
fallAsleep String, Object of Function
De functie welke uitgevoerd dient te worden wanneer de bezoeker "in slaap valt", kan zijn:
- Een String van een bij het jQuery-object behorende functie, bijvoorbeeld: "fadeOut" of "slideUp".
- Een Object met daarin meerdere Strings zoals hierboven beschreven.
- Een daadwerkelijke Function, bijvoorbeeld: function() { $("#selector").fadeOut(); }
WakeUp String, Object of Function
De functie welke uitgevoerd dient te worden wanneer de bezoeker "weer wakker wordt", zie de omschrijving van de fallAsleep-parameter.
standbyTime Number
Het aantal seconden dat de bezoeker stil is voordat de fallAsleep-functies worden uitgevoerd.
Dit is een globale tijd, alle functies die door de nap-plugin worden uitgevoerd, doen dat a.d.h.v. dezelfde standbyTime.
De standaard standbyTime is ingesteld op 1 minuut, voor deze demo is het teruggebracht tot 5 seconden.
Licentie
De jQuery.nap plugin is gelicentieerd onder de MIT licentie.
\ No newline at end of file