This commit is contained in:
azammitdcarf committed 2011-01-18 23:58:15 +00:00
1 parent 47410627e9
commit 1be24e7cc0
8 files changed
+469

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

@@ -0,0 +1,359 @@
/*
* jQuery carouFredSel 1.2.0
* www.frebsite.nl
* Copyright (c) 2010 Fred Heusschen
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.carouFredSel = function(options) {
return this.each(function() {
var opts = $.extend(true, {}, $.fn.carouFredSel.defaults, options),
$ul = $(this),
$items = $("li", $ul),
totalItems = $items.length,
nextItem = opts.visibleItems,
prevItem = totalItems-1,
itemWidth = $items.outerWidth(),
itemHeight = $items.outerHeight(),
autoInterval = null,
direction = (opts.direction == "up" || opts.direction == "right") ? "next" : "prev";
if (opts.visibleItems >= totalItems) {
try { console.log('carouFredSel: Not enough items: terminating'); } catch(err) {}
return;
}
if (opts.scroll.items == 0) opts.scroll.items = opts.visibleItems;
opts.auto = $.extend({}, opts.scroll, opts.auto);
opts.buttons = $.extend({}, opts.scroll, opts.buttons);
opts.next = $.extend({}, opts.buttons, opts.next);
opts.prev = $.extend({}, opts.buttons, opts.prev);
if (!opts.auto.pauseDuration) opts.auto.pauseDuration = 2500;
opts.buttons = null;
opts.scroll = null;
if (opts.direction == "right" ||
opts.direction == "left"
) {
var cs1 = {
width : itemWidth * opts.visibleItems * 2
}
var cs2 = {
width : itemWidth * opts.visibleItems,
height : $ul.outerHeight() || itemHeight
}
} else {
var cs1 = {
height : itemHeight * opts.visibleItems * 2
}
var cs2 = {
height : itemHeight * opts.visibleItems,
width : $ul.outerWidth() || itemWidth
}
}
$ul.css(cs1).css({
position : "absolute"
}).wrap('<div class="caroufredsel_wrapper" />').parent().css(cs2).css({
position : "relative",
overflow : "hidden"
});
$items.filter(":gt("+(opts.visibleItems-1)+")").remove();
$ul
.bind("pause", function() {
if (autoInterval != null) {
clearTimeout(autoInterval);
}
})
.bind("play", function(e, d) {
if (opts.autoPlay) {
if (d == null ||
d == '' ||
typeof(d) || 'undefined'
) {
d = direction;
}
autoInterval = setTimeout(function() {
$ul.trigger(d, opts.auto);
}, opts.auto.pauseDuration);
}
})
.bind("next", function(e, sliderObj) {
if ($ul.is(":animated")) return;
if (typeof(sliderObj) == 'undefined') sliderObj = opts.next;
if (typeof(sliderObj) == 'object') numItems = sliderObj.items;
else if (typeof(sliderObj) == 'number') {
numItems = sliderObj;
sliderObj = opts.next;
}
if (!numItems || typeof(numItems) != 'number') return;
var oldItems = $("li", $ul);
for (var a = 0; a < numItems; a++) {
$ul.append($($items[nextItem]).clone(true));
if (++nextItem >= totalItems) nextItem = 0;
if (++prevItem >= totalItems) prevItem = 0;
}
var newItems = $("li:gt("+(numItems-1)+")", $ul);
if (opts.direction == "right" ||
opts.direction == "left"
) {
var pos = 'left',
siz = itemWidth;
} else {
var pos = 'top',
siz = itemHeight;
}
var ani = {},
cal = {};
ani[pos] = $ul.offset()[pos]-oldItems.offset()[pos] || -(siz * numItems);
cal[pos] = 0;
if (sliderObj.onBefore) {
sliderObj.onBefore(oldItems, newItems, "next");
}
$ul
.data("numItems", numItems)
.data("sliderObj", sliderObj)
.data("oldItems", oldItems)
.data("newItems", newItems)
.animate(ani, {
duration: sliderObj.speed,
easing : sliderObj.effect,
complete: function() {
if ($ul.data("sliderObj").onAfter) {
$ul.data("sliderObj").onAfter($ul.data("oldItems"), $ul.data("newItems"), "next");
}
$ul.css(cal).find("li:lt("+$ul.data("numItems")+")").remove();
}
});
// auto-play
$ul.trigger("pause").trigger("play", "next");
})
.bind("prev", function(e, sliderObj) {
if ($ul.is(":animated")) return;
if (typeof(sliderObj) == 'undefined') sliderObj = opts.prev;
if (typeof(sliderObj) == 'object') numItems = sliderObj.items;
else if (typeof(sliderObj) == 'number') {
numItems = sliderObj;
sliderObj = opts.prev;
}
if (!numItems || typeof(numItems) != 'number') return;
var oldItems = $("li", $ul);
for (var a = 0; a < numItems; a++) {
$ul.prepend($($items[prevItem]).clone(true));
if (--prevItem < 0) prevItem = totalItems-1;
if (--nextItem < 0) nextItem = totalItems-1;
}
var newItems = $("li:lt("+opts.visibleItems+")", $ul);
if (opts.direction == "right" ||
opts.direction == "left"
) {
var pos = 'left',
siz = itemWidth;
} else {
var pos = 'top',
siz = itemHeight;
}
var css = {},
ani = {};
css[pos] = $ul.offset()[pos]-oldItems.offset()[pos] || -(siz * numItems);
ani[pos] = 0;
if (sliderObj.onBefore) {
sliderObj.onBefore(oldItems, newItems, "prev");
}
$ul
.data("sliderObj", sliderObj)
.data("oldItems", oldItems)
.data("newItems", newItems)
.css(css)
.animate(ani, {
duration: sliderObj.speed,
easing : sliderObj.effect,
complete: function() {
if ($ul.data("sliderObj").onAfter) {
$ul.data("sliderObj").onAfter($ul.data("oldItems"), $ul.data("newItems"), "next");
}
$ul.find("li:gt("+(opts.visibleItems-1)+")").remove();
}
});
// auto-play
$ul.trigger("pause").trigger("play", "prev");
})
.bind("slideTo", function(e, n) {
if (typeof(n) == 'string') {
if (n.charAt(1) == '=') {
a = n.substr(2).split(' ').join('');
if (n.charAt(0) == '+') $ul.trigger("next", a);
else if (n.charAt(0) == '-') $ul.trigger("prev", a);
else try { console.log('carouFredSel: Not a valid string.'); } catch(err) {}
return;
} else n = parseInt(n);
}
if (typeof(n) == 'object') {
a = -1;
$items.each(function(m) {
if (n == this || n == $(this)) a = m;
});
if (a == -1) {
try { console.log('carouFredSel: Not a valid object.'); } catch(err) {}
return;
}
n = a;
}
if (typeof(n) != 'number') {
try { console.log('carouFredSel: Not a valid number.'); } catch(err) {}
return;
}
var c = prevItem,
t = totalItems;
if (++c >= t) c = 0;
if (n < 0) n += t;
var a = n - c;
if (a == 0) return;
if (a < t/2 && a > 0) $ul.trigger("next", a); // vooruit binnen reeks
else if (a < -(t/2)) $ul.trigger("next", t+a); // vooruit van eind naar begin
else if (a > -(t/2) && a < 0) $ul.trigger("prev", -a); // achteruit binnen reeks
else $ul.trigger("prev", t-Math.abs(a)); // achteruit van begin naar eind
});
if (opts.auto.pauseOnHover && opts.autoPlay) {
$ul.hover(
function() { $ul.trigger("pause"); },
function() { $ul.trigger("play", direction); }
);
}
// via prev- en/of next-buttons
if (opts.next.button != null) {
opts.next.button.click(function() {
$ul.trigger("next"/* , opts.next */);
return false;
});
if (opts.next.pauseOnHover && opts.autoPlay) {
opts.next.button.hover(
function() { $ul.trigger("pause"); },
function() { $ul.trigger("play", direction); }
);
}
}
if (opts.prev.button != null) {
opts.prev.button.click(function() {
$ul.trigger("prev"/* , opts.prev */);
return false;
});
if (opts.prev.pauseOnHover && opts.autoPlay) {
opts.prev.button.hover(
function() { $ul.trigger("pause"); },
function() { $ul.trigger("play", direction); }
);
}
}
// via auto-play
$ul.trigger("play", direction);
});
}
$.fn.carouFredSel.defaults = {
visibleItems : 4,
autoPlay : true,
direction : "right",
scroll : {
items : 0,
effect : 'swing',
speed : 500,
pauseOnHover : false,
onBefore : null,
onAfter : null
}
}
/*
// Config for execution, do not uncomment
// auto takes over from 'scroll'
auto : {
pauseDuration : 2500,
items : 0,
effect : 'swing',
speed : 500,
pauseOnHover : false,
onBefore : null,
onAfter : null
},
// buttons takes over from 'scroll'
buttons : {
items : 0,
effect : 'swing',
speed : 500,
pauseOnHover : false,
onBefore : null,
onAfter : null
},
// prev takes over from 'buttons'
prev : {
button : null,
items : 0,
effect : 'swing',
speed : 500,
pauseOnHover : false,
onBefore : null,
onAfter : null
},
// next takes over from 'buttons'
next : {
button : null,
items : 0,
effect : 'swing',
speed : 500,
pauseOnHover : false,
onBefore : null,
onAfter : null
}
*/
})(jQuery);
+11
View File
@@ -0,0 +1,11 @@
/*
* jQuery Cycle Plugin (core)
* Examples and documentation at: http://jquery.malsup.com/cycle/
* Copyright (c) 2007-2010 M. Alsup
* Version: 2.86 (05-APR-2010)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.6 or later
*/
(function($){var ver="2.86";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function debug(s){if($.fn.cycle.debug){log(s);}}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length===0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){var opts=handleArguments(this,options,arg2);if(opts===false){return;}opts.updateActivePagerLink=opts.updateActivePagerLink||$.fn.cycle.updateActivePagerLink;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(opts2.currSlide,opts2.nextSlide,opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,!opts2.rev);},startTime);}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"destroy":case"stop":var opts=$(cont).data("cycle.opts");if(!opts){return false;}cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");if(options=="destroy"){destroy(opts);}return false;case"toggle":cont.cyclePause=(cont.cyclePause===1)?0:1;checkInstantResume(cont.cyclePause,arg2,cont);return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;checkInstantResume(false,arg2,cont);return false;case"prev":case"next":var opts=$(cont).data("cycle.opts");if(!opts){log('options not found, "prev/next" ignored');return false;}$.fn.cycle[options](opts);return false;default:options={fx:options};}return options;}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;function checkInstantResume(isPaused,arg2,cont){if(!isPaused&&arg2===true){var options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}}}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function destroy(opts){if(opts.next){$(opts.next).unbind(opts.prevNextEvent);}if(opts.prev){$(opts.prev).unbind(opts.prevNextEvent);}if(opts.pager||opts.pagerAnchorBuilder){$.each(opts.pagerAnchors||[],function(){this.unbind().remove();});}opts.pagerAnchors=null;if(opts.destroy){opts.destroy(opts);}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=1;opts.startingSlide=opts.randomMap[1];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).Line truncated
+97
View File
@@ -0,0 +1,97 @@
/*
* jQuery nap 1.0.0
* www.frebsite.nl
* Copyright (c) 2010 Fred Heusschen
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.nap = function(fallAsleep, wakeUp, standbyTime) {
if (typeof(standbyTime) == 'number' && standbyTime > 0) {
$.fn.nap.standbyTime = standbyTime;
if ($.fn.nap.readySetGo) {
$.fn.nap.pressSnooze();
}
}
if (!$.fn.nap.readySetGo) {
$.fn.nap.readySetGo = true;
$(window).mousemove(function() {
$.fn.nap.interaction();
});
$(window).keyup(function() {
$.fn.nap.interaction();
});
$(window).mousedown(function() {
$.fn.nap.interaction();
});
$(window).scroll(function() {
$.fn.nap.interaction();
});
$.fn.nap.pressSnooze();
}
return this.each(function() {
$.fn.nap.fallAsleepFunctions.push({
func: fallAsleep,
napr: $(this)
});
$.fn.nap.wakeUpFunctions.push({
func: wakeUp,
napr: $(this)
});
});
}
$.fn.nap.standbyTime = 60;
$.fn.nap.isAwake = true;
$.fn.nap.readySetGo = false;
$.fn.nap.fallAsleepFunctions = new Array();
$.fn.nap.wakeUpFunctions = new Array();
$.fn.nap.fallAsleep = function() {
$.fn.nap.isAwake = false;
clearInterval($.fn.nap.alarmClock);
$.fn.nap.callFunctions($.fn.nap.fallAsleepFunctions);
};
$.fn.nap.wakeUp = function() {
$.fn.nap.isAwake = true;
$.fn.nap.callFunctions($.fn.nap.wakeUpFunctions);
};
$.fn.nap.pressSnooze = function() {
clearInterval($.fn.nap.alarmClock);
$.fn.nap.alarmClock = setInterval(function() {
$.fn.nap.fallAsleep();
}, $.fn.nap.standbyTime * 1000);
}
$.fn.nap.interaction = function() {
if (!$.fn.nap.isAwake) {
$.fn.nap.wakeUp();
}
$.fn.nap.pressSnooze();
}
$.fn.nap.callFunctions = function(f) {
for (var i in f) {
if (typeof(f[i].func) == 'function') {
f[i].func();
} else if (typeof(f[i].func) == 'string' && f[i].func.length > 0) {
f[i].napr.trigger(f[i].func);
} else if (typeof(f[i].func) == 'object') {
for (var z in f[i].func) {
f[i].napr.trigger(f[i].func[z]);
}
}
}
}
})(jQuery);
+1
View File
@@ -0,0 +1 @@
<!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 &quot;taking a nap&quot; and executes the defined functions when the user &quot;falls asleep&quot; and &quot;wakes up&quot;.</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!&lt;br /&gt;CarouFredSel and Cycle paused.'); }, function() {Line truncated
+1
View File
@@ -0,0 +1 @@
<!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('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.'); } ); }); </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>This page in <a href="nap_en.html">English</a></small> <h1>jQuery nap plugin</h1> <ul> <li><a href="nap.zip" target="_blank">Download</a></li> <li><a href="#introductie">Introductie</a></li> <li><a href="#voorbeelden">Voorbeelden</a></li> <li><a href="#installeren">Installeren</a></li> <li><a href="#configuratie">Configuratie</a></li> <li><a href="#licentie">Licentie</a></li> </ul> <br /> <br /> <br /> <h2 id="introductie">Introductie</h2> <p>jQuery.nap is een plugin die het merkt wanneer de bezoeker &quot;een dutje doet&quot; en voert de aangegeven functies uit zodra de bezoeker &quot;in slaap valt&quot; en weer &quot;wakker wordt&quot;.</p> <p>Het zogenoemde dutje (een &quot;nap&quot; 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.</p> <p>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.<br /> Een andere toepassing zou kunnen zijn dat de bezoeker automatisch wordt uitgelogd als na een tijdje niet actief te zijn geweest.</p> <br /> <br /> <br /> <h2 id="voorbeelden">Voorbeelden</h2> <p>Hieronder wordt de nap-plugin 3 keer toegepast: op de carouFredSel-plugin, de Cycle-plugin en met zelf gedefinieerde functies.<br /> Laat de muis en het toetsenbord los en wacht 5 seconden.</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>Zelf gedefinieerde functies</h4> <div class="border" id="custom_foo" style="width: 350px;"> <p>Hier is wat op maat gemaakte napping.<br /> Laat de muis en het toetsenbLine truncated