mirror of
https://github.com/ACSPRI/queXS
synced 2024-04-02 12:12:16 +00:00
1 line
7.4 KiB
HTML
1 line
7.4 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
|
|
<title>jQuery nap</title>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.nap-1.0.0.js"></script>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.cycle.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.carouFredSel-1.2.1.js"></script>
|
|
<script type="text/javascript" language="javascript">
|
|
$(document).ready(function() {
|
|
$('#caroufredsel_foo').carouFredSel().nap('pause', ['next', 'play'], 5);
|
|
$('#cycle_foo').cycle({
|
|
timeout: 2500,
|
|
speed: 500
|
|
}).nap(
|
|
function() { $('#cycle_foo').cycle('pause'); },
|
|
function() { $('#cycle_foo').cycle('next').cycle('resume'); }
|
|
);
|
|
$(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.');
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
<style type="text/css" media="all">
|
|
div.carouselholder {
|
|
position: relative;
|
|
width: 200px;
|
|
}
|
|
div.carouselholder ul, div.carouselholder li {
|
|
display: block;
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
div.carouselholder ul {
|
|
padding: 0;
|
|
}
|
|
div.carouselholder li {
|
|
border: 1px solid #ccc;
|
|
background-color: #eee;
|
|
float: left;
|
|
width: 48px;
|
|
height: 38px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
div.sleep, div.border.sleep {
|
|
background-color: #ccc;
|
|
}
|
|
div.border {
|
|
padding: 9px;
|
|
border: 1px solid #ccc;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<small>Deze pagina in het <a href="nap_nl.html">Nederlands</a></small>
|
|
<h1>jQuery nap plugin</h1>
|
|
<ul>
|
|
<li><a href="nap.zip" target="_blank">Download</a></li>
|
|
<li><a href="#introductie">Introduction</a></li>
|
|
<li><a href="#voorbeelden">Examples</a></li>
|
|
<li><a href="#installeren">Installation</a></li>
|
|
<li><a href="#configuratie">Configuration</a></li>
|
|
<li><a href="#licentie">License</a></li>
|
|
</ul>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 id="introductie">Introduction</h2>
|
|
<p>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".</p>
|
|
<p>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.</p>
|
|
<p>To minimize the computers CPU-use, running animations can be paused to be resumed as soon as the user becomes active again.<br />
|
|
The plugin could also be used to automatically log the user out if he has been idle for some time.</p>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 id="voorbeelden">Examples</h2>
|
|
<p>Below the nap-plugin is applied 3 times: on the carouFredSel-plugin, the Cycle-plugin and with self defined functions.<br />
|
|
Let go of your mouse and keyboard and wait for 5 seconds.</p>
|
|
<br />
|
|
|
|
|
|
<h4 id="_vb_caroufredsel">carouFredSel-plugin</h4>
|
|
<div class="carouselholder border">
|
|
<ul id="caroufredsel_foo">
|
|
<li>a</li>
|
|
<li>b</li>
|
|
<li>c</li>
|
|
<li>d</li>
|
|
<li>e</li>
|
|
<li>f</li>
|
|
<li>g</li>
|
|
<li>h</li>
|
|
<li>i</li>
|
|
<li>j</li>
|
|
<li>k</li>
|
|
<li>l</li>
|
|
</ul>
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
<pre>
|
|
$('#caroufredsel_foo')
|
|
.carouFredSel()
|
|
.nap('pause', ['next', 'play']);
|
|
</pre>
|
|
<br />
|
|
<br />
|
|
|
|
|
|
<h4>Cycle-plugin</h4>
|
|
<div class="border" style="width: 200px; height: 150px;">
|
|
<div id="cycle_foo">
|
|
<img src="img/bigboned.jpg" alt="bigboned" width="200" height="150" border="0" />
|
|
<img src="img/jblletje.jpg" alt="jblletje" width="200" height="150" border="0" />
|
|
<img src="img/luierkonteritus.jpg" alt="luierkonteritus" width="200" height="150" border="0" />
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
|
|
<pre>
|
|
$('#cycle_foo').cycle().nap(
|
|
function() {
|
|
$('#cycle_foo').cycle('pause');
|
|
},
|
|
function() {
|
|
$('#cycle_foo').cycle('next').cycle('resume');
|
|
}
|
|
);
|
|
</pre>
|
|
<br />
|
|
<br />
|
|
|
|
|
|
<h4>Self defined functions</h4>
|
|
<div class="border" id="custom_foo" style="width: 350px;">
|
|
<p>Here's some custom napping.<br />
|
|
Let go of your mouse and keyboard and wait...</p>
|
|
</div>
|
|
<pre>
|
|
$(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.');
|
|
}
|
|
);
|
|
</pre>
|
|
<br />
|
|
<br />
|
|
<p>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:</p>
|
|
<pre>
|
|
$.fn.nap.standbyTime = 5;
|
|
</pre>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 id="installeren">Installation</h2>
|
|
<p>Include the jQuery library and the nap plugin inside the <head> tag of the page.</p>
|
|
<pre>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
|
|
<script language="javascript" type="text/javascript" src="js/jquery.nap.js"></script>
|
|
</pre>
|
|
<br />
|
|
<p>Add the following JavaScript inside the <head> tag of the page:</p>
|
|
<pre>
|
|
<script language="javascript" type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('#foo').nap(fallAsleep, wakeUp, standbyTime);
|
|
});
|
|
</script>
|
|
</pre>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 id="configuratie">Configuration</h2>
|
|
<p>The parameters to configure (all are optional):</p>
|
|
|
|
|
|
<br />
|
|
<p><big><strong>fallAsleep</strong></big> <em>String</em>, <em>Object</em> or <em>Function</em><br />
|
|
The functie to be executed when the user "falls asleep", can be:<br />
|
|
- A <em>String</em> of the function beloning to the jQuery-object, for example: "fadeOut" or "slideUp".<br />
|
|
- An <em>Object</em> containing multiple <em>Strings</em> as described above.<br />
|
|
- An actual <em>Function</em>, for example: function() { $("#selector").fadeOut(); }</p>
|
|
|
|
<p><big><strong>WakeUp</strong></big> <em>String</em>, <em>Object</em> or <em>Function</em><br />
|
|
The functie to be executed when the user "wakes up", See the description of the <em>fallAsleep</em>-parameter.</p>
|
|
|
|
<p><big><strong>standbyTime</strong></big> <em>Number</em><br />
|
|
The amount of seconds the user is idle before the fallAsleep-functions will be executed.<br />
|
|
This is a global time, all functions executed by the nap-plugin are bound to the same standbyTime.<br />
|
|
By default, the standbyTime is set to 1 minute, for this demo it is reduced to 5 seconds.</p>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
|
|
<h2 id="licentie">License</h2>
|
|
<p>The jQuery.nap plugin is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" target="blank">MIT</a> license.</p>
|
|
</body>
|
|
</html> |