jQuery.SerialScroll

jQuery.SerialScroll by Ariel Flesler

- -

-
Section 1
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.
-
Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.
-
-
Section 2
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.
-
Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.
-
-
Section 3
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.
-
Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.
-
-
Section 4
-
Nullam et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor eu, turpis.
-
In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis. Donec vel turpis.
-
-
Section 5
-
Nullam et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor eu, turpis.
-
In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus dapibus hendrerit massa.
-

- This plugin can be used for navigation purposes. You decide how many to show at a time with CSS.
- The items don't need to be aligned, you can spread them as much as you want, it will always find them :)
- Check jQuery.ScrollTo's demo if you want to create the perfect animation. You can use its settings too! -

- Previous - Next -
-

- You can also build slideshows with it. In this case, I centered the photos and made them clickable.
- I set this one to cycle, try going over the last photo. I'm using a special easing equation.
- You are allowed to interrupt the animation by clicking again. You can't do that in the first one. -

- - - -

News 1

Nullam a leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas mollis vestibulum purus, rutrum sed.

News 2

Phasellus nunc ipsum, faucibus non, iaculis ac, sagittis malesuada, augue. Aliquam sollicitudin. Cras iaculis lorem sit amet.

News 3

Morbi condimentum. Sed id nunc eu arcu aliquet bibendum. Maecenas vestibulum eros fringilla tortor. Nunc purus.

News 4

Sed condimentum. Duis orci. Ut odio leo, dapibus pretium, rhoncus a, sodales eu, nibh. Vivamus consectetuer vestibulum.

News 5

Pellentesque varius ligula et enim. Nulla ut purus vel magna ullamcorper vestibulum. Aliquam at enim at ligula bibendum.

News 6

Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.

News 7

Etiam aliquet. Nulla consectetuer, nibh ut gravida consectetuer, nisl enim vestibulum nibh. Suspendisse potenti.

News 8

Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.

- It can be used for news tickers as well. The plugin is not restricted to clicks or buttons.
- Here the option 'lazy' is used and it works, click the buttons on the right if you don't trust me :)
- You can also specify an interval for auto scrolling. To stop the animation, use $().stop() on the container. -

- This demo shows 3 different uses of this plugin. It can certainly be used for others purposes as well.
- Note that it can be used with any html. This is not a widget and the examples are just improvised.
- Use "View source" to see the different calls and markup. All the settings are commented. -

- This plugin won't modify your html at all, won't even touch a single style.
- It gives you full control over the markup and the look, that's your part of the job :)
- You can control the animation from outside with the 3 exposed events (prev, next, goto).
- Guess what ? If you manage to show them scrollbars, users with no javascript can still navigate your content! -

