Monday, February 11, 2008

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

Introduction

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.

What's it for ?

jQuery.SerialScroll doesn't have one definite purpose. It's generic and adaptable. You can certainly use it as a screen slider. That is, to sequentially navigate a group of screens.
This plugin can also animate a text scroller in no time.
It can definitely handle slideshows, the high customizability of the scrolling effect lets you create beautiful animations.
You can even build an automatic news ticker!
Three of these uses are exemplified in the demo.
Remember, it's not restricted to these situations. It will take care of any collection of html elements that you want to scroll consecutively.

Settings and customization

jQuery.SerialScroll gives you access to a lot of options.
These are:

target

The element to scroll, it's relative to the matched element.
If you don't specify this option, the scrolled element is the one you called serialScroll on.

event

on which event to react (click by default).

start

first element of the series (zero-based index, 0 by default).

step

how many elements to scroll each time. Use a negative number to go on the other way.

lock

if true(default), the plugin will ignore events if already animating. Then animations can't be queued.

cycle

if true, the first element will be shown after going over the last, and the other way around.

stop

if true, the plugin will stop any previous animations of the element, to avoid queuing.

force

if true, an initial scroll will be forced on start.

jump

if true, the specified event can be triggered on the items, and the container will scroll to them.

items

selector to the items(relative to the scrolled element).

prev

(optional)selector to the 'previous' button.

next

(optional)selector to the 'next' button.

lazy

if true, the items are collected each time, allowing dynamic content(AJAX, AHAH, jQuery manipulation, etc).

interval

If you specify a number, the plugin will add auto scrolling with that interval.

constant

Should the speed remain constant, no matter how many items we scroll at once ? (true by default).

navigation

Optionally, a selector to a group of elements, that allow scrolling to specific elements by index. Can be less than the amount of items.

excludenew

If you want the plugin, to stop scrolling before the actual last element, set this to a number, and that amount of items is ignored counting from the end.
This is useful if you show many items simultaneously, in that case, you probably want to set this option to the amount of visible items - 1.

onBefore

A function to be called before each scrolling. It receives the following arguments: event object, targeted element, element to be scrolled, collection of items and position of the targeted element in the collection.
The scope(this) will point to the element that got the event. If the function returns false, the event is ignored.

Also, you can use jQuery.ScrollTo's settings!
Check its demo to see all of them.

The option 'target'

This option is a new addition, included since 1.2.0.
Before, you needed to call the plugin once for each scrolled element.
When this option is specified, the matched elements are no longer the scrolled elements, but a container.
In this case, the selectors of prev, next, navigation and target will be relative to this container, allowing you to call SerialScroll on many elements at once.

External manipulation, event triggering

jQuery.SerialScroll automatically binds 3 events to the containers.
These are:

prev.serialScroll

Scrolls to the previous element.

next.serialScroll

Scrolls to the next element.

goto.serialScroll

Scrolls to the specified index, starts with 0.

start.serialScroll

(Re)starts autoscrolling.

stop.serialScroll

Stops the autoscrolling.

notify.serialScroll

Updates the active item.

This looks confusing, but it's not. You use it like this:

$(container).trigger( 'prev' );

$(container).trigger( 'next' );

$(container).trigger( 'goto', [3] );

$(container).trigger( 'start' );

$(container).trigger( 'stop' );

$(container).trigger( 'notify', [4] );

'notify' also accepts a DOM element(item), or any of its descendants.
$(container) is the element that gets scrolled each time. If you specified a 'target', then that element, else, the element you called the plugin on.
Note that to use 'start' and 'stop' you need to use the option 'interval' first.
If your container element already has any of these event names bound(odd!), then just add the namespace when you trigger.
You probably won't need to deal with these events, but if so, this is how.

What makes jQuery.SerialScroll so special ?

This plugin has many positive features, of course, it won't fit everyone's needs. That's impossible.

Small Footprint

This plugin is tiny, as said before, it requires jQuery.ScrollTo. Both plugins together, take less than 3.5kb minified.
If by chance, you decide to include jQuery.LocalScroll, the 3 of them require less than 5kb. Including this plugin is not a bad idea, it can be used, instead of the option 'navigation' to build a widget with sequential and random scrolling.

Highly customizable

This plugin has many settings to customize, in addition, it can use jQuery.ScrollTo's settings. That makes 27 different options!
If you take a while to analyze them all, you can make your work really unique.

Accessible, degrades gracefully

