Monday, March 10, 2008

jQuery.SerialScroll 1.2 released

I added a major release of jQuery.SerialScroll. It includes a ton of new features and allows close integration with jQuery.LocalScroll.


  • If you call the plugin on the same (scrollable)element more than once, the custom events get bound only on the first call.


  • The event 'start' no longer receives the interval, you must set it at start, stop/start only pause/restart.


  • 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.



I really advice using the minified versions. The code is optimized for those releases. Source versions should only serve to learn.


Anonymous said...

- The event 'start' no longer receives the interval, you must set it at start, stop/start only pause/restart.>>

Any example would be nice, because I really dont understand the "you must set it at ... pause/restart" bit.


Ariel Flesler said...


It means that if you want a widget to autoscroll, you need to set the option 'auto' to the interval when you initialize it.

the event start only works as restart now.

An example:
  auto: 5000,

That will make the widget autoscroll each 5 seconds, check the news ticker in the demo to see this in action, to add pause on hover check this.


wouter said...

Hi Ariel,
Is it possible to use the same function (with the same setup) on multiple slideshows? So you don't have to define a function for each slideshow? Maybe setting the target dynamicly (as the parent of the navigation link)?

Ariel Flesler said...

Hi Wouter

Since the last release, you surely can, that is, by using the option 'target'. Check the docs about it in the main post.


dave id said...

great extension of scrollto plugin.

I was wondering, though, if it is possible to hover over a button and have scrolling animation continue through an entire list, until hover ends -- rather than setting specific number of "steps" on click or mouseover.

I've tried playing with various configurations using your slideshow example as my base, including trying "event:hover" (even toying with reversing the jquery.SerialScroll_stop-on-hover.js I found to a "start on hover") and can't get it to behave the way I need it to.

this is what I have now:

event: 'mouseover',
step: 2, interval:4000,
jump: false

btw, the hover behavior is more important than the interval, if interval is interfering

much thanx

Ariel Flesler said...

Hi Dave

Sorry for the delay. Constant animation is hard to achieve with this plugin.
The only way is setting the step to the amount of items, still..

What you can do, is to set the event to mousemove or any similar mouse event.

Also, you can manipulate it from the outside with the custom events.
So you can use a plugin like hoverIntent, and trigger a next/prev on each period, while the mouse stays on whatever elements you want.

Aamir Afridi said...

Hi Ariel!
Just woundering if you add a feature where the scroll works with arrows key as well.

Will be great if it work with mouse drag as well on left or right :p

Ariel Flesler said...

Hi Aamir

There is a snippet showing how to make it work with the keyboard.
Check the "doctorate on..." post.

Matthew said...

Hi Ariel. Thanks for the great plugin.

What I'd like to do is introduce a blank first and last image and then use the plugin's 'exclude' function so that I can exclude these first and last slides from the scrolling to keep my actual content perfectly centered in my scroll container. However, 'exclude' only allows you to set a number from the very end of the scroll to be ignored, not from the beginning.

In other words, I want to be able to exclude:

[x] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [x]

Is there a way to implement 'excludeStart' and 'excludeEnd', or something to that effect?

Ariel Flesler said...

Hi Matthew

You can exclude items yourself easily.
You add a class to all the items BUT the first and last.
Then in the 'items' selector add that class. That will make the plugin ignore these 2.
I'd add 'force:true' so that it gets centered at start.

Ariel Flesler said...

...Also, you can use the option 'offset' (belongs to scrollTo).
It is used in the 2nd example of the demo to (sort of) center the slideshow.

Matthew said...


I had everything else set up just fine, but didn't think to add a special class to everything I actually wanted scrollable. That did exactly what I needed.

Thanks for the help, Ariel!

Pierre R said...

I was just wondering if it is safe to upgrade to jquery 1.3.1. The SerialScroll plugin seems to behave a bit slower after the upgrade.

Thanks for your advice.

Anonymous said...

I have this now : this is in jquery.serialscroll.js:

$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:false,//ignore events if already animating
cycle:true, //cycle endlessly ( constant velocity )
constant:true //use contant speed ?

What must i add here to make it autoscroll? like a newsticker?

Caroline said...

Hi Ariel,

Thank you for your hard work. I was wondering how I can use an external text file for the news items with the news ticker? You mentioned using the lazy parameter, but I have no idea what to do.

Caroline said...

Never mind, this seems to work, using your original newsticker on the demo page:

var $news = $('#news-ticker');

Ariel Flesler said...

That's odd! could you arrange 2 identic demos, one using each version ? use source version for all please.

You should override the needed settings from the outside, check the demos and docs. There's a snippet for auto scrolling in the "doctorate on serialScroll" post.