Monday, February 11, 2008

jQuery.SerialScroll

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.

Links

134 comments:

Chris from Detroit said...

Excellent tutorials and examples! I've been trying to do something like this myself!

Sterling said...

Okay, that's pretty sweet. Thanks so much for your great contributions, Ariel!

motobass said...

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?

Thanks,
Dennis

motobass said...

I am rereading my earlier post and realized I forget to ask if there is a way, in the onBefore method, to exit without causing the scrolling to advance. Thanks again.

Ariel Flesler said...

Hi motobass
The first thing can be achieved with a little change, sacrificing some perfomance but that shouldn't be so tragic.
The second one can also be added, easily.

Please add both as feature requests here: http://plugins.jquery.com/node/add/project_issue/SerialScroll/feature

I'll try to add that to a new release, ASAP.

Cheers

Ariel Flesler said...

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.

Cheers

Stefan Isarie said...

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?

Ariel Flesler said...

Hi Stefan
  But I'm planning to add a specific callback when you reach the edge.
But for now, you can handle your situation with the callbacks 'onBefore' or 'onAfter'.

Both get as one argument, the element you scrolled to. So you keep in a variable, the collection of items. Then you do:
var index = $the_items.index(elem).

So you now have the index of the item.
If it's 0, you hide the 'prev'.
If it's $the_items.length - 1, you hide the 'next'.
Don't forget to show them back after.
I'll update the post once I add a release.

Cheers

Ariel Flesler said...

I forgot to add... You know there's a 'cycle' option right ? it will make the list circular. So when it reaches the limit, it pulls back.

Stefan Isarie said...

Ariel, thank you so much for getting back to me! I forgot to thank you for your work! These plugins of yours are amazing!

I am aware of cycle option, but this is not what I wanted. Instead, I was looking for and index, a variable which holds the current LI index. I will tackle this path!

Thank you!

Laddi said...

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

Just a thought...

Stefan Isarie said...

My best shot was:
$("#sections li:first").attr("id","first");
$("#sections li:last").attr("id","last");

Then:
onAfter:function( elem ){
var currentView = $(elem).attr("id");

if ( currentView == "first" ) { $("#arrow-left a").fadeOut("fast"); } else { $("#arrow-left a").fadeIn("slow"); }

if( currentView == "last" ) { $("#arrow-right a").fadeOut("fast"); } else { $("#arrow-right a").fadeIn("slow"); }
}

Maybe it is not very elegant, but it works and that is what's important for me in this stage.

Ariel, thanks again for pointing me to the right direction!

Ariel Flesler said...

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

Could any of you (or both) add these things as feature requests ?

Thanks!

Ariel Flesler said...

@stefan and laddi
  Added a new release(1.1.0).
Now it's possible to manipulate the animations from outside, using the custom events of the container(prev,next,goto).

Also added 2 arguments to the onBefore that make the check stefan needed, really easy to do.

Finally, added an option 'interval' for autoscrolling.

Cheers, check the demo, it's updated.

Laddi said...

Excellent work, man! I created the feature request already but you can then just ignore that... ;)

Again, great stuff! :D

CodeAssembly said...

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

Thanks.

Ariel Flesler said...

Hi

Sorry, I thought you agreed with me as you weren't replying. I really to try to keep this clean.

Do you have any kind of IM ? we can discuss your code more easily.

Cheers

David said...

Thank you Ariel. Very nice plugin.

One problem I have is that I can't seem to stop a rotation in progress. It stops for a little bit and then continues on. I'm having it auto scroll on load.

I'm using $(container).stop()

Anything I'm missing?

Ariel Flesler said...

Hi David

Use
$('#pane').trigger('stop');
and
$('#pane').trigger('start',[intv])

Where $('#pane') is the container that gets scrolled, I'll add this to the docs right away.
Please get 1.1.1.

David said...

Wow. Thanks for the quick response Ariel! Your rock. Works like a charm.

edward said...

Hi Ariel,

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.

Ariel Flesler said...

Hi Edward

Indeed that is the problem, while other similar plugins ask you to specify item size, or a certain amount of items to show each time, SerialScroll is more unrestricted.

One way to make this work, if it fits you, is to set the step, to the amount of items you are showing each time, so you don't get to see less items and you don't get stuck.

I wanted to make the plugin aware of the end, but that seems to require lots of code with so little restrictions.
You could also play with the option 'offset'.

Cheers, you can contact me by email if you want.

edward said...

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

Ariel Flesler said...

Hi Edward

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

Ariel Flesler said...

There shouldn't be any need for that, unless you want it to scroll less than step when you are close to the limit.
Right now, it will ignore if not cycling, or go to the last otherwise.

Jock said...

Hi,
Been looking around for something like this, great work!

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 Flesler said...

Hi Jock,

I do understand. You can certainly scroll 2 containers together.
You just match both with one selector when you call the plugin, f.e:

$('#one,#two').serialScroll(...

or with the alternate (new) way

$('#cont').serialScroll({
target: '#one,#two'
});

I'd advice you to check LocalScroll I think that's what you are looking for.

Cheers

Jock said...

Wow,

That's what I call a fast response!

I will give it a go although I am not an expert in this language. If I have any other questions, do you mind if I post another comment?

PS: If you created the page for me, I could pay you for your time via PayPal or something. I'm on a bit of a deadline with this one.

Thanks again, you're a star!

Ariel Flesler said...

You can surely post more comments, or contact me to my email (it's in the plugin).
I can't do it for you right now, sorry :)

Cheers

IschaGast said...

You were right, I was talking about Serial Scroll.

As I told I am busy making a carousel but I don't want the prev/next buttons to be visible when the first/last item is visible.

It should be working like jcarousel or accessible news slider plugin where the buttons are disabled or not visible.

But with SerailScroll you can add more features more easy than that plugins.

Ariel Flesler said...

Hi IschaGast

Although that it's true, I like to keep my plugin generic, one might not want to hide them, or to use a fade, or to shrink them, should I add all the possibilities ?

I don't think so, you can easily do that yourself using the onBefore.

One of the arguments is the collection of elements and another one, the actual index (check the source of the demo).

So you do(inside the onBefore):
$('#prev,#next').show();
if( pos == 0 )
$('#prev').hide();
else if( pos == $items.length-1 )
$('#next').hide();

where prev and next are the ids, you can use any selector.

Cheers

david said...

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?

thanks,
David

Ariel Flesler said...

Hi David

That is surely a useful feature, but not something everyone will need. In my list of priorities, size is the 1st one, extensibility the 2nd, and generality the 3rd.

I think the plugin lets you do that easily, without adding that to the core.

In the onBefore event, you do:
$pane.animate({height:$(elem).height()},800);

I used the argument names of the demo, and the 800 is random.

Truly, thanks for opining!

David said...

As always, speedy response and just what I was looking for. I guess I wasn't really suggesting to add it to the core, but just how to do it in general. Thank you very much for the answer.

Anonymous said...

I'm having a hard-time to make an "auto" news ticker (much like the demo's) stop when I hover one div ( and call stop.serialScroll ).

stop.serialScroll is reached, but the complete auto-scrolling continue nonetheless.

How the best way to implement a "pause on hovered element" functionnality ?

Ariel Flesler said...

Hi,

Let's take the news ticker from the demo as an example, you need to do:

$('#news-ticker').hover(
function(){
$(this).trigger('stop');
},
function(){
$(this).trigger('start');
});

That should do :)

Cheers

Aurélien said...

Hi, I just can't manage to stop the autoscroll...

I made an automatic news slider from your firt example, it works well, I added a button and I created a funciton taht do this :

$('#stop-news').click(function(){
$('#screen').trigger( 'stop' );
});


Any help would be apreciated...

Thanks for your great job !

Ariel Flesler said...

Hi Aurélien

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.

For everyone:
For further comments, please use this post.

IschaGast said...

Hi,

This is what I was searching for:
$('#prev,#next').show();
if( pos == 0 )
$('#prev').hide();
else if( pos == $items.length-1 )
$('#next').hide();

The only thing that doesn't work is this rule:
if( pos == 0 )
$('#prev').hide();

It works when you go to position 2 and then go back but on loading the prev button is still visible.

You can solve that with this:
$('#prev').hide();

But it would be more elegant if it also worked on loading. Do you know how that is possible that it won't work?

Thank you for you very quick reply the last time! Keep up the great work :)

Emad said...

Hi...

I am trying to build a horizontal news ticker from this Plugin, here is my demo page http://www.libyano.com/scroll/

Is it possible to make this ticker scrolls horizontally and from right to left?
Thanks!

Ariel Flesler said...

@IschaGast

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.

Cheers

Anonymous said...

I think all the examples of SerialScroll use fixed-width items. I wrestled with jCarousel for a long while, trying to make it work with images where some were 'wide' and others were 'tall'.

Before I dive in a spend lots of time, can you tell me how SerialSCroll would handle a horizontal scroll of items that have unequal widths?

thanks

Don

Ariel Flesler said...

Hi Don

You are, all the examples have fixed size, but NO. That's not required at all.
That's actually one of its major features (I should emphasize that...).

It uses ScrollTo, so the plugin will jump from one item to the other, they don't need to have fixed size, or even be aligned.

You just put your items wherever you want, it should work perfectly.

Niko said...

Hi,

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?

My current code is:
$(document).keyup(function(event){
if (event.keyCode == 40) {
$.serialScroll({items:'h2',duration:700,force:true,axis:'y',offset:-10});
}
});

Ariel Flesler said...

Hi Niko,

Try this:
http://flesler.pastebin.com/f79871afa

Pastebins look so much better :)

Cheers

Niko said...

oh, I had totally misunderstood that trickering thing. Many thanks, now it works like I intend, althought I changed the "force" back to a value "false" in order to not loop the whole document.

Thanks, niko

gyzmo said...

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

thank you very much

Ariel Flesler said...

Hi Gyzmo

I don't understand what do you want this plugin to do, in relation to loading the screens by AJAX.
To load the screens, check this link:AJAX docs

If you need this plugin, please explain me how, and I'll help you.

Cheers, for further commenting, please use this post.

gyzmo said...

hi
thank you for your answer
sorry my explanation was not clear
instead of use frame or object i wish use ajax :i just want have my menu with all my anchor
and serialscroll on one other div
a little similar to that exemple
http://flesler.webs.com/jQuery.LocalScroll/ajax/#section3

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

IschaGast said...

Hi Ariel,

I made this: http://ischagast.nl/serialscroll/

You can toggle between list view and the view with the great images.

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!

That rocks!

Ariel Flesler said...

@Gyzmo
It 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.

@IschaGast
Welcome 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.

Cheers

IschaGast said...

That's just what I want. I want that users can switch between list-view and photo view.

Some users don't want to scroll 5 times to see the last item but want to see directly how many item there are.

With that link I toggle between that two views. First it wasn't really clear because it was ducth you saw.

In the js you see .trigger('goto', [0]) that one I use to get the list visible because without that you only see a white screen.

There are two solutions:
I need to know what property is changed when moving the list items. Because setting they margin/position left of the ul to zero didn't do anything.

number two:
I have to remember which position the slideshow was at the moment of the swicth. When switching back it should start there.

One more thing. First I tried this: .trigger('start') but that didn't do anything. I don't know why?

I hope it's clear what my problem is :)

I love coming back to great jQuery plugins and people that are willing to help some JS newbie's ;)

I appreciate that a lot.

Ariel Flesler said...

Hi

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

If you need more help, you can contact me by mail if you want.

Cheers

Andrei said...

Just wanted to thank you for your wonderful scrips.
Keep up the great work.
Cheers.

Ariel Flesler said...

Thanks Andrei!!

I love this kind of posts :)

Matt Dempsey said...

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.

Ariel Flesler said...

Hi Matt

Can you give me a link to this so I can see?
You can mail it to me if you don't want to make it public.

Thanks

Matt Dempsey said...

Hi Ariel, I just sent an email to your gmail account, thanks!

Ringo Chen said...

Love the script!

Quick question .. is there a way to highlight the navigation when you're on the corresponding/current "section"?

It's great as it is, but it would be nice to see where you're at in the slides in the navigation as well.

Thanks again!!

Ariel Flesler said...

Hi Ringo

Yes, you do that yourself using the onBefore event, it receives all the information you need.

I want to make a post with some patterns for this plugin, but I'm being lazy :)

Cheers

Ringo Chen said...

ah. looks like it's been mentioned before. thanks.