Probably many will automatically skip this part, shame on you!
If you make sure non-javascript users will see the scrollbars, then they can perfectly navigate your content. You can show the scrollbars only for these few users, easily, using css/js.
This is one of the main differences with many similar scripts, they generate the content and the styling using javascript.

Adaptable

jQuery.SerialScroll won't alter the html or styles at all.
You are in control of the styles and content of your collections. You don't need the plugin to decide what html to use, or how many items to show simultaneously, and you can safely change that yourself, the plugin will always work.The items don't need to have fixed size, nor to be aligned. SerialScroll will scroll from one to the other, no matter what.
If you want a plugin with premade styles or automatic generation of html, then you should consider any of jQuery carousels.

Generic and reusable

Finally, as mentioned before, this plugin can be used for many different situations and doesn't have one specific application.

I have a collection of objects to scroll and this plugin works perfectly, except for one catch. Namely, the collection of objects can be re-ordered. If the user reorders the scrollable items scrolling then jumps to where they used to be instead of where they are now. Is there a reset() I am missing, or how we I detach and reattach it after reordering?

Hi motobass I added a new release (1.0.1) which includes both features. If the 'onBefore' returns false, the event is ignored.And if the new option 'lazy' is true, the items can be safely added/removed/reordered.

I have an unordered list and I'm using serialScroll to go back and forth to its list items. The scroll is triggered by two links.

Now, what I want is that when the scroll reaches the first LI element to hide the back trigger link [ as there is no where to go back ]. The same way with next link: if I reach the end of LI, I want to hide the next link.

Any way to read the current displayed LI element or a way to achieve this?

You should add the possibility of calling the 'slide' from outside of the scope of the object itself. Like for example when you have the slide and a navigation menu as well where clicking an item in the menu would slide to the corresponding item in the slider. You can of course simulate this with the onBefore and onAfter methods but then the next/previous in the actual slider won't be in sync anymore...

@stefan I'm glad you solved it, I was think of an index-based check, but that option if very feasible.I'll add the actual index as 4th or 3rd argument of the onBefore, and possibly a specific event 'onReachLimit' or something like that.

@laddi Your suggestion seems pretty reasonable. I'll see what I can do for the next release.Note that for the specific case you mentioned, in case you are interested, you can use jQuery.LocalScroll.It also uses jQuery.ScrollTo and they can be safely combined. The overhead will be really small.

Sorry for the delay, this is the page where I used your plugin and modified it www.prosport.ro ( the logos with the arrows ).The problem was that it always scrolls a fixed number of items and if you have ( items % steps != 0 ) then you will have some emtpy space on the last step.If you want I can give you the modified source (I posted the modified section on the last comment that was deleted).

I am trying to use your plug in to manage a horizontal div of images. The div structure is pretty simple. There is a container div, a clipping div, and an items div that is sized width-wise to hold all the images. I am able to scroll without any problems. However, if I use goto to jump to a position, I get somewhat unexpected behavior. Specifically, if I 'goto' the last element in the list, I then have to hit 'prev' twice before the images start scrolling again. I unfortunately don't have a public site to point you to but thought you might know off hand what the problem is.

By the way, I think the problem has to do with the fact that the last element can not scroll all the way to the left most position since it is at the end of the div (which is the effect I need). So it then takes several 'prev' operations to get everything lined up again.

Hi Ariel, Thanks for the fast reply. I think the answer for what I'm trying to do will be to make the list circular with the 'lazy' option on so I can ensure the user can always move freely in both directions. My thinking is that I can double my list up, then check to see when the last element is at the start of my viewport and if so, adjust the set of items accordingly. I'll let you know how it goes. Thanks for the excellent plugin and the support. Our site should be up soon...

What you plan to do, is something I feared from adding to the core, as getting into cloning can only bring trouble.I'm interested though in seen how you implement it, let me know when you have it ready :)Cheers

In the absence of a forum I wondered if you could answer a quick question: Is it possible to control 2 different containers with 1 external click (link)?

To explain: I am trying to develop a timeline application where one container shows page thumbnails (3 whole pages + 2 half pages either side) and the other container shows the larger version of the thumbnail that appears in the centre of the first container. I would like to control both containers with a series of links (along the bottom of the browser window) that correspond to the #id of each thumbnail (ideally I'd like to display the id in the query string depending on what link was clicked). Is this possible, if so how?

PS: I can point you to a mocked up version if it helps you to understand my ramblings!

Ariel,again, great plugin!!! I was wondering if it's possible to add the following to make this even more flexible.