gmailcom | https://github.com/flesler + * Licensed under MIT. + * @projectDescription Animated scrolling of series with jQuery * @author Ariel Flesler - * @version 1.2.3b - * - * @id jQuery.serialScroll - * @id jQuery.fn.serialScroll - * @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required. - * @return {jQuery} Returns the same jQuery object, for chaining. - * - * @link {http://flesler.blogspot.com/2008/02/jqueryserialscroll.html Homepage} - * - * Notes: - * - The plugin requires jQuery.ScrollTo. - * - The hash of settings, is passed to jQuery.ScrollTo, so its settings can be used as well. + * @version 1.3.2 + * https://github.com/flesler/jquery.serialScroll */ -;(function( $ ){ +;(function($) { var NAMESPACE = '.serialScroll'; - var $serialScroll = $.serialScroll = function( settings ){ - return $(window).serialScroll( settings ); + var $serialScroll = $.serialScroll = function(settings) { + return $(window).serialScroll(settings); }; // Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option. @@ -34,9 +22,9 @@ axis:'x', // which of top and left should be scrolled event:'click', // on which event to react. start:0, // first element (zero-based index) - step:1, // how many elements to scroll on each action + step: 1, // how many elements to scroll on each action lock:true,// ignore events if already animating - cycle:true, // cycle endlessly ( constant velocity ) + cycle:true, // cycle endlessly (constant velocity) constant:true // use contant speed ? /* navigation:null,// if specified, it's a selector to a collection of items to navigate the container @@ -49,195 +37,217 @@ items:null, // selector to the items (relative to the matched elements) prev:null, // selector to the 'prev' button next:null, // selector to the 'next' button - onBefore: function(){}, // function called before scrolling, if it returns false, the event is ignored + onBefore: function() {}, // function called before scrolling, if it returns false, the event is ignored exclude:0 // exclude the last x elements, so we cannot scroll past the end */ }; - $.fn.serialScroll = function( options ){ + // Brought from jQuery since it's now deprecated + function isNumeric(obj) { + var type = typeof obj; + return (type === 'number' || type === 'string') && + !isNaN(obj - parseFloat(obj)); + } - return this.each(function(){ - var - settings = $.extend( {}, $serialScroll.defaults, options ), + $.fn.serialScroll = function(options) { + + return this.each(function() { + var + settings = $.extend({}, $serialScroll.defaults, options), // this one is just to get shorter code when compressed - event = settings.event, + event = settings.event, // ditto - step = settings.step, + step = settings.step, // ditto - lazy = settings.lazy, + lazy = settings.lazy, // if a target is specified, then everything's relative to 'this'. - context = settings.target ? this : document, + context = settings.target ? this : document, // the element to be scrolled (will carry all the events) $pane = $(settings.target || this, context), // will be reused, save it into a variable - pane = $pane[0], + pane = $pane[0], // will hold a lazy list of elements - items = settings.items, + items = settings.items, // index of the currently selected item - active = settings.start, + active = settings.start, // boolean, do automatic scrolling or not - auto = settings.interval, + auto = settings.interval, // save it now to make the code shorter - nav = settings.navigation, + nav = settings.navigation, // holds the interval id - timer; + timer; + + // Incompatible with $().animate() + delete settings.step; + delete settings.start; // If no match, just ignore - if(!pane) - return; + if (!pane) return; // if not lazy, save the items now - if( !lazy ) + if (!lazy) { items = getItems(); + } // generate an initial call - if( settings.force || auto ) - jump( {}, active ); + if (settings.force || auto) { + jump({}, active); + } // Button binding, optional - $(settings.prev||[], context).bind( event, -step, move ); - $(settings.next||[], context).bind( event, step, move ); + $(settings.prev||[], context).on(event, -step, move); + $(settings.next||[], context).on(event, step, move); // Custom events bound to the container - if( !pane.ssbound ) + if (!pane._bound_) { $pane // You can trigger with just 'prev' - .bind('prev'+NAMESPACE, -step, move ) + .on('prev'+NAMESPACE, -step, move) // f.e: $(container).trigger('next'); - .bind('next'+NAMESPACE, step, move ) - // f.e: $(container).trigger('goto', 4 ); - .bind('goto'+NAMESPACE, jump ); + .on('next'+NAMESPACE, step, move) + // f.e: $(container).trigger('goto', 4); + .on('goto'+NAMESPACE, jump); + } - if( auto ) + if (auto) { $pane - .bind('start'+NAMESPACE, function(e){ - if( !auto ){ + .on('start'+NAMESPACE, function(e) { + if (!auto) { clear(); auto = true; next(); } }) - .bind('stop'+NAMESPACE, function(){ + .on('stop'+NAMESPACE, function() { clear(); auto = false; }); + } // Let serialScroll know that the index changed externally - $pane.bind('notify'+NAMESPACE, function(e, elem){ + $pane.on('notify'+NAMESPACE, function(e, elem) { var i = index(elem); - if( i > -1 ) + if (i > -1) { active = i; + } }); // Avoid many bindings - pane.ssbound = true; + pane._bound_ = true; // Can't use jump if using lazy items and a non-bubbling event - if( settings.jump ) - (lazy ? $pane : getItems()).bind( event, function( e ){ - jump( e, index(e.target) ); + if (settings.jump) { + (lazy ? $pane : getItems()).on(event, function(e) { + jump(e, index(e.target)); }); + } - if( nav ) - nav = $(nav, context).bind(event, function( e ){ + if (nav) { + nav = $(nav, context).on(event, function(e) { e.data = Math.round(getItems().length / nav.length) * nav.index(this); - jump( e, this ); + jump(e, this); }); + } - function move( e ){ + function move(e) { e.data += active; - jump( e, this ); - }; + jump(e, this); + } - function jump( e, pos ){ - if( isNaN(pos) ) + function jump(e, pos) { + if (!isNumeric(pos)) { pos = e.data; + } - var n, + var n, // Is a real event triggering ? - real = e.type, + real = e.type, // Handle a possible exclude $items = settings.exclude ? getItems().slice(0,-settings.exclude) : getItems(), limit = $items.length - 1, elem = $items[pos], duration = settings.duration; - if( real ) - e.preventDefault(); + if (real) e.preventDefault(); - if( auto ){ + if (auto) { // clear any possible automatic scrolling. clear(); - timer = setTimeout( next, settings.interval ); + timer = setTimeout(next, settings.interval); } // exceeded the limits - if( !elem ){ + if (!elem) { n = pos < 0 ? 0 : limit; // we exceeded for the first time - if( active !== n ) + if (active !== n) { pos = n; // this is a bad case - else if( !settings.cycle ) + } else if (!settings.cycle) { return; // invert, go to the other side - else + } else { pos = limit - n; + } elem = $items[pos]; } // no animations while busy - if( !elem || settings.lock && $pane._scrollable().is(':animated') || + if (!elem || settings.lock && $pane.is(':animated') || real && settings.onBefore && // Allow implementors to cancel scrolling - settings.onBefore(e, elem, $pane, getItems(), pos) === false ) return; + settings.onBefore(e, elem, $pane, getItems(), pos) === false) return; - if( settings.stop ) + if (settings.stop) { // remove all running animations - $pane._scrollable().stop(true); + $pane.stop(true); + } - if( settings.constant ) + if (settings.constant) { // keep constant velocity duration = Math.abs(duration/step * (active - pos)); + } - $pane.scrollTo( elem, duration, settings ); + $pane.scrollTo(elem, duration, settings); // in case serialScroll was called on this elemement more than once. trigger('notify', pos); - }; + } - function next(){ + function next() { trigger('next'); - }; + } - function clear(){ + function clear() { clearTimeout(timer); - }; + } - function getItems(){ - return $( items, pane ); - }; + function getItems() { + return $(items, pane); + } // I'll use the namespace to avoid conflicts - function trigger(event){ + function trigger(event) { $pane.trigger( event+NAMESPACE, [].slice.call(arguments,1) ); } - function index( elem ){ + function index(elem) { // Already a number - if( !isNaN(elem) ) + if (isNumeric(elem)) { return elem; + } var $items = getItems(), i; // See if it matches or one of its ancestors - while(( i = $items.index(elem)) === -1 && elem !== pane ) + while((i = $items.index(elem)) === -1 && elem !== pane) { elem = elem.parentNode; + } return i; - }; + } }); }; -})( jQuery ); \ No newline at end of file +})(jQuery); \ No newline at end of file diff --git a/jquery.serialScroll.min.js b/jquery.serialScroll.min.js index b61f657..f085c4c 100644 --- a/jquery.serialScroll.min.js +++ b/jquery.serialScroll.min.js @@ -1,7 +1,7 @@ /** - * Copyright (c) 2007-2010 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com - * Dual licensed under MIT and GPL. + * Copyright (c) 2007 Ariel Flesler - aflesler

gmailcom | https://github.com/flesler + * Licensed under MIT. * @author Ariel Flesler - * @version 1.2.3b + * @version 1.3.2 */ -;(function($){var f='.serialScroll';var g=$.serialScroll=function(a){return $(window).serialScroll(a)};g.defaults={duration:1000,axis:'x',event:'click',start:0,step:1,lock:true,cycle:true,constant:true};$.fn.serialScroll=function(d){return this.each(function(){var c=$.extend({},g.defaults,d),event=c.event,step=c.step,lazy=c.lazy,context=c.target?this:document,$pane=$(c.target||this,context),pane=$pane[0],items=c.items,active=c.start,auto=c.interval,nav=c.navigation,timer;if(!pane)return;if(!lazy)items=getItems();if(c.force||auto)jump({},active);$(c.prev||[],context).bind(event,-step,move);$(c.next||[],context).bind(event,step,move);if(!pane.ssbound)$pane.bind('prev'+f,-step,move).bind('next'+f,step,move).bind('goto'+f,jump);if(auto)$pane.bind('start'+f,function(e){if(!auto){clear();auto=true;next()}}).bind('stop'+f,function(){clear();auto=false});$pane.bind('notify'+f,function(e,a){var i=index(a);if(i>-1)active=i});pane.ssbound=true;if(c.jump)(lazy?$pane:getItems()).bind(event,function(e){jump(e,index(e.target))});if(nav)nav=$(nav,context).bind(event,function(e){e.data=Math.round(getItems().length/nav.length)*nav.index(this);jump(e,this)});function move(e){e.data+=active;jump(e,this)};function jump(e,a){if(isNaN(a))a=e.data;var n,real=e.type,$items=c.exclude?getItems().slice(0,-c.exclude):getItems(),limit=$items.length-1,elem=$items[a],duration=c.duration;if(real)e.preventDefault();if(auto){clear();timer=setTimeout(next,c.interval)}if(!elem){n=a<0?0:limit;if(active!==n)a=n;else if(!c.cycle)return;else a=limit-n;elem=$items[a]}if(!elem||c.lock&&$pane._scrollable().is(':animated')||real&&c.onBefore&&c.onBefore(e,elem,$pane,getItems(),a)===false)return;if(c.stop)$pane._scrollable().stop(true);if(c.constant)duration=Math.abs(duration/step*(active-a));$pane.scrollTo(elem,duration,c);trigger('notify',a)};function next(){trigger('next')};function clear(){clearTimeout(timer)};function getItems(){return $(items,pane)};function trigger(a){$pane.trigger(a+f,[].slice.call(arguments,1))}function index(a){if(!isNaN(a))return a;var b=getItems(),i;while((i=b.index(a))===-1&&a!==pane)a=a.parentNode;return i}})}})(jQuery); \ No newline at end of file +;(function($){var NAMESPACE='.serialScroll';var $serialScroll=$.serialScroll=function(settings){return $(window).serialScroll(settings)};$serialScroll.defaults={duration:1000,axis:'x',event:'click',start:0,step:1,lock:true,cycle:true,constant:true };function isNumeric(obj){var type=typeof obj;return(type==='number'||type==='string')&&!isNaN(obj-parseFloat(obj))}$.fn.serialScroll=function(options){return this.each(function(){var settings=$.extend({},$serialScroll.defaults,options),event=settings.event,step=settings.step,lazy=settings.lazy,context=settings.target?this:document,$pane=$(settings.target||this,context),pane=$pane[0],items=settings.items,active=settings.start,auto=settings.interval,nav=settings.navigation,timer;delete settings.step;delete settings.start;if(!pane){return}if(!lazy){items=getItems()}if(settings.force||auto){jump({},active)}$(settings.prev||[],context).on(event,-step,move);$(settings.next||[],context).on(event,step,move);if(!pane._bound_){$pane .on('prev'+NAMESPACE,-step,move).on('next'+NAMESPACE,step,move).on('goto'+NAMESPACE,jump)}if(auto){$pane.on('start'+NAMESPACE,function(e){if(!auto){clear();auto=true;next()}}).on('stop'+NAMESPACE,function(){clear();auto=false})}$pane.on('notify'+NAMESPACE,function(e,elem){var i=index(elem);if(i>-1){active=i}});pane._bound_=true;if(settings.jump){(lazy?$pane:getItems()).on(event,function(e){jump(e,index(e.target))})}if(nav){nav=$(nav,context).on(event,function(e){e.data=Math.round(getItems().length/nav.length)*nav.index(this);jump(e,this)})}function move(e){e.data+=active;jump(e,this)}function jump(e,pos){if(!isNumeric(pos)){pos=e.data}var n,real=e.type,$items=settings.exclude?getItems().slice(0,-settings.exclude):getItems(),limit=$items.length-1,elem=$items[pos],duration=settings.duration;if(real){e.preventDefault()}if(auto){clear();timer=setTimeout(next,settings.interval)}if(!elem){n=pos<0?0:limit;if(active!==n){pos=n;}else if(!settings.cycle){return;}else{pos=limit-n}elem=$items[pos]}if(!elem||settings.lock&&$pane.is(':animated')||real&&settings.onBefore&&settings.onBefore(e,elem,$pane,getItems(),pos)===false){return}if(settings.stop){$pane.stop(true)}if(settings.constant){duration=Math.abs(duration/step*(active-pos))}$pane.scrollTo(elem,duration,settings);trigger('notify',pos)}function next(){trigger('next')}function clear(){clearTimeout(timer)}function getItems(){return $(items,pane)}function trigger(event){$pane.trigger(event+NAMESPACE,[].slice.call(arguments,1))}function index(elem){if(isNumeric(elem)){return elem}var $items=getItems(),i;while((i=$items.index(elem))===-1&&elem!==pane){elem=elem.parentNode}return i}})}})(jQuery); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..f6704f4 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "jquery.serialscroll", + "version": "1.3.2", + "description": "Animated scrolling of series with jQuery", + "main": "jquery.serialScroll.js", + "author": { + "name": "Ariel Flesler", + "url": "https://github.com/flesler" + }, + "licenses": "MIT", + "homepage": "https://github.com/flesler/jquery.serialScroll", + "docs": "https://github.com/flesler/2008/02/jqueryserialscroll.html", + "bugs": "https://github.com/flesler/jquery.serialScroll/issues", + "download": "https://github.com/flesler/jquery.serialScroll/releases", + "repository": "git://github.com/flesler/jquery.serialScroll", + "demo": "http://demos.flesler.com/jquery/serialScroll", + "keywords": ["slideshow", "sequence", "animated", "animation", "scrolling", "scroll", "prev", "next","jquery-plugin","ecosystem:jquery"], + "ignore": ["**/.*","demo","tests","CHANGELOG","README.md","bower.json"], + "dependencies": { + "jquery": ">=1.8", + "jquery.scrollto": ">=2.1.0" + } +} \ No newline at end of file

jQuery.SerialScroll by Ariel Flesler

Section 1

Section 2

Section 3

Section 4

Section 5