Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Moved from Google code's svn to github

  • Loading branch information...
commit 2b08d0c01058b7c38d5ee1815acf0e0772b9352d 1 parent 26423dd
@flesler authored
View
2  Makefile
@@ -0,0 +1,2 @@
+VER=1.2.2
+include ../common-scrollTo.mak
View
66 changes.txt
@@ -0,0 +1,66 @@
+[Enhancement]
+- Removed a redundant code
+- If there's no matched container ('target') serialScroll just ignores the call.
+- The setting 'interval' implicitely assumes 'force' as true.
+[Fix]
+- The setting 'stop' wasn't working on window.
+
+1.2.2
+[Enhancement]
+- Removed the check that avoids re-scrolling to the same index, this might be desirable sometimes.
+- The settings object is exposed in the onBefore as the 'this'.
+
+1.2.1
+[Feature]
+- Added option 'exclude' to indicate the plugin to exclude some elements from the scrolling items.
+[Enhancement]
+- If less items than 'step' are missing, the plugin will firstly show those, and then cycle or not.
+- When cycling, the option 'step' is ignored, and the step is 1. So after the last, comes the 1st and the other way around.
+
+1.2.0
+[Feature]
+- You can notify SerialScroll that the active item changed, by using the event notify.serialScroll.
+- Thanks to the event notify, this plugin can be now closely integrated with LocalScroll(1.2.5 or higher).
+- Also, thanks to notify, you can call SerialScroll on the same element more than once, and they interact nicely.
+- You can specify the option 'target', and then the matched elements become the context of all the selectors,
+ and target matches the element to be scrolled. This allows you to call SerialScroll on many element at the same time.
+- You can combine the options 'jump' and 'lazy' (not adviced if no target is specified).
+- LocalScroll and SerialScroll are so compatible, that they can use the same hash of settings.
+- Added option 'constant'(true by default), specifies whether the speed must be constant or not.
+- Added option 'navigation' to add a group of element to jump to the items.
+[Fix]
+- If you call the plugin on the same (scrollable)element more than once, the custom events get bound only in the first call.
+[Change]
+- The event 'start' no longer receives the interval, you must set it at start, stop/start only pause/restart.
+
+1.1.2
+[Fix]
+- The next handler was receiving event type 'next' and as target the container.
+
+1.1.1
+[Feature]
+- Added events start and stop, to manage the autoscrolling.
+[Fix]
+- The step can be negative, to go in the other way, before it would mess up the duration.
+
+1.1.0
+[Change]
+- Relicensed from GPL to GPL+MIT.
+[Optimization]
+- The animation is skipped if a bad position was received or it's the same as the actual. Saving some overhead.
+[Feature]
+- The plugin binds 3 events to the container to allow external manipulation.
+ * prev.serialScroll, next.serialScroll, goto.serialScroll.
+ You use them like this: $(your_container).trigger('next'), $(your_container).trigger('goto', [5]) (0-based index).
+ If for some odd reason, the element already has any of these events bound, trigger with the namespace.
+- Added 2 more arguments to the onBefore callback: actual item collection, index of the actual item in the collection.
+- Added option 'interval', can be a number specifying the amount of milliseconds for autoscrolling.
+
+
+1.0.1
+[Feature]
+- if 'onBefore' returns false, the plugin will ignore the event.
+- Added option 'lazy'.
+
+1.0.0
+- First release.
View
235 demo/css/style.css
@@ -0,0 +1,235 @@
+body{
+ padding: 0 5px;
+ font-family: Verdana, sans-serif;
+ background-color: #DDD;
+}
+ul, li, h4, h3, h2, h1, p{
+ padding:0;
+ margin:0;
+ list-style:none;
+}
+
+.next, .prev{
+ cursor:pointer;
+}
+
+#screen{
+ position:relative;
+ height:425px;
+ width:725px;
+ margin-top:40px;
+}
+ #screen .next, #screen .prev{
+ position:absolute;
+ top:200px;
+ }
+ #screen .prev{
+ left:10px;
+ }
+ #screen .next{
+ right:10px;
+ }
+ #navigation{
+ width:600px;
+ text-align:center;
+ margin-left:62px;
+ }
+ #navigation ul{
+ margin-left:55px !important;
+ margin-left:35px;
+ }
+ #navigation li{
+ float:left;
+ margin:0 20px;
+ padding:10px 20px;
+ background-color:#EEE;
+ }
+ #navigation a{
+ color:#933;
+ font-weight:bolder;
+ text-decoration:none;
+ }
+
+#sections{
+ overflow:hidden;
+ background-color:white;
+ width:600px;
+ height:369px;
+ clear:left;
+ margin-left:62px;
+}
+
+ #sections ul{
+ width:3660px;
+ }
+
+ #sections li{
+ float:left;
+ padding:11px 30px;
+ }
+ #sections li.fallen{
+ margin-top:369px;
+ }
+
+ #sections p{
+ width:550px;
+ margin:16px 0;
+ font-size:85%;
+ line-height:1.4em;
+ }
+
+ #sections h2{
+ color:#993333;
+ margin:20px 0pt;
+ }
+ #sections a{
+ color:#777;
+ font-weight:bolder;
+ text-decoration:none;
+ }
+
+#screen2{
+ position:relative;
+ width:900px;
+ margin:20px;
+}
+ #screen2 #buttons{
+ border:1px solid #777;
+ margin-bottom:5px;
+ width:679px;
+ }
+
+ #screen2 #buttons a{
+ margin:10px 10px;
+ color:#69C;
+ }
+ #screen2 .prev{
+ float:left;
+ }
+ #screen2 .next{
+ float:right;
+ }
+
+#slideshow{
+ overflow:hidden;
+ width:680px;
+ border:1px solid #777;
+}
+
+ #slideshow ul{
+ width:3900px;
+ padding-left:225px;
+ }
+
+ #slideshow li{
+ float:left;
+ margin:0 16px;
+ cursor:pointer;
+ }
+
+#news-ticker{
+ width:800px;
+ height:79px;
+ background-color:white;
+ overflow:hidden;
+ margin:20px;
+}
+ #news-ticker h4{
+ color:#933;
+ display:inline;
+ }
+ #news-ticker div{
+ height:22px;
+ width:782px;
+ border:1px black solid;
+ padding:8px;
+ margin-top:-1px;
+ }
+ #news-ticker div.first{
+ margin-top:0;
+ }
+
+ #news-ticker p{
+ font-size:11px;
+ margin-left: 0 !important;
+ margin-left: 5px;
+ display:inline;
+ }
+
+#links{
+ position:absolute;
+ right:5px;
+ border:1px solid #777;
+ width:210px;
+ top:15px;
+ padding:10px;
+}
+ #links h3{
+ color:#777;
+ }
+ #links ul{
+ padding: 8px 0 3px 20px;
+ }
+ #links li{
+ list-style-type:circle;
+ }
+ #links a{
+ color:#69C;
+ }
+h1{
+ margin:20px 0;
+ color:#5B739C;
+}
+ h1 strong{
+ font-size:13px;
+ color:#777;
+ }
+.clear{
+ clear:both;
+ width:0;
+ height:0;
+}
+
+.message{
+ background:#EEE;
+ border:1px solid #999;
+ color:#333;
+ font-size:12px;
+ padding:1px;
+ height:auto;
+ padding-left:5px;
+ line-height:18px;
+}
+.side{
+ position:absolute;
+ right:5px;
+ width:210px;
+ padding:10px;
+}
+
+#general{
+ top:160px;
+}
+#extra{
+ top:400px;
+}
+
+.separator{
+ width:675px;
+ clear:both;
+ margin-left:20px;
+}
+#ticker-container{
+ position:relative;
+ padding-top:15px;
+}
+ #ticker-container button{
+ position:absolute;
+ right:5px;
+ }
+#add-news{
+ top:0px;
+}
+#shuffle-news{
+ top:25px;
+}
View
BIN  demo/img/next.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/img/prev.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
294 demo/index.html
@@ -0,0 +1,294 @@
+<!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.SerialScroll</title>
+ <meta name="keywords" content="javascript, jquery, plugins, scroll, navigation, slideshow, news, ticker, sections, sequential, prev, next, series, scrollTo, smooth, to, animation, overflow, element, window, effect, ariel, flesler, customizable" />
+ <meta name="description" content="Demo of jQuery.SerialScroll. A jQuery plugin to quickly animate series of items, made by Ariel Flesler." />
+ <meta name="robots" content="index,follow" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.scrollTo.js"></script>
+ <script type="text/javascript" src="../jquery.serialScroll.js"></script>
+ <script type="text/javascript">
+ // Easing equation, borrowed from jQuery easing plugin
+ // http://gsgd.co.uk/sandbox/jquery/easing/
+ jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
+ return -c * ((t=t/d-1)*t*t*t - 1) + b;
+ };
+
+ jQuery(function( $ ){
+ /**
+ * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
+ * @see http://flesler.demos.com/jquery/scrollTo/
+ * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
+ */
+
+ /**
+ * The plugin binds 6 events to the container to allow external manipulation.
+ * prev, next, goto, start, stop and notify
+ * You use them like this: $(your_container).trigger('next'), $(your_container).trigger('goto', [5]) (0-based index).
+ * If for some odd reason, the element already has any of these events bound, trigger it with the namespace.
+ */
+
+ /**
+ * IMPORTANT: this call to the plugin specifies ALL the settings (plus some of jQuery.ScrollTo)
+ * This is done so you can see them. You DON'T need to specify the commented ones.
+ * A 'target' is specified, that means that #screen is the context for target, prev, next and navigation.
+ */
+ $('#screen').serialScroll({
+ target:'#sections',
+ items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
+ prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
+ next:'img.next',// Selector to the 'next' button (absolute too)
+ axis:'xy',// The default is 'y' scroll on both ways
+ navigation:'#navigation li a',
+ duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
+ force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
+
+ //queue:false,// We scroll on both axes, scroll both at the same time.
+ //event:'click',// On which event to react (click is the default, you probably won't need to specify it)
+ //stop:false,// Each click will stop any previous animations of the target. (false by default)
+ //lock:true, // Ignore events if already animating (true by default)
+ //start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )
+ //cycle:true,// Cycle endlessly ( constant velocity, true is the default )
+ //step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
+ //jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
+ //lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
+ //interval:1000, // It's the number of milliseconds to automatically go to the next
+ //constant:true, // constant speed
+
+ onBefore:function( e, elem, $pane, $items, pos ){
+ /**
+ * 'this' is the triggered element
+ * e is the event object
+ * elem is the element we'll be scrolling to
+ * $pane is the element being scrolled
+ * $items is the items collection at this moment
+ * pos is the position of elem in the collection
+ * if it returns false, the event will be ignored
+ */
+ //those arguments with a $ are jqueryfied, elem isn't.
+ e.preventDefault();
+ if( this.blur )
+ this.blur();
+ },
+ onAfter:function( elem ){
+ //'this' is the element being scrolled ($pane) not jqueryfied
+ }
+ });
+
+ /**
+ * No need to have only one element in view, you can use it for slideshows or similar.
+ * In this case, clicking the images, scrolls to them.
+ * No target in this case, so the selectors are absolute.
+ */
+
+ $('#slideshow').serialScroll({
+ items:'li',
+ prev:'#screen2 a.prev',
+ next:'#screen2 a.next',
+ offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
+ start:1, //as we are centering it, start at the 2nd
+ duration:1200,
+ force:true,
+ stop:true,
+ lock:false,
+ cycle:false, //don't pull back once you reach the end
+ easing:'easeOutQuart', //use this easing equation for a funny effect
+ jump: true //click on the images to scroll to them
+ });
+
+ /**
+ * The call below, is just to show that you are not restricted to prev/next buttons
+ * In this case, the plugin will react to a custom event on the container
+ * You can trigger the event from the outside.
+ */
+
+ var $news = $('#news-ticker');//we'll re use it a lot, so better save it to a var.
+ $news.serialScroll({
+ items:'div',
+ duration:2000,
+ force:true,
+ axis:'y',
+ easing:'linear',
+ lazy:true,// NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
+ interval:1, // yeah! I now added auto-scrolling
+ step:2 // scroll 2 news each time
+ });
+
+ /**
+ * The following you don't need to see, is just for the "Add 2 Items" and "Shuffle"" buttons
+ * These exemplify the use of the option 'lazy'.
+ */
+ $('#add-news').click(function(){
+ var
+ $items = $news.find('div'),
+ num = $items.length + 1;
+
+ $items.slice(-2).clone().find('h4').each(function(i){
+ $(this).text( 'News ' + (num + i) );
+ }).end().appendTo($news);
+ });
+ $('#shuffle-news').click(function(){//don't shuffle the first, don't wanna deal with css
+ var shuffled = $news.find('div').get().slice(1).sort(function(){
+ return Math.round(Math.random())-0.5;//just a random number between -0.5 and 0.5
+ });
+ $(shuffled).appendTo($news);//add them all reordered
+ });
+ });
+ </script>
+ <style type="text/css">
+
+ </style>
+</head>
+<body>
+ <h1>jQuery.SerialScroll&nbsp;<strong>by Ariel Flesler</strong></h1>
+ <div id="screen">
+ <img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
+ <div id="navigation">
+ <ul>
+ <li><a href="#">Section 1</a></li>
+ <li><a href="#">Section 3</a></li>
+ <li><a href="#">Section 5</a></li>
+ </ul>
+ </div>
+ <div id="sections">
+ <ul>
+ <li>
+ <h2>Section 1</h2>
+ <p>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.</p>
+ <p>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.</p>
+ </li>
+ <li>
+ <h2>Section 2</h2>
+ <p>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.</p>
+ <p>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.</p>
+ </li>
+ <li class="fallen">
+ <h2>Section 3</h2>
+ <p>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.</p>
+ <p>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.</p>
+ </li>
+ <li>
+ <h2>Section 4</h2>
+ <p>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.</p>
+ <p>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.</p>
+ </li>
+ <li>
+ <h2>Section 5</h2>
+ <p>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.</p>
+ <p>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.</p>
+ </li>
+ </ul>
+ </div>
+ <img class="next" src="img/next.gif" alt="next" width="42" height="53" />
+ </div>
+
+ <p class="separator message">
+ This plugin can be used for navigation purposes. You decide how many to show at a time with CSS.<br />
+ The items don't need to be aligned, you can spread them as much as you want, it will always find them :)<br />
+ Check jQuery.ScrollTo's demo if you want to create the perfect animation. You can use its settings too!
+ </p>
+
+ <div id="screen2">
+ <div id="buttons">
+ <a class="prev" href="#">Previous</a>
+ <a class="next" href="#">Next</a>
+ <br class="clear" />
+ </div>
+ <div id="slideshow">
+ <ul>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9020" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=8430" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7898" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7894" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=3526" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7863" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7743" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7150" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7164" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7149" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=4922" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9307" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9922" /></li>
+ <li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9976" /></li>
+ </ul>
+ </div>
+ </div>
+
+ <p class="separator message">
+ You can also build slideshows with it. In this case, I centered the photos and made them clickable.<br />
+ I set this one to cycle, try going over the last photo. I'm using a special easing equation.<br />
+ You are allowed to interrupt the animation by clicking again. You can't do that in the first one.
+ </p>
+
+ <div id="ticker-container">
+ <button id="add-news">Append 2 Items</button>
+ <button id="shuffle-news">Shuffle</button>
+
+ <div id="news-ticker">
+ <div class="first">
+ <h4>News 1</h4>
+ <p>Nullam a leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas mollis vestibulum purus, rutrum sed.</p>
+ </div>
+ <div>
+ <h4>News 2</h4>
+ <p>Phasellus nunc ipsum, faucibus non, iaculis ac, sagittis malesuada, augue. Aliquam sollicitudin. Cras iaculis lorem sit amet.</p>
+ </div>
+ <div>
+ <h4>News 3</h4>
+ <p>Morbi condimentum. Sed id nunc eu arcu aliquet bibendum. Maecenas vestibulum eros fringilla tortor. Nunc purus.</p>
+ </div>
+ <div>
+ <h4>News 4</h4>
+ <p>Sed condimentum. Duis orci. Ut odio leo, dapibus pretium, rhoncus a, sodales eu, nibh. Vivamus consectetuer vestibulum.</p>
+ </div>
+ <div>
+ <h4>News 5</h4>
+ <p>Pellentesque varius ligula et enim. Nulla ut purus vel magna ullamcorper vestibulum. Aliquam at enim at ligula bibendum.</p>
+ </div>
+ <div>
+ <h4>News 6</h4>
+ <p>Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.</p>
+ </div>
+ <div>
+ <h4>News 7</h4>
+ <p>Etiam aliquet. Nulla consectetuer, nibh ut gravida consectetuer, nisl enim vestibulum nibh. Suspendisse potenti.</p>
+ </div>
+ <div>
+ <h4>News 8</h4>
+ <p>Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.</p>
+ </div>
+ </div>
+ </div>
+
+ <p class="separator message">
+ It can be used for news tickers as well. The plugin is not restricted to clicks or buttons.<br />
+ Here the option 'lazy' is used and it works, click the buttons on the right if you don't trust me :)<br />
+ You can also specify an interval for auto scrolling. To stop the animation, use $().stop() on the container.
+ </p>
+
+ <p id="general" class="side message">
+ This demo shows 3 different uses of this plugin. It can certainly be used for others purposes as well.<br />
+ Note that it can be used with any html. This is not a widget and the examples are just improvised.<br />
+ Use "View source" to see the different calls and markup. All the settings are commented.
+ </p>
+
+ <p id="extra" class="side message">
+ This plugin won't modify your html at all, won't even touch a single style.<br />
+ It gives you full control over the markup and the look, that's your part of the job :)<br />
+ You can control the animation from outside with the 3 exposed events (prev, next, goto).<br />
+ Guess what ? If you manage to show them scrollbars, users with no javascript can still navigate your content!
+ </p>
+
+ <div id="links">
+ <h3>Links</h3>
+ <ul>
+ <li><a target="_blank" href="http://plugins.jquery.com/project/SerialScroll">Project Page</a></li>
+ <li><a target="_blank" href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Blog entry</a></li>
+ <li><a href="http://flesler.webs.com/jQuery.ScrollTo/" rel="prev" rev="next" type="text/html">jQuery.ScrollTo's Demo</a></li>
+ </ul>
+ </div>
+</body>
+</html>
View
243 jquery.serialScroll.js
@@ -0,0 +1,243 @@
+/*!
+ * jQuery.SerialScroll
+ * Copyright (c) 2007-2010 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * Date: 05/31/2010
+ *
+ * @projectDescription Animated scrolling of series.
+ * @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.
+ */
+;(function( $ ){
+
+ var NAMESPACE = '.serialScroll';
+
+ 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.
+ // @link {http://demos.flesler.com/jquery/scrollTo/ ScrollTo's Demo}
+ $serialScroll.defaults = {// the defaults are public and can be overriden.
+ duration:1000, // how long to animate.
+ 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
+ lock:true,// ignore events if already animating
+ 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
+ target:window, // if specified, it's a selector to the element to be scrolled.
+ interval:0, // it's the number of milliseconds to automatically go to the next
+ lazy:false,// go find the elements each time (allows AJAX or JS content, or reordering)
+ stop:false, // stop any previous animations to avoid queueing
+ force:false,// force the scroll to the first element on start ?
+ jump: false,// if true, when the event is triggered on an element, the pane scrolls to it
+ 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
+ exclude:0 // exclude the last x elements, so we cannot scroll past the end
+ */
+ };
+
+ $.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,
+ // ditto
+ step = settings.step,
+ // ditto
+ lazy = settings.lazy,
+ // if a target is specified, then everything's relative to 'this'.
+ 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],
+ // will hold a lazy list of elements
+ items = settings.items,
+ // index of the currently selected item
+ active = settings.start,
+ // boolean, do automatic scrolling or not
+ auto = settings.interval,
+ // save it now to make the code shorter
+ nav = settings.navigation,
+ // holds the interval id
+ timer;
+
+ // If no match, just ignore
+ if(!pane)
+ return;
+
+ // if not lazy, save the items now
+ if( !lazy )
+ items = getItems();
+
+ // generate an initial call
+ if( settings.force || auto )
+ jump( {}, active );
+
+ // Button binding, optional
+ $(settings.prev||[], context).bind( event, -step, move );
+ $(settings.next||[], context).bind( event, step, move );
+
+ // Custom events bound to the container
+ if( !pane.ssbound )
+ $pane
+ // You can trigger with just 'prev'
+ .bind('prev'+NAMESPACE, -step, move )
+ // f.e: $(container).trigger('next');
+ .bind('next'+NAMESPACE, step, move )
+ // f.e: $(container).trigger('goto', 4 );
+ .bind('goto'+NAMESPACE, jump );
+
+ if( auto )
+ $pane
+ .bind('start'+NAMESPACE, function(e){
+ if( !auto ){
+ clear();
+ auto = true;
+ next();
+ }
+ })
+ .bind('stop'+NAMESPACE, function(){
+ clear();
+ auto = false;
+ });
+
+ // Let serialScroll know that the index changed externally
+ $pane.bind('notify'+NAMESPACE, function(e, elem){
+ var i = index(elem);
+ if( i > -1 )
+ active = i;
+ });
+
+ // Avoid many bindings
+ pane.ssbound = 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( 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, pos ){
+ if( isNaN(pos) )
+ pos = e.data;
+
+ var n,
+ // Is a real event triggering ?
+ 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( auto ){
+ // clear any possible automatic scrolling.
+ clear();
+ timer = setTimeout( next, settings.interval );
+ }
+
+ // exceeded the limits
+ if( !elem ){
+ n = pos < 0 ? 0 : limit;
+ // we exceeded for the first time
+ if( active !== n )
+ pos = n;
+ // this is a bad case
+ else if( !settings.cycle )
+ return;
+ // invert, go to the other side
+ else
+ pos = limit - n;
+ elem = $items[pos];
+ }
+
+ // no animations while busy
+ if( !elem || settings.lock && $pane._scrollable().is(':animated') ||
+ real && settings.onBefore &&
+ // Allow implementors to cancel scrolling
+ settings.onBefore(e, elem, $pane, getItems(), pos) === false ) return;
+
+ if( settings.stop )
+ // remove all running animations
+ $pane._scrollable().stop(true);
+
+ if( settings.constant )
+ // keep constant velocity
+ duration = Math.abs(duration/step * (active - pos));
+
+ $pane.scrollTo( elem, duration, settings );
+
+ // in case serialScroll was called on this elemement more than once.
+ trigger('notify', pos);
+ };
+
+ function next(){
+ trigger('next');
+ };
+
+ function clear(){
+ clearTimeout(timer);
+ };
+
+ function getItems(){
+ return $( items, pane );
+ };
+
+ // I'll use the namespace to avoid conflicts
+ function trigger(event){
+ $pane.trigger(
+ event+NAMESPACE,
+ [].slice.call(arguments,1)
+ );
+ }
+
+ function index( elem ){
+ // Already a number
+ if( !isNaN(elem) )
+ return elem;
+
+ var $items = getItems(), i;
+ // See if it matches or one of its ancestors
+ while(( i = $items.index(elem)) === -1 && elem !== pane )
+ elem = elem.parentNode;
+ return i;
+ };
+ });
+ };
+
+})( jQuery );
View
19 snippets/SerialScroll_constant-scrolling.js
@@ -0,0 +1,19 @@
+/*!*****************************************
+Snippet for jQuery.SerialScroll
+--Achieve constant auto scrolling--
+*******************************************/
+
+jQuery(function( $ ){
+ $('#pane').serialScroll({
+ //...
+ interval: 1,//auto scroll constantly
+ easing:'linear'
+ //...
+ });
+});
+
+/*!**************************************************************************
+ You probably don't want the default easing equation of jQuery (swing)
+ using 'linear' will keep constant velocity thru the animation.
+ You can change that if you want.
+*****************************************************************************/
View
44 snippets/SerialScroll_hide-arrows.js
@@ -0,0 +1,44 @@
+/*!*****************************************
+Snippet for jQuery.SerialScroll
+--Hide the arrows when the limit is reached--
+
+Suppose an HTML like this:
+
+...
+<img id="next" src="..." alt="prev" />
+<div id="pane">
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+</div>
+<img id="next" src="..." alt="next" />
+...
+
+You can use <ul>/<li> or any other HTML, just
+setup the selectors to match the elements.
+*******************************************/
+
+jQuery(function( $ ){
+ var $prev = $('#prev'),//prev button
+ $next = $('#next');//next button
+
+ $('#pane').serialScroll({
+ //...
+ cycle:false, //you probably don't want this
+ onBefore:function( e, elem, $pane, $items, pos ){
+ $prev.add($next).show();
+ if( pos == 0 )
+ $prev.hide();
+ else if( pos == $items.length-1 )
+ $next.hide();
+ }
+ //...
+ });
+});
+
+/*!**************************************************************************
+Instead of hide and show, you can use fadeIn and fadeOut or whatever you want.
+To hide the left arrow when the page loads, use css, or hide it with jQuery
+*****************************************************************************/
View
51 snippets/SerialScroll_paginator.js
@@ -0,0 +1,51 @@
+/*!******************************************
+Snippet for jQuery.SerialScroll
+--Generate a paginator based on the items--
+
+Suppose an HTML like this:
+
+<div id="container">
+ ...
+ <ul id="paginator" />
+ <div id="pane">
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+ <img src="..." />
+ </div>
+ ...
+</div>
+
+You can use <ul>/<li> or any other HTML, just
+setup the selectors to match the elements.
+*********************************************/
+
+jQuery(function( $ ){
+ var $pane = $('#pane'), //the item being scrolled
+ $items = $pane.find('img'),//the items
+ $paginator = $('#paginator');//the container of the links/buttons
+
+ $('#pane').serialScroll({
+ //...
+ items: $items,//or just 'img'
+ //...
+ });
+
+ $items.each(function(index){//index starts counting from 0
+ var text = 'item ' + (index + 1);//here generate the text you want
+ var $page = $('<li />').text( text ).appendTo($paginator);
+
+ $page.click(function(e){
+ //if you put a link inside the <li> then call:
+ //e.preventDefault();
+ $pane.trigger('goto',[index]);//scroll to the item number #index.
+ });
+ });
+});
+
+/*!**************************************************************************
+You can generate the paginators the way you want. They don't need to be <li>s
+You can add a link inside, or an image. Also, the 'this' will be the item so,
+you can take data from each one, and put it in the paginator.
+*****************************************************************************/
View
37 snippets/SerialScroll_right-to-left.js
@@ -0,0 +1,37 @@
+/*!******************************************
+Snippet for jQuery.SerialScroll
+--Right to left (or bottom to top) animation--
+
+Suppose an HTML like this:
+
+...
+<div id="pane">
+ <ul>
+ <li><img src="..." /></li>
+ <li><img src="..." /></li>
+ <li><img src="..." /></li>
+ <li><img src="..." /></li>
+ <li><img src="..." /></li>
+ </ul>
+</div>
+...
+
+You can use just divs or any other HTML, just
+setup the selectors to match the elements.
+Note that to make this botton to top you just
+set the option 'axis' to 'y'.
+*********************************************/
+
+jQuery(function( $ ){
+ var $pane = $('#pane'), //the item being scrolled
+ $items = $pane.find('li');//the items, don't need to be LI
+
+ $('#pane').serialScroll({
+ //...
+ items: $items, //or just 'li'
+ start: $items.length - 1, //start with the last one
+ force: true, //force an initial scroll to the last
+ step: -1, //more backwards, one on one (can be another number)
+ //...
+ });
+});
View
27 snippets/SerialScroll_stop-on-hover.js
@@ -0,0 +1,27 @@
+/*!*****************************************
+Snippet for jQuery.SerialScroll
+--Stop the auto-scrolling when hovering--
+
+Note that trigger and stop won't do anything
+If the widget wasn't called with 'interval'.
+*******************************************/
+
+jQuery(function( $ ){
+ var intval = 5000;//how often to autoscroll (in milliseconds)
+
+ $('#pane').serialScroll({
+ //...
+ interval: intval,//auto scroll
+ //...
+ });
+
+
+ // You can temove the .stop() to let it finish the active animation
+ $('#pane').hover(function(){
+ $(this).stop().trigger('stop');
+ },function(){
+ $(this).stop().trigger('start');
+ });
+
+});
+
View
33 snippets/SerialScroll_use-the-arrows.js
@@ -0,0 +1,33 @@
+/*******************************************
+Snippet for jQuery.SerialScroll
+--Manipulate SerialScroll with the keyboard--
+
+Note that this also applies to the mouse,
+just trigger prev or next whenever you want
+*********************************************/
+
+jQuery(function( $ ){
+ var $pane = $('#pane');//let's save it, the element being scrolled
+
+ $pane.serialScroll({
+ //...
+ });
+
+ $(document).keyup(function(e){
+ switch( e.keyCode ){
+ case 39://right (->)
+ $pane.trigger('next');
+ break;
+ case 37://left (<-)
+ $pane.trigger('prev');
+ break;
+ }
+ });
+});
+
+/***********************************************
+If you want to use up and down:
+- use 38(up), and 40(down).
+
+To see other keyCodes, check: http://rurl.org/pdl
+*************************************************/
Please sign in to comment.
Something went wrong with that request. Please try again.