say you have a ul and you rotate through the li items. it may happen that the li items have varying heights. would it be possible to change the height of the container (ul) to match the height of the li element? so, that you could rotate through items of different heights?

Do you have a demo of this online ?If you are using the html from the demo.. #screen is not the element being scrolled, you need to call 'stop' on the 'target' if you specify one. It needs to be the element being scrolled.

You mean, why does the button start visible when the page renders ?If so, you just hide it with css, it will obviously be visible until you click arrows.If for some reason you can't alter css, you can work around:

$(document).ready(function(){$('#pane').trigger('goto',[0]);});

@emad

You can surely make it work horizontally. You can use any of ScrollTo's settings. One of them is 'axis', you set to 'x'.As for right to left, yes, since the last release, you just need to set a negative 'step' option.If you want it to start on the right, use the option 'start' and set 'force' to true.

I'm trying to do a page scroller so that the whole page would scroll allways to a next visible heading element with pressing down-key. I'm trying to use SerialScroll, but it won't scroll any further than to the first h2-element and then starts to loop with the same h2-element? Any ideas where I went wrong?

hi , thank for that plugin,i want use it for my portefolio online, i m beginner,i dont know about javascript,i have a question:i wish the links of my menu make reload the main container by ajax how i can do simply that action

hithank you for your answersorry my explanation was not clearinstead of use frame or object i wish use ajax :i just want have my menu with all my anchor and serialscroll on one other diva little similar to that exemplehttp://flesler.webs.com/jQuery.LocalScroll/ajax/#section3

or that http://www.webinventif.fr/navigation-sans-rechargement-de-page-via-javascript-jquery/

I only have one problem that can be seen when you do this:* click to the third item* click the view toggle link* click that link again

Now you see that the slideshow will go back to position one. What I want is that it stays at the position it was.

It that possible?

I had to insert this to see the list view anyway:$('body.domenabled #item_news .item_news_container').trigger('goto', [0]);

Firebug didn't return what the scroll script is doing. I think the ul is being replaced width margin-left or position relative but resetting both of the properties to 0 didn't let me see that list view. That's why that line is there.

First I used the cycle plugin but after some testing the scrollTo plugin is better because it doens't change anything in your HTML. Which means you have full control!

@GyzmoIt seems like what you want is LocalScroll, not SerialScroll, right ?The 2nd demo you linked, doesn't have any kind of scroll animation, just... ajax. You don't need any plugin to do that, just jQuery.If what you need is LocalScroll, please comment on its last post.

@IschaGastWelcome back :)That link you mentioned, is the one you need to remove, it's causing the container tu pull back each time. Why would you add that, if that's not what you need ? Anyway, that should solve this.

.trigger('start') is used to restart a previously stopped auto-animation. If you want auto scrolling, use the option 'interval'.

I think you are approaching this in a wrong way. You should have one div/ul containing the pics with arrows. That container gets scrolled.On the other hand, you have ANOTHER div/ul that contains the list-view, this one doesn't get scrolled.

If you use the option 'navigation' with the list-view items, it'll solve your problem automatically.

Ariel, firstly let me say that this is fantastic. I'm a web designer, I code HTML and CSS but design's my passion. I know nothing about Javascript at all, and javascript and interactivity are becoming more and more popular, and it's free plugins like this that make my life so much easier! So thank you!

I do have one question. I'm using the code from the first example, the navigation one. I've edited it slightly so that 3 li's appear at once in the sections div, and also so that each click of the arrow scrolls past 3 li's. I'm using 6 li's, so you see the first 3, then scroll to 4 5 and 6, and then another scroll just shows the last one again on it's own - is there anyway that once the last 3 are shown, it cycles back to the start again rather than just showing the last one again on its own?

I hope this makes sense and you can help me, if it can't be done I can probably live without, but if there's something I'm missing or doing wrong it would be great to have a kick in the right direction!

Once again many thanks for this script whether I get my bug fixed or not, it's great.