.. and thanks for being so patient & helpful with everyone and their questions!

Nico said...

Hello Ariel,

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

Ariel Flesler said...

Hi Nico

You can do
$('#pane').trigger('goto',[0]);

To force it, but you'll need to set 'start' to 1 or something else, so there is a change.

Cheers

My Web Developer Probelsm said...

Hi Ariel, Ben here.

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.

Cheers.

p.s. Great plugins!

Ariel Flesler said...

Hi Ben, thanks

That will require the mousehold plugin for jQuery and in the callback, you use
$('...').trigger('next');

Ciao

Kurt Iverson said...

Ariel,

This is a life savor! Can you tell is there a way to have it on a continuous loop? So instead of it essentially rewinding when cycle is true, the next item shown would be the first item shown.

Thanks,
Kurt

Ariel Flesler said...

Hi

No, the plugin avoids doing dom manipulation, so something like this, has to be done by the end developer.

You can do this using the onBefore and onAfter, but I foresee quite complicated code.

Cheers

Kurt Iverson said...

Thanks! I wonder if it would work with your rotater script?

Ariel Flesler said...

VERY clever, never thought about that :)
Let me know if you do use it.
Thanks

Deeetroit said...

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?

Thanks a lot.

Ariel Flesler said...

Hi

I haven't done this, but try adding an "id" to the section, then in the action of the form, add #id_of_section.

That should make the browser focus the section.

Hope it works well

Deeetroit said...

Thanks for the suggestion. I tried that. When the form is submitted. It goes back to the form section (section 3) for a sec then goes to the first slide right away. What do you think is causing that?

Ariel Flesler said...

Remove the part that says:
force:true,

Deeetroit said...

It worked! You rule. Thanks

Anonymous said...

I want to scroll item from bottom, and stop when mouse over. Please help me.

JJ said...

Ariel, this is working great!

I have to admit, I'm a newcomer to javascript and jquery, and I'm trying to do something very simple that I'm having trouble with.

I want to be able to activate the scoll event from within the object.

So, each item in the panel contains a button to go forward and back, but even using selectors to traverse the innerHTML, it doesn't recognize these links.

When I put the links outside of the panel, it starts working.

I'm sure this is an easy solution, but I've been working on this for a few hours now....

E-mail me if you'd like a link to what I'm working on.

Ariel Flesler said...

@Anonymous(use a name plz)

To scroll from bottom, check the post called "Doctorate on jQuery.SerialScroll" there's one script that is right-to-left/bottom-to-top.

As for stopping on mouseover, there's a script too. Just combine both (use axis:'y' for vertical scrolling).

@jj

To externally manipulate the widget, use the custom events described above.

I don't know your email, send me one to the address on the right, I'll reply to you asap.

Cheers

Jeff said...

Ariel,

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?

Jeff

Ariel Flesler said...

Hi Jeff

SerialScroll has the option 'lazy' as well ( read the docs! :) ).

Only the items can de dynamic, that is, you must keep the scrollable pane, 'prev', 'next' and 'navigation' if used.

Note that if you need lazy navigation, you can safely combine it with LocalScroll.

Darren said...

Hi,
This is a probably a really simple question, but how do I add a link URL to the image currently shown ? The ones either side go left or right, but I want the central one to launch a URL.
Thank
Darren

Ariel Flesler said...

I imagine you're using the option 'jump'.
What you want is something quite specific.
You should code that with your own click binding, or using the onBefore function.

Cheers

Jock said...

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)

Thanks again for all your support!

Ariel Flesler said...

Instead of using start+force, trigger a goto event by yourself.

Omid S said...

Hi Ariel, great tool!

While testing this tool I noticed the 'start' feature does not work well on Safari -- who uses Safari? I dont know, but just thought I'd let you know.

Also, on a post on May 31st some dude was asking how enable links on a particular slide... im not very familiar with OnBefore or JQuery, can you give me push in the right direction?

Thanks again for this amazing tool.
Omid S

Ariel Flesler said...

Hi Omid

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.

Ping me by email if you need more help.
Cheers

Sean Murphy said...

Ariel, great plugin!

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.

Ariel Flesler said...

Hi Sean

SerialScroll doesn't add any property to any element.
The only change is event binding.

I didn't add this method, as it's not usually needed and it's very easy to do that manually.

You need to unbind w/e you chose as 'event' (click by default) from the arrows.
Then unbind it from the container (if 'lazy') or the items.
Finally, unbind('.serialScroll') from the container.

Note that you prolly don't need to rebind, for dynamic content do consider the option 'lazy'.

AnjiPanji said...

Thanks for the Great Plugin!
I'm having an issues with SerialScroll not working in IE...Safari and FF 3.0 work great.

here is the link to the page:

http://letterfive.com/as_What_We_Do

the plus/minus arrows are the next/prev.

Any help is much appreciated.

Thanks!

Ariel Flesler said...

Hi
Add position:relative to #article_container.

Cheers

AnjiPanji said...

Perfect!, thanks!

Aamir Afridi said...

Hi,

I have container where i animate the products

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

Ariel Flesler said...

Try this:

http://kohana.pastebin.com/f78ae50d7

Aamir Afridi said...

@Ariel Flesler

Thanks for your reply and effort for writing me a code but still its not working. I put and alert on elem.id and i got nothing(empty) in alert.

Can u please explain what is elem and how can i access its contents. Will it be the link clicked to animate the pane? or the pane being animate.

thanks for ur reply and efforts. It looks great except this problem.

Ariel Flesler said...

Hi Aamir

My bad, try this instead:
http://kohana.pastebin.com/f5446f428

It uses the onBefore instead of onAfter, so it'll happen when the animation starts.
But it receives more arguments and makes this easier.

Cheers

Josh said...

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!

Anonymous said...

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?

Ariel Flesler said...

Hi
Yes, 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.

Anonymous said...

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?

Ariel Flesler said...

If I'm not getting your problem incorrectly, you have 2 options.

1- If you're using the option 'jump' as true, then set that to false.

2- Add this code: http://flesler.pastebin.com/f4becac84

Cheers

Kevin Evans said...

Hello again, I want it very similar to this one http://www.salvilaw.com/ but without the gap at the bottom when it ends.

How do you control the speed too?

thanks!

Kevin Evans said...

Ariel,

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.

Thanks alot!

Kevin

Ariel Flesler said...

Hi Kevin

Contact me by IM or email.
I have Gtalk and MSN.
aflesler[a]gmail
flesler[a]hotmail

Lars Hagen said...

Hello Ariel,

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

Thanks for your help and best regards,
Lars

Ariel Flesler said...

Hi Lars

Indeed, the option 'cycle' does bounce.
Having an endless animation would require to move/clone elements, that is something the plugin won't do.

You can do that yourself using the onBefore. You need to set the option 'lazy' to true, and clone/append elements as it scrolls.
It will continue the animation naturally.

Lars Hagen said...

Hi Ariel,

thanks for the answer. Could you imagine to provide such a feature in one of the next releases? It would be really great :)

greetings,
Lars

Ariel Flesler said...

Hi

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.

Lars Hagen said...

Hi, that would be very kind and great. Looking forward :)

Thanks a lot,
Lars

Benek said...

Hi Ariel,

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.

Benek said...

Oh BTW, thanks for such a great plugin! I searched around a lot for the best solution for my needs before finally coming to your plugin.

Ariel Flesler said...

HI Benek

Check the blog post called "Doctorate on SerialScroll", it has the snippet to do that.

As for the endless scrolling, it's doable, I just haven't made a model call yet :)

Benek said...

Thank you so much for the quick reply. I got you snippet and it works like a dream. Excellent plugin!

hardik said...

Your Plugin works great. but i want to do something like this.

when user clicks on the next button and the slide is last. then instead of moving around from last slide to first slide. it will show directly first slide.

can you tell me how to do this ?

thank you very much for nice plugin.

Ariel Flesler said...

Hi Hardik

To make it scroll instantly you'll need to use jQuery.ScrollTo.
here you have a draft of a possible solution (you need to fill some parts).

If you just want it to scroll 'faster' in that case, you can try setting the option 'constant' to false.

amay said...

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?

Ariel Flesler said...

Hi, this plugin is to scroll "item-wise", that is thru items.
To just scroll a container, you can use just $.scrollTo (serialScroll's base plugin).

You simply tell it to scroll to some place whenever you need.

Timothy said...

how do you control whether or not when you click on the link, the page moves to the top of that ID after scrolling?

Ariel Flesler said...

That is prevented (e.preventDefault()) as that is the expected behavior on most cases.
You can bind your own handler to enforce this behavior if you want.

$('a.some_links').click(function(){
location = this.href;
});

Robert den said...

Ariel,

Is it possible with this script to scroll to an area in a map?

Ariel Flesler said...

Hi Robert

You should, if you're having problems, get me a demo of the prob online and I'll check.

Rob said...

Hi Ariel

Love the plugin - it does exactly what I want.

I am using it to show a horizontal series of product thumbnails that I want to continuously cycle.

Everything works great, except that when it reaches the end there is a significant pause before the scrolling "bounces" back.

Is this configurable, or is it a pause while it calculates?

The settings I'm using are:
items:'div', duration:2000,
force:true,
axis:'x',
easing:'linear',
interval:1,
cycle:true

I can show you my work in progress if you want, but I don't want to display it on a public message at this point.

Thanks

Rob

Ariel Flesler said...

Hi Rob
Send me a link by email and I'll check that.

Anonymous said...

Hello!

How to highlight navigation link when section active?

Please help!

Ariel Flesler said...

Hi, you can do that with an external (click) binding, or inside the onBefore.

If you use the event, then one of the parameters is the selected index. That's all you need (check LocalScroll's demo which does this).

Frances from London said...

This is a really nice plugin.

Would it be possible to change the speed on a click?

What I am trying to do is stop auto-scrolling when a next/prev button is clicked, and I would like the scrolling to then happen faster.

Should I just set serial scroll again and differently? Or is there a way to just reset some properties?

Ariel Flesler said...

Hi Frances
You can't access the settings object after you call the plugin (I plan to add this).
You can certainly call the plugin twice.
Once specifying prev/next and the other the 'interval'.

faridsilva said...

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:

src='js/jquery-min.js'>
src='js/jquery.scrollTo-min.js'>
src='js/jquery.serialScroll-min.js'>
src='js/SerialScroll_right-to-left.js'>

Is that order accurate? Did I forget something?

Thanks in advance.

Ariel Flesler said...

Those snippets are of course 'models'. You need to shape them up to your html and fill some blanks too.

Anonymous said...

this is a great plug in, good job. Quick question: Is it possible to control the next/previous actions from arrow key presses instead of href="#" ?

Ariel Flesler said...

You're confusing plugins. LocalScroll works with href's.
SerialScroll doesn't. You can manipulate it with the keyboard, check the post called "Doctorate on SerialScroll".

Frances from London said...

Being able to access the settings after you have specified them would be really fantastic.

Apart from that, it has made setting up a ticker/scroller fantastically easy. Thanks.

Ariel Flesler said...

Ok thanks. I do have that mind for a next release.

rey said...

Hello I Just need help!

I am not a great programmer but I'm trying :)

so what I want to do it is to trigger the slide onmouseover using the ID reference from an html tag, and move the slider to a custom position:

is this code correct ???

$('#t1').hover(
function(){
$('#slider').trigger('goto', [2]);
//alert('test 1');
});



where #t1 its the id of the html element for over trigger, and #slider its the container for slider, so this should work but don't,

what I am doing wrong ?????


Pleaseee any help will be really apreciated, many thanks in advance.

Rey.

rey said...

Hello I Just need help!

I am not a great programmer but I'm trying :)

so what I want to do it is to trigger the slide onmouseover using the ID reference from an html tag, and move the slider to a custom position:

is this code correct ???

$('#t1').hover(
function(){
$('#slider').trigger('goto', [2]);
//alert('test 1');
});



where #t1 its the id of the html element for over trigger, and #slider its the container for slider, so this should work but don't,

what I am doing wrong ?????


Pleaseee any help will be really apreciated, many thanks in advance.

Rey.

privat said...

Hi,
first I want to say thank you very much for this great work for all your plugins!

Now I have a problem with Safari, Chrome and Opera browsers.
When I use an anchor for prev/next
like:
prev: 'a.left',
next: 'a.right',

If I use it with an img-element it works:
prev: 'img.left',
next: 'img.right',

you can see the problem on beta.brandworkers.com

BR, Jan