is there any way to launch onBefore at the initialization of the SerialScroll? I'd like my right arrow to be disabled if there isn't items to be scrolled (i.e. if there's only one) and I don't know how to do it except using the onBefore method, which knows the items length.Thanks for your answer and your plugin.Nico

Would it be possible to make it so if a user holds down their mouse button over the arrow it'll keep scrolling until released? I know I could apply an onmouseover event, but I would prefer it to only keep scrolling if the mouse button is pressed.

Hello!Thanks for the great script.One of my divs has a form in it. When the form is submitted, it gives a success or error message in that same section.How do I make the php form go back to that same section when the form is submitted and the page reloads instead of showing the first section?

I started messing around with SerialScroll after just recently playing with localScroll.

Is it possible to have content loaded externally which contains the content I want to serialScroll. I ask because I know I would probably have to use liveQuery or is there a "lazy" attribute that can be used for SerialScroll?

Thanks Ariel, I have managed to get everything working now but one thing still niggles...

I have set the scroll to start on a different item than the first one in the list but can't seem to work out how to make it highlighted with the 'selected' class. Should I be using the onBefore function again? (Please see: http://www.nmmc.co.uk/20century/index2.php)

The option start surely works. It just tells the plugin to start on a different position than 0.I do test everything on Safari.

As for the second part, I don't quite get what you mean. The onBefore is a setting of the plugin. A function called before each slide.Sadly the online demo is out of service, but if you read the docs, you should be able to see how it works.

One thing though, is that it would be nice if there were a destroy() method that unbinds all the events and resets all the properties that Serial Scroll adds to the container and child elements. That way you could "re-initialize" SerialScroll on the same container more than once.

and a pager which are gray dots and onclick on any gray dot, after animating the product, i need to take the id of JUST CLICKED gray dot and assign css class as 'ACTIVE' (yellow dot) and the rest of gray dots should go 'inactive' (gray dot)

I see the alert many times but it should show the alert just once.

here is code:

http://kohana.pastebin.com/m4b148c3a

If you see an alert saying 'i am a good link', that appear many times

it might be a stupid question but i am sorry, i am not that good in jQuery and other point is that if i take this block of code outside onAfter, its not working. Please help

Hey! Great work. Your advice to add position:relative to the container is VERY important. I was frustrated a good night trying to figure out why IE7 wasn't scrolling my div elements that contained links. (Worked with images though, weird). Anyway, thanks for the great work!

Is is possible to use the OnAfter function to show a particular DIV layer when you have scrolled to an image. For instance, I have 5 images I'm scrolling through. When I stop at image 3 I would like DIV 3 to appear beside it. So DIV 1 becomes hidden and DIV 3 becomes visible. Is that possible please?

HiYes, the first argument of the onAfter is the element you scrolled to.Using it, you can find its corresponding div and show it.You keep the previous div in a external variable and hide it, then save the new div into the var.

Great plugin. But since I'm a noob at jquery and javascript, I can't get past one problem. I'm putting href links in some text blocks in the li tags, but when I click that link, nothing happens. I suspect it's because the script is set up to advance the scroll on the click event, but I don't know any way around it. Mind suggesting how to change this?

We are willing to pay if you can help us fix the problems on http://www.salvilaw.com/index_scroller.html

Basically we need it to pause on rollover and also have a continous cycle, with no gap between the bottom of the last item and when it starts over.

Just let us know if you can help us and how much you want to charge. The client is getting antsy so we need to get it done soon.

THe current live homepage at http://www.salvilaw.com/ has another script which works fine but the client does not like the gap at the bottom of the content. So that's why we are trying to use your awesome script.

today I tried your really great plugin. But is it possible that the 'cycle' does not really work?

I tried your demo and as far as I understood it shall endless scroll in ONE direction but the scroll is "bouncing"? Did I understood something wrong or where is my mistake ('caus such a endless scroller in one direction is exacly what I need and I'm looking for...)

I can provide a way of doing that with a separate script, like I did for other kind of situations.But not into the plugin itself. I keep it generic and there isn't one single way of doing this, and it wouldn't satisfy any situation.

I'm using your plugin to scroll logos horizontally across a banner, I've got it all working as I want, and now I'm trying to make the animation stop whenever I mouseover a logo and then restart when I mouseout. I've created a function on mouseover of the logos that calls $(container).stop() but it doesn't seem to be working properly. The animation bounces a around back and forth a little instead of stopping completely, and then on mouseout it resumes it's steady scroll. Do you know what might be causing this behavior?

Also, I'd be interested in what Lars mentioned about a solution to scroll endlessly in one direction rather then bouncing from one side to the next when using cycle.

I got a DIV with text in it, it's height is 300px. i want to make a custom scrollbar with a smooth flow. i thought i could use your plugin, but i still didnt manage how... could you help me out please?

Hi Ariel, I'm trying to set up your script, I'm think that is amazing, but at the present I'm really frustrated 'cause I don't get it up.If I repeat your serialScroll demo, it works smoothly, but if I try with SerialScroll_right-to-left (which is the one I need), nothing happens in my browser.Following your example I'm using in my head section: