Monday, April 28, 2008

Doctorate on jQuery.SerialScroll

Introduction

After replying to a large amount of comments and emails about jQuery.SerialScroll, I decided to comment some more about this plugin, also to publish some snippets, to achieve commonly desired effects or behaviors.
This should save you (and me :)) some time. It might also show you some additions, that you haven't considered.
I'll also try to show some more model calls to the plugin, so you can unattach yourself from those in the demo.

A little bit of theory

Before the snippets, I'll go through the basics, to refresh your mind.
Calls to the plugin
It can be done on two different kind of elements
  • Element to be scrolled: This is what you normally do when you want one single instance of SerialScroll in a page.
    $('#pane').serialScroll({
    //...
    });
    
  • Container: You might want to create many "SerialScrolls" in the page, you don't need to call it many times, just put the option 'target' to work.
    $('div.container').serialScroll({
    //...
    target:'div.pane',
    //...
    });
    
    This will allow you to have many divs with class container, which contain a scrollable div with class pane. They don't need to be divs.
    When doing this, the selectos for the arrows also become relative to the container, instead of absolute.
  • Global call: If by chance, you want to scroll the window, you'll need to use this approach.
    $.serialScroll({
    //...
    });
    
    If, for some reason, you need to retrieve this implicit element, call:
    $.scrollTo.window();
    This will return you the element, don't use window or document.
onBefore
This setting, which is a callback, will empower some snippets, so you better learn about it.
$('div.container').serialScroll({
//...
onBefore:function( e, elem, $pane, $items, pos ){
//...
},
//...
});
Note that:
  • The 'this' is the element that triggered the event.
  • 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 $ are jqueryfied.
The onAfter, only receives 'elem' as the first argument, and the 'this' is the element being scrolled ($pane but not jqueryfied).

The snippets

Now, what you really want, the code required to do all those fancy things, that the plugin doesn't do natively.
One note, all the snippets are wrapped with a document ready and they use symbolic ids. Needless to say, you don't need to copy the ids, or even USE ids.
Only the relevant settings are specified, so you will see "..." reminding that it's incomplete code.
You configure the selectors and the rest of the settings, according to your needs.

  • Use constant auto-scrolling. getnew
  • Hide the arrows when the limits are met. get
  • Stop the auto scrolling on hover. get
  • Scroll from right to left (or bottom to top). get
  • Manipulate the widget using the keyboard. get
  • Generate a pager based on the items. get

Concluding

I hope this helped and saved you some time, I also hope you learnt something new.
I plan to add more snippets as they come up from requests.
If you have any doubt, don't hesitate to ask.

Update 6/25/08
Added the constant scrolling snippet

226 comments:

«Oldest   ‹Older   1 – 200 of 226   Newer›   Newest»
Maniquí said...

Hi Ariel,

thanks for the examples, they're really helpful for noobs like me.

Regarding the "Hide the arrows when the limits are me" example, it seems it isn't working fine:
- The prev arrow isn't hidden on "start-up"
- if you reach the end, the next arrow isn't hidden either
- but then, if you go back to the beginning, the prev arrow is successfully hidden although...
- if there are more than one scrolled pane, all prev arrows are hidden.

This last issue I've being able to fix it by doing:

onBefore:function( e, elem, $pane, $items, pos ){
var $prev = $pane.siblings('div.scroll-prev'),//prev button
$next = $pane.siblings('div.scroll-next');//next button
//...
}


About the paginator: could it be configured to paginate to a set of items?
I'm thinking about a paginator alla iPhone, made with some dots, and when you click on one of them, it scrolls to a set of items. I'm pretty sure this is possible and I will come back if I find how to do it.

Thanks Ariel for this great (and others) plug-in.

Maniquí said...

"if you reach the end, the next arrow isn't hidden either"

OK, my fault. In this chunk:

else if( pos == $items.length-1 )
$next.hide();

the "-1" has to be changed to the qty of items that are being scrolled each time. In my case, it was 5.

Maybe there is a way to use the values of "step" or "exclude", like:

pos == $items.length-(steps)
or
pos == $items.length-(exclude+1)

But not sure how to do it.
So, in my list above (previous comment) I just need to find how to hide the prev arrow on start-up. I can do this easily with jQuery, but maybe there is a way to do it "inside" the SerialScroll code.

Maniquí said...

The prev arrow isn't hidden on "start-up"

OK, done.

$('.scrolled-subpanel').find('div.scroll-prev','div.scroll-next').hide().end().serialScroll({//...})

I would bet that one is a pretty dirty solution, hehe.

grantmx said...

Hey Ariel - Great plug-in!

I have a question: I am trying to create a schedule using a combination of jQuery.SerialScroll and ui.tabs. I have it working for the most part.

Here is a demo page: http://sales.316networks.com/demo/new/schedule.html

Its not pretty yet... And the "Live" and "OnDemand" tabs are the only ones I've activated, thus far.

The tabs work, and the live tab (container) "SerialScrolls" via the top controls like its supposed to, but when you tab to "OnDemand" The scroll controls no longer work for that section of scrollable containers.

Do you know why it would bomb out? I suspect it may be related to the target:'', but I am not sure. Thanks!

Maniquí said...

hi grantmx,

you are having the same issue I was having until I heard a "click" on a
deep place of my brain.

I didn't understand it at first: the element to match (the container)
isn't *any* block that contains *all* the scrolled elements.

You must have a container per each scrolled element.
So, in your HTML, give each ui-tabs-panel(like id="live") a class like "scrolled-panel" (or you can even use the class "ui-tabs-panel" which is already there) and apply the jQuery to that class, like this:

$('div.scrolled-panel').serialScroll({
//...
target:'div.schedule',
//...
});

That will do the trick and make it work in every tab.

Ariel Flesler said...

@Maniqui

Thanks for all the feedback, and thank you for helping grantmx.
I plan to add a new release, I'll try to add/simplify some of these snippets.

@grantmx

I gave a quick glance and I think Maniqui is right, comment again if it you still have troubles.

grantmx said...

Thanks Maniqui! I gave that a try and its still not working. The tabs still work, but now nothing is scrolling as opposed to before.

Does the "items selector" need to change as well? Although I do need it to scroll the .hour-blocks and nothing else.

Thanks Guys.

grantmx said...

Also Maniqui, in reference to what you said earlier, "You must have a container per each scrolled element."

I believe what I have is kinda close to that. The element being scrolled is the div.hour-block and the container that holds them together is div.program-sch.

So the container breakdown is like this in hierarchy order:

#schedule-wrapper <-holds all
#live <-holds each panel
.schedule <-binds the programs
.program-sch <-holds four 1 hour blocks
.hour-block
.time-... <-program details @ 30min

And then under the #live panel there is another grouping which holds the network titles that corresponds to each .program-sch

Hope its not too confusing.

Maniquí said...

@grantmx

Your container is "ui-tabs-navs", your scroll "viewport" is "schedule" and the items scrolled...
Mmmm... in fact, that is what you've configured, now that I'm looking at your source code...

Could you try a minimal setup with less options? In the meanwhile, I will keep thinking what's going on, because I think it should work fine as you have already configured it.

Some possible improvements (not related to the bug, but that you may take into consideration):

- you are trying to display tabular data using a mark-up that isn't intented for tabular data.
Maybe you can try an approach using tables, that would be more semantically correct. But probably, to make it work with scrollTo you will need to use nested tables, or elements like thead and tbody. I'm still thinking about how could you do it.

- you can try using other element than <a> for links. A div or a span would do the job. If you want it to be even clearer, add those buttons using jQuery.


@Ariel

You are welcome, and many thanks you for crafting high-quality stuff for jQuery.
I'm "missing" the point of some of your plug-ins (like jQuery.modularize), because I'm not a programmer (although I'm trying to learn some Python, JS/jQuery and a bit of PHP).
I'm on the HTML/CSS shore by now, but here at work we use jQuery a lot, always trying to implement it as a progressive-enhancement and accesible approach.

Gracias, che!

grantmx said...

Thanks for the suggestions, but actually the markup is valid XHTML (except for the links to activate jQuery Thickbox) and tables aren't a good practice for what we're trying to achieve.

I'll have to dig a bit deeper into the documentation to understand how things are targeted.

Maniquí said...

@grantmx

I've found the problem in your site, and I've done some testing using Firebug, and finally make it work. :)

The problem is: you have just one set of prev/next buttons, and the functionality is being binding just to them, and just for the first scrolled "viewport" in the first tab (live).

Ideally, you want a set of prev/next buttons for every scrolled panel.
But because of your design, you have just put one set of prev/next button.

You have two options:

a) change your design and have a prev/next button inside each ui-tab-panel. In fact, in my opinion, that is the place where they belong. From a usability POV, it took me a while to find the prev/next buttons and mentally asociate them with the scrolled thing.
I would go with this one (see below)

b) do some jQuery black magic to re-bind the scroll functionality each time the user clicks on a tab. But if you are not a JS/jQuery programmer, it will take you some time to make it work as expected. And you will probably end with an ad-hoc and not so flexible solution.

I would go for a). Again, it's easy:
- copy your current prev/next navigation inside each "ui-tabs-panel"
- change the jQuery to this:

$('.ui-tabs-nav').serialScroll({
target:'.schedule',
items:'.hour-block',
//...
})

As I said, I've tested it and it worked.



BTW, I'm not saying your markup is invalid. Tables are a totally valid and good practice if you are displaying/organizing tabular data.
In fact, that schedule is tabular data, and that's why I'm suggesting you should use a table.

Try this: disable your styles (ctrl + shift + s, if you've installed the Web Developer Firefox extension) and take a look at the schedule: does it makes sense for you when styles are disabled? It doesn't, at least, not for me.
Using divs to recreate a table is a bad practice.

But, again, it's up to you and these isn't really related to jquery.SerialScroll, so we may continue this dialog in private.

grantmx said...

Thanks Maniqui! The navigation had glanced my mind earlyer, but I didnt know enough about this plugin to really look it up. I appreciate you taking the time to help on this.

And I do understand your point. I think I missed the keyword, "Semantically". Not to go too far off topic, but I am of the idea that there are two schools of thought on tables vs. divs. And "As for me and my house, we choose divs." LOL!

Nevertheless, it does look like I do need to reassess how my layout flows. however there is a myriad of reasons why I'm not using tables (an probably not likely).

But I do appreciate you pointing out the semantic flow. Thanks!

Douglas said...

I can't seem to get this to work when I've refreshed the content. I've been trying the news-ticker and using livequery, but when the div is loaded i'ts not moving at all...

$('#ticker-container a').click(function(){
$.ajax({
url: 'testing-scroll.php',
success: function(msg) {
$('#ticker-container').empty().html(msg);
}
})
return false;
});



$('#ticker-container').livequery(function(event) {
$('#news-ticker').serialScroll({
items:'div',
duration:3000,
force:true,
axis:'y',
interval:100,
step:1
});
});


The news ticker is just as in the example, and what's loaded from testing-scroll.php is the code inside ticker-container.


Any idea? :)

Thanks for a cool plugin!

Ariel Flesler said...

Hi Douglas

You're using LiveQuery the wrong way.
That function you gave it, won't be executed more than once, as the given element is not readded.
If you call LiveQuery on the #news-ticker, then it might work.

Note that you don't need LiveQuery for this situation, SerialScroll can handle it.

If you only need to reload the items, then you can set the option 'lazy' to true, and then the items are gathered each time.

Note that the scrollable element and the arrows must be preserved.

Cheers

Douglas said...

Thank you!

I have to read up on livequery again, I thought a had gotten it right... Sorry!

What I've been trying to do with this plugin is a seamless type of automatic vertical scroll of the inside of a div, is that possible?

I've been playing around with the parameters but haven't gotten it quite as I want it yet. It's like a marquee but vertical that I'm trying to create.

Ariel Flesler said...

Achieving a constant animation with this plugin is complicated.
It's mainly designed to jump from one element to another, but if you scroll from one side to the other, it will yield constant animation.

I'll add a snippet once I get on with this, I'm kinda overwhelmed this week.

Cheers

Douglas said...

That sounds cool!

Found some more uses for the plugin I'll play with for now.

Thanks for the quick help!

Anonymous said...

Thanks for creating and sharing jSerialScroll.

I created a demo page just to try it out by copying your source. However, in my example, http://www.best-learn-spanish.com/s/jquery-serialScroll/example.html

the top scroll pane with Sections 1,3, and 5 (which is the one I want to implement) isn't working. The other scroll pane examples are working. I've diff'ed your source and mine and the only differences are the sources of the jquery files. I had hard-coded them to point to http://aflesler.webs.com/ as you do in your source but that didn't make any difference.

Any ideas? I'm stumped.

Thanks,
jdl

p.s. It would be helpful to have the example with the images and css packaged into a zip file that we could download.

Ariel Flesler said...

Hi

I really can't tell why isn't it working.

My advice is that you use a markup from scratch. The demo is not meant to be THE way of using it.

You just need a container with overflow, and items inside.
If you want to float the elements (horizontal widget) then you need to wrap them with another element( f.e an UL) with fixed width.

I'll keep what you said in mind, I'll add each case in a html file included in the zip release.

If you want, change the minified version of serialScroll to the source one, and I'll debug it.

Cheers

Goodboy said...

Ariel, please, write text scrolling example, which using your plugins, like
easyscrolling

Ariel Flesler said...

Hi

Check this comment which is somehow similar.

I'll try to make more snippets, and also update SerialScroll as I get some time.

Cheers

mehmet said...

Hi Ariel

I ve been using your script and it creates wonders for me. Thank you!

my question is, Do you have any ajax samples for jQuery.SerialScroll? lets say the next button will call and load 10 records from database to container div on each click. i would appreciate it very much if at least you gave me some clues or outline on how to achieve dynamic loading via ajax


Thanks a lot!

Ariel Flesler said...

Hi Mehmet

That's very simple. Just the set option 'lazy' to true.
Then just add more items to the container and they'll be automatically detected.
Make sure you don't replace the original scrollable pane.

Cheers

Ariel Flesler said...

Added a snippet for constant auto scrolling. This was requested many times in the past.

Andrea F said...

Hey Ariel,

Nice plugin man. Good work. Got one thing that is bugging me though.

I have a single axis (x) array of items (li's). I'm grouping the items with classes. An item can have more than one class assigned to it. If you select a group, i.e. "Cars" then all the items that don't have the "cars" class will be hidden. Now the problem i have is that serialScroll still wants to scroll to them even though they are hidden. This translates to clicking a few times on the "next" button for it to get to an item that is still visible.

I've tried to use the "onBefore" method to see if the next item is visible i.e.

onBefore:function( e, elem, $pane, $items, pos ){
if ($(elem).is(':hidden')) {
...
}
}

But i can't get it to skip to the next item while in this method.

I guess i'm basically asking if you know a good way to get serialScroll to skip items that aren't visible?

Keeping in mind that it would need to skip the hidden items regardless of the direction you are traversing the item array, "next" or "previous".

Does this all make sense? 8)

Cheers.

Andrea F said...

Ok,

I think i just solved my own problem. Nice and simple too.

items:'li:visible'

and

lazy:true

So this essentially rechecks the item on each click to ensure it still matches the requirement to be part of the serialScroll.

Glad i could solve it with the tools provided 8)

Hopefully this may help someone else.

Ariel Flesler said...

I was about to post the same, till I read your second post.

Glad to know that someone actually reads the docs :)

Kelly said...

Hi Ariel,

I'm using this and loving it. Your snippets are very helpful. I am using both autoscrolling and start/stop on hover. As a non-programmer I can't figure out how to start the animation in reverse. I'm pasting my code below. My 'previous' button is a div#scrollLeft. I would like this to autoscroll in reverse (step:-1) when the user hovers over the div#scrollLeft.

jQuery(function( $ ){
var intval = 500;//how often to autoscroll (in milliseconds)

$('#slideshow').serialScroll({
items:'li',
prev:'#scrollLeft',
next:'#scrollRight',
axis:'x',
cycle:true,
step:1,
easing:'swing',
interval: intval//auto scroll
});

$('#scrollRight').hover(function(){
$('#slideshow').trigger('start');
},function(){
$('#slideshow').trigger('stop');
});

$('#scrollLeft').hover(function(){
$('#slideshow').trigger('start'); // how do I get this to reverse instead?
},function(){
$('#slideshow').trigger('stop');
});

});

Ariel Flesler said...

Hi Kelly

Sorry for the delay. Inverting is not currently possible, though it's an interesting feature.

I'll have it in mind, can't be done right now :(

Tim said...

hi folks,

i have a problem with a horizontal scroller, my problem is that 4 li items are visible at one time and i want to scroll just 1 item each time, at first i have to click 2 times to scroll the first item and after position 8 the last list item is visible, but i can click 3 times more and if i want to go back i have also to click 3 times before the the items scroll. any suggestions?

Demosite: http://dgpvision.secondred-elab.de/

Thanx for Help

Ariel Flesler said...

Try writing your own call to the plugin. You're using a bunch of settings that you probably don't need.

Aamir Afridi said...

@Tim
Just to let you know that add two arrows for next and previous with jQuery as if you disable javascript, these buttons/arrows are useless

Aaron Payne said...

Hi Ariel,

First of all thanks for such awesome work! I love SerialScroll.

There is one thing however which would make it perfect.

Is it possible to somehow let the navigation know what slide you are on?

For an example of what I'm talking about you can look at the demo that you have provided.

http://flesler.webs.com/jQuery.SerialScroll/

Would it be possible to say make "section 1"'s color blue when you are in section 1 so that the view would know that they are in section 1.

Here's my the url to the page that I am wanting to do this with.
http://www.creativepayne.com/scroll
I would love to be able to let the viewer know exactly what section they are looking at while staying on the same page of coarse :)

Any suggestions or help would be greatly appriciated!

Thanks again.

Ariel Flesler said...

Hi Aaron

You can use either onBefore or onAfter.
These functions are called before and after the animation.

The given arguments allow you to do things in relation to the selected element.

Check this post for details on what each argument holds.

Aamir Afridi said...

Hi Ariel!

Can you please tell me how can i trigger the event for next and previous slides.

Lets say i have function outside somewhere in js file and will tell the slider something like:

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

and the slider will animate to next

right now i am watching your js file and i got:

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)

Please me in this, i am creating something very interesting i will show you when i finish it.

Cheers

Aamir Afridi said...

Ok Ariel!

I got what i asked in my last comment.

I got this
http://kohana.pastebin.com/m2b3b9054

Works for mouse drag across the container for next or prev

Ariel Flesler said...

Hi Aamir

What you're asking, has its own section on the docs, there's even a code sample...

here it is.

Ariel Flesler said...

Well done Aamir :D

Aamir Afridi said...
This comment has been removed by the author.
Aamir Afridi said...

Thanks Ariel :)
Its not working as expected as it jumps several steps with one drag(sometime) but anyway it was just an idea that came in my mind... :p

Ryan Evans said...

I am wondering if it is possible to update the properties of the serialScroll after it is first created. I wish to update the 'step' and 'exclude' properties to fit the current window size.

QuadBlade said...

Hi Ariel,

great plugin! I am trying to use it on a site which is currently only on my localhost. So unfortunately i am unable to show a demo of my code.

Here what troubles me: I have the following code that works well for the animation.
The only thing not working is the stop/start part on mouseover/mouseout. I have a horizontal animation which i want to stop if the user moves his mouse into the animation area. That sounds easy and works so far, as the hover-function is called on mouseover/mouseout. I can display alerts inside the functions but the animation doesnt stop or start. It animates regardless of any mouse actions...

Have you got any fast hint for me? Is there any option i need to change in order to make the mouseevent work?

Thanks in advance!

Regards
Chris from Germany :-)

$(document).ready(function(){

$('#slider').serialScroll({
target:'div.slide-viewport',
items:'div.slide',
prev:'img.prev',
next:'img.next',
axis:'x',
queue:false,
event:'hover',
stop:true,
lock:false,
duration:1500,
start: 0,
force:true,
cycle:true,
step:1,
jump:false,
lazy:false,
interval:5000,
constant:false
});
$('#slider').hover(function(){
$('#slider').trigger('stop');
},function(){
$('#slider').trigger('start');
});
});

Ariel Flesler said...

Hi Quadblade

The thing is that the events are registered to the scrolling element.
That is, the 'target' element if you do specify it, or the $('#slider') if you weren't specifying any target.

Just call trigger on div.slide-viewport.

mule77 said...

Hi Ariel,
thanks for your great plugin.

I try to use it but i have a problem (similar QuadBlade problem)

You can view my code here: http://intranet.e-xtrategy.net/test/testlorenzo.htm

I want that the scroll stop on mouse over and re-start on mouse out.

But the result of my code is:
when it is scroll right to left: on mouse over stop but not immediatly (wait same seconds)
when it is scroll left to right: on mouse over doesn't stop

Any ideas where I went wrong?

ps. sorry form my bad english

QuadBlade said...

Hi Ariel,
thanks for your immediate response! Your hint really solved the problem. It works now! Very nice!

Thanks again! I'll be reusing this component whenever possible. Especially when you keep supporting this like that!

QuadBlade

Ariel Flesler said...

Hi Mule77

Try replacing both:
$('#ElencoBrand').trigger...

For

$('#ElencoBrand').stop().trigger...

That will improve the effect. Note that when it goes left, it's not going one item at a time, it's rewinding... that means.. it's scrolling right to the first element.

mule77 said...

Thank you very very much Ariel
:-D

Christophe said...

Hi Ariel,
Thank a lot for this great code.
I've almost succeed in making it works. Juste one problem remain: when you stop the animation, on mousse over, then, when animation restart, the speed is not the one I've set up in interval(5000), but, very faster, like 1000.
Here is the demo : http://www.pourlesenfants.fr/index2.php
Thanks a lot for your help in advance.

Ariel Flesler said...

Hi Christophe

That is natural, the specified duration is kept, but the distance is longer than usual, so it goes faster.

You can remove the call to .stop() and so you'll let the current animation end before stopping.
You should set the step to 1 if you haven't so the distance won't be that far.

Christophe said...

Thank you for your quick answer !
I've put step on 1 and remove .stop() but it doesn't change, even if I just put two items to reduce the distance.

Here is my code:

jQuery(function( $ ){
var intval = 5000;//how often to autoscroll (in milliseconds)

$('#slideshow').serialScroll({
items:'.case', prev:'#scroll a.back', next:'#scroll a.next',
axis:'x',
offset:0, start:0, duration:1200,
force:true,
stop:true, lock:false,
cycle:true, interval:intval, step:1,
jump: false
});

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

});

Thank you ;-)

LM said...

Great plugin!

Still, I don't see any solution to make it scroll in one direction only, this means without scrolling back. It should just repeat the items again.

Hmm, just have an idea. With the onBefore function you could know, when you reached the last element. Then you move the topmost element to the bottom via jQuery. Would the scrolling continue then with "lazy: true"?

Ariel Flesler said...

Hi, it will work, but if you remove an element from start, it will pull all the rest back.

This can be achieved by cloning or by setting a dummy element in place of the one you remove from start, that has the exact width/height.

Alexia said...

Hi ariel,

Still wondering about my problem ;-)

http://www.pourlesenfants.fr/index2.php

I've put step on 1 and remove .stop() but it doesn't change, even if I just put two items to reduce the distance.

Here is my code:

jQuery(function( $ ){
var intval = 5000;//how often to autoscroll (in milliseconds)

$('#slideshow').serialScroll({
items:'.case', prev:'#scroll a.back', next:'#scroll a.next',
axis:'x',
offset:0, start:0, duration:1200,
force:true,
stop:true, lock:false,
cycle:true, interval:intval, step:1,
jump: false
});

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

});

Thank you ;-)

Ariel Flesler said...

Hi Alexia

Sorry, can't find the previous comments (deleted?).
Please contact me by email and we'll figure this out.

vanceingalls said...

I've created a one line side scrolling news ticker. How do I make it go in only one direction (left to right) and start from the first item again once it's reached the last one (a continuous loop)?

LM said...

Ha, this problem reraises again and again like a zombie. ;)

@Ariel: Thx! But the number of elements would grow constantly, eventually slowing down the browser and eating up an infinite amount of RAM which could lead to a black hole that would kill us all!

LM said...

I almost have it. The last problem is that a trigger('goto', [1]) lets the script scroll to element 1 but after that it proceedes with the usual order: 0, 1, 2 and so on until the end. I thought a goto would update the internal value of pos. I expected that after a goto 1 the next element would be 2. How can I solve this?

edit (actually I deleted my previous comment): even "notify" does not help. I think I have to dequeue an event at some place.

Ariel Flesler said...

@vanceingalls

As LM said, there's no official way to do this (it's possible though).

@LM

That sounds confusing, can you show me this online ?

Due to the high demand of this behavior, I'll try to figure out the best way to do this and put it as a snippet :)

vanceingalls said...

ok, i'll figure it out myself.
Maybe you can shed some light on this though. I set the auto scroll to stop when the mouse hovers. The thing is, when the scrolling starts back up on mouseOut the speed and direction changes randomly. What setting governs this change?

Ariel Flesler said...

Hi Vanceingalls
Sorry for the delay (been busy). Do you have a demo of this ? if you want, contact me by email.
Cheers

Jason said...

Functions fine in Firefox,however in IE serialscroll seems to scroll all the way to end, not incrementally.

Troubleshooted enough to know it has something to do with my code or perhaps my other jquery scripts, but not sure what.

http://redmuise.com/newlayout4#

HELP!

Ariel Flesler said...

Hi Jason

It seems to work well for me. The 2nd widget, the one using SerialScroll, that is.

Maybe you're talking about the rest of them ? that jump by #hash ?

You could use LocalScroll on them.

As a sidenote, the problem you see could be related to pngFix. It does many destructive things when it comes to styling(and only on IE!).

You could try w/o it.

Odin said...

Hi Ariel,
Could you please write a snippet to show me how exactly to do an infinite loop ? Just like the one vanceingalls an Lm talk about.

Thx in advance

Ariel Flesler said...

Hi

I tried once, with no success. Resorted to cloning but wasn't too nice. This'd be especially hard when doing RTL or bottom to top.

Sorry, will post if I get to do it.

Odin said...

Hello Ariel,
I have tried to write one too but with no success.

See you

Anonymous said...

Great Stuff! Thanks!!

crhayes said...

Hey, I am not too familiar with jQuery but I am trying to learn. With the 'Use constant auto-scrolling' snippet what other code do you need? I created a div called 'pane' and I have three images in it, and i just want them to continuously scroll. Please help.

Thanks!
Chris Hayes

Ariel Flesler said...

You need to add the real data(settings) into the snippet(s).

Check the demos and you should be able to mix a real call with the snippet. It's just adding the custom settings(in the snippet) to a regular call.

Ron said...

Hello Ariel... I just wanted to first thank you for all your hard work. I have been searching around for quite sometime to find a solution for my new website design that would for landscape and portrait photos... I found this script can do that and much more!

I do have one tiny problem however... I want to be able to use my arrow keys to scroll thru my slideshow and I can't seem to figure out where I am going wrong can you help?

My website is: http://www.ronnatal.com

My script locations are declared on the top of the page.

Ariel Flesler said...

Hi Ron

The "snippets" are not to be included as is and along with init.js.

What you need to do is adapt the snippet code to your needs, it'll then become that "init.js".

So.. take the snippet, change the selectors to match your dom and tune up the settings (if necessary). Don't include init.js.

Ron said...

Awesome!!! Thanks so much....

I made the changes but it still doesn't seem to work with the keyboard arrows... I am probably missing a small thing... could you help out?

go to: http://www.ronnatal.com/fashion.php

Thank you again so much Ariel!

Ariel Flesler said...

In the end, when calling $pane.trigger();
You need to leave that as it was ('prev' and 'next')

Note that the navigation (div) doesn't need to be inside #slideshow. You can put it outside, if you want.

Ron said...

WOW!! that makes the combos endless! :-)

Ariel once again thank you... everything works now.

Blessings to you and the hard work you do,
Ron

Matthew said...

Hi Ariel,

I was wondering if there was any way to set a custom offset for specific items within the scrolling pane?

I'd like to introduce an image with a different width than the rest in a situation like the centered slideshow on your demos page, but with a different width that item would need a different offset in order to center properly. Any ideas?

Ariel Flesler said...

Hi, it could be done if the settings object were exposed but it's not possible right now (I might add that feature when I get some free time).

All I can think of is the option 'margin' (scrollTo's).
You could set margin to true and then it'll scroll until the beginning of the margin. That way you can set different margins and it'd do as you need.

Bixentro said...

Hey Ariel,

Before I ask, just wanted to say thanks so much for the great work.

Now onto my question ...

I seem to have hit a bug, or dont know how. I Am using an automated paginator with individual page links as well as next, previous and end and start buttons.

When I click a page link, which does a Goto X and then Notify Pos, the if I then click next, the scroller with head to the beginning or start of the list of items.

Any ideas?

Thanks Bix

Ariel Flesler said...

Can't tell without a demo. I'd advice you to use LocalScroll for the goto X links and keep serialScroll for the others.

Marcus Müller said...

Hi Ariel,

first of all thanks for your great plug-in.

In response to Kelly's demand (see above) to be able to "reverse" the auto-scrolling's direction I hacked - it really is a hack - SerialScroll a bit, see http://pastebin.com/ff5d5bd6.

So now, when used in the way Kelly wants ( $(container).trigger('startInverse', interval) and $(container).trigger('stopInverse') ), it works quite ok, if it weren't for a small pause after each scrolling step.
Maybe you can help with that. In case you need a working demo, please let me now, I'll see if I can fire it up.

Thanks in advance
Marcus

Marcus Müller said...

It's me again.

Please ignore the "if it weren't for a small pause after each scrolling step" part.

My changes to your plug-in work fine (no pause after scrolling) when used with the right settings, i.e. the "lock" parameter should be set to "false" in order to allow for queuing.

Perhaps you can polish the changes a bit and include them in your next release.

Thanks
Marcus

Bixentro said...

Arial, thanks for the reply. I was able to fix the next and previous buttons by actually specifying the navigation option.

Thanks, again!

Ariel Flesler said...

@Marcus
The settings are meant to be changed from the outside.

@Bixentro
Glad to know :)

Matthias said...

Hey Ariel,

thanks again for the great script! I implemented it for my new website. Everything works fine. There's just one issue that I can't solve, though. It deals with the hide arrows plugin. How do I have to modify the script in order to make it work for site?
Here's a link to the site:http://www.munique-design.de/munique-design/?page_id=74

Thanks a lot in advance!
Greets, Matthias

Ariel Flesler said...

Sorry for the delay, can you put the demo back up ?

Matthias said...

Hey Ariel,
sorry I moved the site to another directory.
Here's the link: http://www.munique-design.de/?page_id=74

Thanks a lot again.
Greetings Matthias

Ariel Flesler said...

Hi Matthias

Why are you calling serialScroll so many times ?
Wouldn't one be enough ?

The snippets aren't meant to be included appart, you're supposed to "merge" it into your init(.js) code.

Try starting from scratch:
http://flesler.pastebin.com/f352e8629

That should be enough, it includes the arrow hiding behavior.

Paul Hale said...

Hi Ariel,

To echo everybody else’s comments “Fantastic Plugin”.

I have setup 5 screens that populate from my server and they scroll beautifully.
My template HTML is as follows...

div id="screen"

a id="myPrev" class="prev" href="#" << Previous a

a id="myNext" class="next" href="#" Next >> a

div id="sections"
ul

li id="li1"
p id="pScreen1" p
li

li id="li2"
p id="pScreen2" p
li

li id="li3"
p id="pScreen3" p
li

li id="li4"
p id="pScreen4" p
li

li id="li5"
p id="pScreen5" p
li

ul

div

div


I would now like to add the following functionality (if possible)...

When a user attempts to scroll forward from screen 5 (li5) an Ajax request calls more data from the server, re-populates screen1 through 5 and then scrolls immediately to Screen1 (now containing new data). If possible I would like the scroll animation to go direct from Screen5 to Screen1 (as opposed to animating backwards showing all previous screens) giving the illusion that the scroll is indefinite.

Could you please advise if this sounds possible?

Also, is it possible to get hold of what link fired the scroll event in the onBefore event? Ie did the user click “myPrev” or “myNext” hyperlink? I think I may need to use the “this” object but am new to Javascript (and JQuery) and am unsure of the syntax.

Hoping that the above makes sense and you can give me a few pointers :-)

Paul.

Ariel Flesler said...

Hi Paul
About the triggering link, yes, you need to use the 'this'. It will always point to the element that triggered the scroll. Bear in mind that if you scroll by some other way (navigation,custom events) the this will be different.

As for the other thing, to scroll instantly, you need to use scrollTo.

$('#scrollable')
.scrollTo( 0, {axis:'x'})
.trigger('notify',0);

If your widget is vertical, you can remove the axis part.

Paul Hale said...

Hi Ariel,

Thanks for a speedy response.

Im a bit confused as regard to getting the element that fired the scroll.

My navigation links are...
a id="myPrev" class="prev" href="#" << Previous a

a id="myNext" class="next" href="#" Next >> a

If I put "alert(this);"
in my "onBefore" event all I get is a url being...
“http://mydevserverurl/UserControls/#”

Am I missing something?

Sorry for being fik :)

Paul.

Ariel Flesler said...

Hi Paul
Do you have this online so I can check ? you should use firebug, put a breakpoint and inspect.

Paul Hale said...

Hi Ariel,

I dont have anything online yet as im playing with this in my dev environment.

The problem was I forgot to populate the href attribute of the href (Daarr). Problem solved now.

Ps. Im loving this plugin :-)

Paul.

Paul Hale said...

Hi Ariel,

Just after a quick nod in the right direction please...

Have my scrolling working fine. I would now like to pull in extra items to scroll via Ajax.

I currently have 5 items held in an unordered list (1 x ul and 5 x li’s contained within).

I have added additional li’s to my ul container via ajax and set “lazy: true”. However, serialScroll then animates backwards through all the records I have already viewed. I would like it to seamlessly navigate to my next (dynamically loaded) li item immediately to the right.

Is this possible? Do I have to manually add my new dynamically loaded li item to $items or something?

Paul.

Ariel Flesler said...

Hi Paul

You need to add more items BEFORE it reaches the last one. You could add an empty element that matches the 'items' selector and use it as reference.

Pravat said...

Hi Ariel,

Thanx for sharing this type of beautifull and also effective scripts. But I want to use more than one serialscroller so can you please tell what to do next please Ariel it's urgent.

My script is...


jQuery(function( $ ){

$('#container').serialScroll({
target:'#sections',
items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
prev:'div.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
next:'div.next',// Selector to the 'next' button (absolute too)
axis:'xy',// The default is 'y' scroll on both ways
navigation:'#navigation li a',
duration:300,// 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)
interval:7000, // It's the number of milliseconds to automatically go to the next
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});



});

Pravat said...

But the problem is that this script only works for one scroller inside #sections

Ariel Flesler said...

@Pravat
Not sure what you mean, sorry.

matthvis said...

Hi Ariel,
great work!
One question: is there already any solution about scrolling only in one direction without scrolling back, as LM and vanceingalls discussed?
Would be very useful for me,
Thanks

Torres said...

Hi,
I have been trying for days (without success) to plug into this great script.
I wonder if you could help?
See the demo at(http://www.brthomas.co.uk/files/testscroll/ )
When a user click on an image (that is NOT above the funnel) I want the image to move to above the funnel. DONE :)
When a user clicks on an image ABOVE the funel I need it to run a separate JavaScript function that will cause a flash movie to play, (at this point id also like the autoscrolling to stop) I also need it to pass the div id (which will be unique for each div on the belt) to the JavaScript

I have tried OnBefore/After function but can’t even get them to fire? Probably due solely to my lack of understanding of javascript.

I have the JavaScript function to run a flash movie working from a text link, I just cant invoke it from the belt (when over the funnel)

Thanks

Amigo said...

I think it's not good idea to substitute 'this' in onBefore and onAfter method. What if I use object instance methods to handle callbacks, and I need 'this' to access other methods and properties of that object?

Ariel Flesler said...

@Amigo
Are you using some kind of "bind" technique to replace the 'this' of event handlers ?

If so... well, you can always add your own click handlers separately from the onBefore (that's what I always do).
Accessing the settings is, in general, much more useful.

Amigo said...

Ariel,

I'm writing a wrapper plugin based on SerialScroll and LocalScroll. And I want all callbacks to be handled by specific instance of that plugin. At this moment, I've achieved this by introducing new option called 'handler' in your plugins, and passing it as first argument in settings.onBefore.call(). I don't like this solution, so I will try to bind my callbacks separately, as you suggest.

Clint said...

Hi again Ariel,

Is there something I should be doing differently with IE to get SerialScroll to work properly?

My sample --

In Firefox, Opera and Chrome it appears to work fine. In all versions of IE (6, 7 and 8), it seems to hiccup a lot. Any suggestions?

Here's my jquery:

$(function()
{
$("#scrollme").serialScroll({
items : 'div',
duration : 10,
force : true,
axis : 'y',
lazy : false,
interval : 1,
step : 1,
lock : false,
stop : true,
cycle : true
});
});

Clint said...

In regards to my previous post...

I've updated that page a bit with some more functionality.

It looks ok in IE now (dunno?) but they're not stopping on the correct div (in IE only).

I'm setting var winner to a number (3, 4 or 5). That sets the amount of slots that are supposed to match.

Right now, I have it set to 5. So all the slots should stop on the same number. They do every time in every browser I test in except the IEs.

Could you please take a look at the javascript? I can't tell why the goto(s) are working correctly in Opera, FF and Chrome but not in IE 6, 7 or 8.

The JS file is scroll.js.

I know it's a pain, so thanks a bunch for any help you can provide.

The link again.

Ariel Flesler said...

Hi Clint

I've stared at it for quite a while and can't figure out the problem, sorry :(

Ph0X said...

i get a "w is null" error :(

Ariel Flesler said...

@Ph0x
Try with the unminified version.

canisq said...

Could i ask how to make 'next' as go to next n element?

Anonymous said...

Anyone else have an issue with over 100 items? I have constant:true however the scrolling continuously speeds up and gets so fast its a blur and causes the browser to reach 100% CPU load.

Ariel Flesler said...

@canisq
To make it scroll to the n-th item, you do must trigger the goto event (check the docs on the main post).

For example:
$('#slides').trigger('goto', 1)
That goes to the 2nd element.

@Anon
Got a link online ? it's autoscrolling ? did you set lock:true ?

morrie said...

Ariel,
So glad you're here.
I am having trouble getting easing to work with Serial Scroll. You say that all settings of ScrollTo's are available, but when I put "easing:'anything',"; into the settings hash, I get no scrolling at all. I also noticed you had simply imported an easing equation into one of your init. files, but I couldn't get that to work either. I also tried using a "document.ready" function in the head of my HTML; nada. Could you explain how/where is the best way to setup/enable/configure easing for a SerialScroll? I can't really see (duplicate) how it was done in the demo...(Maybe I'm experiencing version conflict?)

Ariel Flesler said...

@Morrie
You need to include the easing plugin and put the desired equation's name (string) into the 'easing' setting.
Check with Firebug if you get any JS errors.

Andy Levin said...

Somehow my question got deleted.....I am using the serial scroll all the variables are working except "start" any ideas or a workaround for this? It will only open up with the first element....

I appreciate any advice. Thanks.

Ariel Flesler said...

Hi, set 'force' to true.

Andy Levin said...

That was fast reply....I will try it. By the way, super cool work on this. I noticed googling jquery you come up like #5. :)

morrie said...

D'oh! (It was an older easing plugin) : {

How I got it to work was to put:
"jQuery.easing.def = "string";" right into the top of my init.js.

Next issue: Is there an easy way to put two of these into one document (without rewriting the init and CSS completely)? I tried just duplicating my "screen" element but the second copy doesn't scroll. Why? Shouldn't the binding be for all elements "#screen"? I'm confused here.

Ariel Flesler said...

@Andy
Nice, I don't see myself that well ranked, odd O_o.

@Morrie
You have to include the easing plugin and then when initializing serialScroll:

$(...).serialScroll({
easing:'easeOutBounce',
...
});

easeOutBounce can be changed to another equation's name.

About multiple calls, you can repeat ids in a page. You need to use a css class or a specific css selector.

To apply the same settings to multiple elements, you need to use the setting 'target' explained on the main post.

Andy Levin said...

Good news "force" was with me.....bad news, cleared the google cookie and you droppped in the SE.

Anyway great code, thanks, for the tip.....just looking to trap the list item on click and have it be the first object in the slider when a new page opens.

morrie said...

Ariel,
Thanks for making your time available to help us. Pravat asked this question before (maybe I can clarify): how do you get two serial scrollers on one page? For instance, I have one called "Fruit" and right underneath it, I want another(horizontal) serial scrolled group called "Vegetables". However, only the first one in the page works. I can even copy the working "Fruit" element, and paste it in exactly, but only one will scroll. What steps have to be done to make more than one (serial)scrolled element work in a page?

morrie said...

Ariel,
I guess I should rely more on your documentation. Once again, I was able to find it by reading again and again.
All I had to do was change my target in the init to div#screen (it was #screen in the demo), now all those grouped elements in div's with ID "screen" (however many) will scroll!!

Thanks again, Ariel, for great work.

Ariel Flesler said...

@Morrie
As I said a few comments above, you can't have duplicated ids. You need to use a different selector and specify a target.

andy said...

Ariel, quick question, what is the best way to use a variable for the "start" position?

ie this code stores the element "number" of the clicked item in myvariable

$('a.trap').click(function() {
myvariable = this.id;


});

How do I pass myvariable to start,, so that the slider opens up at the correct place?


I realize this is kind of a nwewbie question but I am hoping you can get me started in the right direction.

Andy Levin said...

I have really gotten all the way through this and all I need to do is use a variable for the start element......so far not sure if I can do this or if its even possible. Or do I need to somehow use conditionals....thanks in advance.

Ariel Flesler said...

Hi
You just pass put the variable as the start value... not sure how could I make it clearer. If you get me a link to what you have now, I can tell you how to modify the code.

Andy Levin said...

Hi Ariel, its probably a syntax problem, its running locally so I can't show you. But....

on document ready

$.myvariable3 = jQuery.url.param("s");

(I am get the string from the URL
http://www.wordpress.com/?s=5
for example, using the jquery URL plugin)

So that returns 5.

Then here I am trying to use the variable here:


var scrollOptions = {

target: scroll, // the element that has the overflow

// can be a selector which will be relative to the target
items: panels,

navigation: '.navigation a',

// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',

// allow the scroll effect to run both directions
axis: 'xy',

onAfter: trigger, // our final callback
step: 1,

force: 'true',


start: $.myvariable3,

offset: offset,


// duration of the sliding effect
duration: 500,

// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};


Any suggestions much appreciated I am really
really bad with jquery, maybe its just syntax?

Thanks,

Andy

marcus said...

I am hacking up the demo to see if I can get the horizontal scroll to work with divs instead of lis. It works fine if I use y, or xy for the axis, but as soon as I set the axis to just x nothing happens. Is there anyway you could show demo using horizontal scroll with divs instead of list items?

Ariel Flesler said...

@Andy
Make sure the value in the var is a number and not a string.

@marcus
The plugin just scrolls to where the items are, you need to arrange them horizontally if that's what you need.
If you need any help, try to make a demo or just point me to what you have.

Andy Levin said...

Thanks, Ariel, I accomplished the task by using some PHP instead....not very elegant but it works.

3 said...

Hi

I'm looking for some help in finding a way to automatically stop after one cycle through the slides.

Any help is greatly appreciated.

Thanks
Jani

Jason Palmer said...

Great plugin! This is perfect for what I need!

However, I'm looking for a way to "delay" the scrolling to the next element when it's enabled as a slideshow. Currently, the plugin loads the current element and then immediately renders the next one in the list, and the only configuration is the duration.

I'm looking for a way to stop and look at the current element for a set time, and then move on to the next one.

Is this possible?

I've tried doing this using the onBefore. The only way I've gotten the result I want is by having my function call a delay function - which is essentially a while loop - and that just kills browser performance.

I'd ideally like this to work using the setTimeout function, or something along those lines..

Any ideas how I can achieve this?

Thanks again!

Ariel Flesler said...

@3
You mean seeing all the items once or twice ? if once, then just set cycle to false.

@Jason
You mean auto-scrolling right ? if so, you can play with the interval setting making it higher. Lemme know if that wasn't it.

Leon said...

Hi Ariel,

Thanks for the plugin, really great work.

Sorry if this question has been answered somewhere...

I am using serial scroll to scroll through a blog post, news item by news item. The user can also use the standard scroll. What I have noticed is that if you scroll normally and use serial scroll you are taking back to the next post (from the start).

Is there a (fairly simple) way to detect where the current scroll is on within the div? So that serialscroll can move forward/backward from that point?

Thanks

DerFalscheHase said...

Hi Ariel!

I wonder if you could help me with this:

I try to replace the the container that holds my scrolling content with jquerys "replaceWith":

$(document).ready(function(){
$("#projekt").click(function () {$("#sections").replaceWith("<div id='sections'><ul><li>...</li></ul></div>");
});
});

but serialscroll won't scroll the new container.

I allready tried the notify trigger but this doesn't seem to work either.

Any comment is helpful and thanks for that great plugin!

THX,
Alex

Ariel Flesler said...

@Leon
Quick answer is no. You could use just scrollTo and use relative animations (+=100, -=100

@DerFalscheHase
Can't you keep the container and just replace the items? (try lazy:true)

DerFalscheHase said...

@Ariel
Genius! Lazy:true was working even when I'm replacing the whole container!
thx for the quick answer!

MenanaGus said...

Hi Ariel,
I really like your jquery plugins!

I've added a way to get the current item - i thought you might want to use it...

.bind('goto.serialScroll', jump ) .bind('active.serialScroll',retactive);

and

function retactive( e, button) {
if ($('input#currentScroll').length <= 0)
$(context).after('<input type="hidden" id="currentScroll"></input>'); $('input#currentScroll').val(active);
}

Ariel Flesler said...

And where does that active variable come from ? :)
The current index isn't exposed, but you can access it within the onBefore. You could also add a css class to the current element in the onBefore and that'd allow you to know this at any time.

Alex said...

Hi Ariel!
Hi guys!

I'm using this fantastic script and the pager snipplet. can anybody tell me how to update the pager when I'm changing the content inside the sections container?
I'm quite stuck an would appreciate any help. thanks!

Alex said...

Maybe I didn't explain my problem very precisely...sorry for that. I'll try again:
I'm channging the content inside my sections container (ul)(li)...(/li)(/ul) unsing this code:

jQuery(function( $ ){
$("#ref a").click(function(){
$("#sections").fadeOut(1000, function(){
$("#sections").empty(),
$("#sections").load('external.php', function(){
???
});
});
$("#sections").fadeIn(1000);
});
});

the structure remains the same but the number of li's and their content are changing.

This is why I need to update the pager (I use Ariels pager snipplet, like I mentioned above).
As I marked in the code I think I have to update the pager in the load callback but I have no idea how to do that....
Any hint is highly appreciated! thanks guys!

Ariel Flesler said...

@Alex
Have you tried setting the option 'lazy' to true? it is explained on the main post.

Alex said...

@Ariel
lazy is set to true.

here is a demo i prepared:
http://bit.ly/42qW2c

Alex said...

I finally did it! even though I think my solution is pretty dirty. I'm basically rewriting the navigation each time I load the new content. I keeping the files online, if anyone is interested: bit.ly/42qW2c

William said...

I'm sure someone has asked this question before, but I couldn't quite find it.

What I want to do is give the first element an interval until it scrolls to the next, and then a much shorter element for the rest of the elements.

Is this possible?

Karl said...

Hi!

First of all: Thanks for a great plugin!

Something I've tried to get to work is to get the current picture in my scroll to be centered in the div..

Take a look at http://karlb.no/index.php?album=musikk ... All the pictures are different width. Is there any way to set the offset in onBefore to something like: (container.width/2) - (current.width/2) to get it centered each time? or some kind of workaround?

Adam said...

Hi Ariel,

Firstly I like to say your plugins are wonderful and they look great in action.

I've been using SerialScroll on a portfolio site, but it just REFUSES to work with Internet Explorer (8 and below).

Here is a sample page:
http://sleepymeuk.dreamhosters.com/noid/reportage.html

I really need to get this working and it's driving me nuts! I just cannot figure out why it isn't working as it works fine in Chrome and Firefox...

If you could offer any assistance I would be eternally grateful.

Thanks,
Adam

Adam said...

Is there a way to make hyperlinks clickable in serialscroll while having the 'jump' feature enabled?

Anonymous said...

Thanks for this plugin. I needed to set the duration after creation (because I wanted it to scroll to the middle quickly on load and the have a longer duration for normal operation). Calling the plugin twice didn't seem to work. I patched 1.2.2 to do this. It works for what I need. Sorry, can't use pre here:

20a21
> * CC - added ability to change settings (may not affect all of them)
84a86
> .bind('setSettings.serialScroll', setSettings )
181a184,187
> function setSettings(e, newSets){
> settings = newSets;
> };
>

educational consultants chennai said...

Thanks. Great Plugin

Anonymous said...

Hi Ariel,

Thanks for the plugin. Is there some way to display list of items with offset from left side? I need goto trigger but before page loading.

I've scrollable menu items (each item is link on some page) and want to display active item in center of the menu. Smth as
$(function() {
$("div#menu").trigger('goto', [pageId]);
});
but I want move it first and then display already scrolled menu.

Thanks!

Andy Levin said...

Any simple way to display content from one of the list items outside the scroll div? I am guessing not, because when I try to use CSS, the content disappears outside of the div.....for example, a pane takes up the scroll div and I want to take element from inside the pane and have it show above the parent scroll container?

Thanks for any suggestions.

Andrei said...

Hi Ariel,

Just a quick question.

I'm trying to trigger serialScroll to scroll the window horizontally when I hover over the "forward" element, and stop scrolling on mouseout, and then scroll the other way when I hover over the "back" element.

I've managed to do this with scrollTo and a click funtion:


$('#scroll-r').click(function(){$(window).scrollTo('+=600', 800, {axis:'x'});});


but I can't seem to figure out how to make it work incrementally on hover.

TIA!

Cory said...

Hi Ariel,

I have a list of items I am scrolling through automatically. Once the list is done scrolling I would like to start at the beginning without the animation. I would like it to behave more like an infinite scroll. Is there an easy way to do this?

Also the next and prev options are great, but I am wondering if I can carryout those functions with out the animation as well.

Thank,
CG

Benjamin Allison said...

Firstly, let me just say that ScrollTo and SerialScroll are magnificent. They're so elegant!

I had them up in running in minutes. I wish more code was like this!

Anyway, I have a quick question. I need a simple way to enable or disable navigation buttons (simple "up" and "down"), based on whether the content is at the top/bottom, or not.

I envision something like this:

if (#content = at top) {
.upButton.hide();
} else {
.upButton.show();
}

if (#content = at bottom) {
.downButton.hide();
} else {
.downButton.show();
}


I'm not much of a programmer, so I'm having a tough time figuring this out... I'm sure the solution is painfully simple!

Thanks again Ariel.

Benjamin Allison said...

Hi Ariel. I found the snippet to solve my problem! It works. I just have some other questions:

1) Is it possible to fire the function contained in "onBefore," externally? I thought the trigger function might work, but I don't think it will.

2) I have several lists I'm using serialScroll on (subnavs in a menu) and I really need to have the buttons be linked to, relatively for EACH instance... I have a div that encloses the list AND the corresponding buttons. So, for example:

$('.container').serialScroll {
target:'menuList',
prev: this.menuPrev,
next: this.menuNext
}

How can I tell serialScroll to use the "buttons" that are within that particular instance (since now, with everything using classes, there are interaction conflicts)?

Sorry if I'm not being clear.

Thanks again!

felix said...

Hello Ariel,

Trying to implement serialscroll (looks like the best one on the market)... I grabbed your hover snippet to stop/start the animation on mouseovers - but something odd is happening. Everytime I mouse on and off, the scroll speeds up, after a few times it's going really really fast. Is there something I can do to keep the speed steady?

BLAINE said...

Amazingly awesome plugin!

I do however have one issue at the moment. I am making a toolbar with flyout popups. Only x amount of items are displayed at a time and the scroller ui is flanked by the next/prev buttons. However, the flyouts are wider than the scrolled li items. As such, I had to add some positioning magic to make the flyouts work with the overflow:hidden. This is working fine. However, to make the end items appear correctly within the toolbar, I added various combos of margins and padding to position the items. However, it seems serialScroll is "eating" this spacing. As such, once I scroll the first item in the list starts at the x=0 pixel coord of the scroller pane, and I need it to scroll to where it originally started.

Simple, question... is there a way to presever padding/margins on the scroller pane? As it stands, I am convinced SerialScroll destroys them.

Ben said...

Brilliant plugin ! Works great.
I have juste on issue with the lazy parameters. I use the plugin to scroll through a text-reader that can have update on the bottom to continue reading AND in the top to update text before the original content.

The lazy parameter set to TRUE work perfectly to detect new items on the bottom but fail to detect new content on top (prepend) of the target scrolling div.

To help understand think about it like that:
- my div scroll text from a book
- you can start reading the book from any chapter (chapter 7 for example)
- you can scroll down and when you reach the end the next chapter (8) will be updated with an ajax request and added to the scrolling DIV (this works perfectly)
- you can also scroll up and when you reach the top of your text the previous chapter is loaded with an ajax request and prepended to the DIV (this doesn't work even with lazy=true).

Can I fix that ?
Thanks for your help.

Andy Levin said...

Need a little help hiding the next and previous arrows, if the limits are met.....if anyone has a quick and dirty solution that works I would be much appreciative.

You can see the site at http://www.andylevin.com

Thanks

Jamie said...

Hello Ariel,

Thanks for such a great plugin, I've used it so many times for so many different things. I'm having real trouble getting it to work auto-scrolling images...
http://beta.manchesterjitsu.org
/jscript.js for the script that calls serialscroll.
/styles.css for the css.
Any help much appreciated!
Jamie

HarshDeepSun said...

Hi,
Since last two days I am trying to implement Serial Scroll as shown in demo. But there is no source code files to implement it. Please tell me where is it?

joshua_curtis said...

Hi, I was wondering if you could access the current element scrolled to as a variable?

Ben said...

Hi Ariel, Great plugin have used it a couple of times and a project came up which could really use this plugin, but I cant get it to work and firebug is hitting me with the following error.

pane is undefined
path/to/file/jquery.serialScroll.js
Line 83

Any ideas that may help??

Cheers
Ben

McJay said...

I found a bug from SerialScroll and thought to share cause it was an annoying one to find. If you use anchor without the href-attribute as the next and previous buttons, all other browsers than firefox will scroll directly to the last item no matter what.

Sophola-fi-fi said...

Hi Ariel,

I love your plugin...but a couple of questions. Is there a way to fade out the other panels except for the panel that was selected?

also, I think I read in your comments from another use about centering a panel that was selected. Any news..?

Netherscurial said...

Hello,

I am trying to use the serial scroll but I can't get it to work. I have taken the one of the demos you have and put it on my page but it won't scroll at all.

Demo is here: http://www.rosenandrosen.com/foreclosure-process2.asp

Any ideas?

ZATT said...

Ariel Flesler, you are awesome!

thats all.

Philipp said...

Hi Ariel,
I love Your plugins! Most time its a easy!
Not i tryed to test a new site
http://kga.vs1211183.vserver.de
in Opera Version 10.10 Build 4742 Plattform Linux

and scrolling doesnt work :/

every other one it tested (IE7,8) firefox safari it looks perfect

is it the browser?
if yes i will create a switch not activating serialscroll for that one, so at lease the click brings one to a new site

Andreu said...

Hi. Great plugin!

I've been customising it and I have a problem with the current position parameter of onBefore function.

Can I override the position parameter (pos)? My problem is that if I load the slider directly in a slide that is not the first one (for example, #page3) the pos parameter is still 0, it doesn't detect that the current slide is not the first one.

I need pos parameter to take the value of the current page and, the most problematic thing, maintain the value when I click next and prev arrows.

Thank you in advance!

Daniel said...

Hi Ariel,

A very useful plugin but i am having trouble in implementing it for what i require.

I have a basic HTML table which is extremely wide with columns of prices. I want the next and previous buttons to scroll horizontally the columns to reveal all prices in the hidden overflow.

Can you point me in the right direction?

Christopher said...

Is it possible to specify the duration of the cycle animation?

Xiao wei Li said...

Hi, thanks for the awesome script
I just got one question. How can I add a fade out fade in with every slide. So it fades out when it starts moving and fades in when it is close to stopping.

James said...

Hi Ariel

I'm using this very useful script for a site, but I'm finding that it's not possible to stop the serialScroll animation, once it's been started.
Demo here : http://squeeze-hosting.biz/ssdemo/
I've tried using the "hover" snippet (it's in there) and various other methods, but it just will not stop moving.
Ideally the 5 second rotation of the 3 panels would stop if a navigation link was clicked, or the mouse hovered over the container - neither of which happens.
I can only assume I'm missing something so blatantly obvious that I'm going to look a total retard when you point it out to me!

Matt said...

Can you jump to an element immediately on page load without clicking any link?

archVille said...

Hi there.
I have downloaded jQuery.SerialScroll
Great piece of work.

How can i use more than one serial Scrollers in the same page???

I have a tab panel component and i want 4 serial scrollers in each tab pressed to show.

I appreciate your help.

Dan said...

Hi Ariel,

Thanks so much for the plugin, it's been really useful.

I'm having a bit of a problem though. This is the demo I've created to illustrate my point

It all works fine until I try resizing the window on anything but the first frame, and then the list items are expanding but not staying centered.

Any help would be greatly appreciated!

Thanks,
Dan

Kanger De Manga said...

I was wondering is it possible to use this with other jQuery plugins. I have a site which uses Slide Deck lite (not sure it's actually a jQuery plugin at mo) and within one of it's slides I wish to use Scroll Serial to create a horizontal sliding portfolio. I can't seem to get it to work, not sure if it would be a javascript conflict?
Any thoughts appreciated.

Jacob said...

hi, thanks for the great script. I have a problem. I am using serial scroll to perform a constant scroll but when it gets to the last item in the list I wish it to continue straight to the first item in the list so it gives a 'loop' effect rather than bounce and reverse. I tried setting cycle to true but this doesn't seem to work can anyone help?

Liam said...

Hi, Ariel.

I love the plugin, and it was very easy to implement. However, I was wondering if it was possible to show the overflow.

In other words, i want to have a big bar of images that goes all the way across the screen (and beyond) but they center at a certain point.

Possible?

Thank you for your help.

briznad said...

Hi Ariel,

Thanks so much for your plug-ins. I'm using ScrollTo and LocalScroll to power some interesting scrolling behavior on my site.

However, while trying to get SerialScroll to power a slideshow I've run into some inconsistent behavior when using any Webkit-based browser, such as Chrome or Safari, on my Mac or on my phone (Palm Pre). What I'm seeing is that when I click the previous or next arrows the slideshow automatically scrolls to the last element. I've tried all of the settings and can't figure it out. The slideshow works fine in Firefox, and your Demo works as expected in Chrome, so I don't know what's going on. I've made a little demo of this. It's a zipped folder with all relevant files so you can see my setup:
http://www.zumodrive.com/share/6Gv4MDk1OG

Any help would be great!

Thanks,
Brad

Rebelj12a said...

Anyone have some tips or suggestions for fading out the current element, fading out the next element, then onAfter fading it in. So far everything i try putting in there kills the script.

Karl said...

ahw I don't know what's wrong with my example but It seems like the JS isn't working... I looked hours for the problem but I can't find it... I also tried to rebuilt that regular Demo, but it doesn't work with the same code... I stucked... is there anywhere a downloadable complete Demo?

Richard said...

Hi Ariel,

First of i have to say this littel script is absolutely wonderful, however i have a question, i'm completely new to jquery and any sort of coding, but i've got your slides working on my page, however i want to be able to navigate the slides from links in a completely seperate div outside the main div for the slide control, is this possible? if so any chance you can explain how?

Thanks

Arnold said...

really nice image slide, im using it here iamarnold.com

hadhadhad said...

Sorry Ariel but Im totally lost.. I've ended up trying to completely recreate the first part of your serialScroll demo and nothing moves an inch :-(

Have a look..

mentalindustries.com/scrolltest

Any pointers would be very apriciated since I could make good use of this feature..

Thanks mate

kcfilip said...

Hello, love the plugin!
But I have a problem, how to target all links on the page with seriallscroll?

I managed to this with localscroll, but i wanted to add prev and next button, my init.js was:
$.localScroll.defaults.axis = 'xy';

$.localScroll.hash({
target: '#slike',
queue:true,
duration:1000
});


$.localScroll({
target: '#slike', /
queue:true,
duration:2000,
hash:true,
onBefore:function( e, anchor, $target ){

},
onAfter:function( anchor, settings ){

}
});

wendyplante said...
This comment has been removed by the author.
inder said...

Hi Ariel,
Gr8 post bro,

hey i have an question, i want to make it pause on mouse over,
Is it Possible here to Pause this on mouse over.

Thanks and Regards
Inderjeet Singh Khalsa

Nolza said...

Hi Ariel,

I'm having a bit of trouble... how can I randomly sort a list of items li on a button click?

thanks in advance

Owen said...

Hi Ariel,

Lovely stuff.

What I am attempting to do is to combine the LocalScroll - AJAX demo's functionality with the expanded features of SerialScroll, notably interval & the absolute prev/next.

My SerialScroll test works as expected statically(example), but, when I load items in via the method from LocalScroll - AJAX Demo (ajax example), SerialScroll doesn't seem to recognize the new items, with lazy:true of course.

Now, I was about to try using livequery but I've been reading through the comments and you continually point to lazy:true as the solution to ajax problems. So I wonder, what is it about lazy:true's functionality that I am not getting? I was figuring at least the absolute next/prev buttons should work immediately.

If you would, take a look and please let me know where I am mislead.

Many thanks,
Owen

Diogo Lopes said...

Hi! Great plugin.

I'm using "interval:2000" for autoplay in my presentation. It works fine.

But I need to have some slides with differents interval.

I'd tried:
$('#sections').trigger( 'stop' );
$('#sections').delay(10000);
$('#sections').trigger( 'start' );

It works but the next slides go faster. Any suggestion?

peter said...

I have a horizontal scrolling site.

I have seperate divs absolutely positioned in a long row.

www.petergaskell.co.uk/tests/uptodate/index.html

Im in a real pickle i just can't work out how to apply serial scroll to this.

I basically want two arrows either side of the page with previous and next so that safari users can navigate.

I just dont know what to call as my elements or what should be scrolling as most of the examples are for something inside a pane and this doesnt really apply.

Please help :-)

By the way the uploaded version hasn't got local scroll etc on it..trying out a few alternatives.

boony said...

Hi Ariel,

We have successdully implemented your all so awesome SerialScroll!!! nice job!!!!

However we do have some questions, we were wondering if it is capable to be implemented as a background which scrolls the way you define it.

Have a look at our website @ http://www.shinajii.com

Thanks,

Team Shinajii

morrie said...

I am returning to my site after awhile to add a slideshow, using Serial scroll (simple, timed animation is fine for now). I already have quite a bit of script running, and some older versions as well. (I have two Serial-scrolled elements, and other stuff). I can't seem to get the slideshow to start once I have all the elements in place. The trouble is, I can get it to work on its own, but not in the desired page. I am also daunted by the fact that the demo does not work as it should (timed animation).
Here is what I am trying to do:
http://www.brewstergraphics.com/web15a.aspx What's the easiest way to sort this out?

scott said...

Hi Ariel...

wondered if you check this for me...

http://www.doublecream.co.uk

...just starting with jquery and really want to use use your brilliant plugin to scroll the page as a whole. I've followed the instructions but must be screwing something up somewhere!

I'm trying to get 2 things...

1. The page automatically scrolls the x axis to 50%,

2. The little grey arrow links scroll the page to 0% and 100% respectively.

Would you check the source code on the links and in the autoscroll.js file..?

Last thing... man, you are a really generous guy.. I saw how much support you provide on your blog...wow!

Thanks in advance,

Scott

scott said...

Hi Ariel...

**UPDATE**

Sorry man, but thought i'd best update as have now managed a bit of progress...

script in autoscroll.js is now working, except the page seems to jump to the 50% x-axis scroll position and I'm trying to get it to animate to that position...

...do I need to use a 'duration' setting, if so could you post a code sample that shows the syntax for passing arguments to the function...something like...

$.scrollTo( 'x', 'y', {axis:'x'}, {easing:'option1/option2/option3', duration, etc.} );

In my previous post I referred to little grey arrow links, but I've had to remove them for now, so don't want to waste your time looking for them!

Really appreciate any help you can give me...

cheers,

Scott

Fishie20 said...

Ariel,

First off thanks for all of your effort! This really is a nifty script for scrolling.

I was wondering if you have ever run into the issue of creating a dynamic 'ul' using json, and while the code produces an 'ul' in the correct location, the plug-in doesn't scroll? Using firebug I can see the code that my json script produces, and if I copy that code into the "sections" div, then I can scroll using the arrows.

I have on a personal server an example of both the working (static 'ul') and non working (dynamic 'ul') that you can look at if you wish.

not working:
http://www.fishiestudios.com/rebel2/test.html

working:
http://www.fishiestudios.com/rebel2/test2.html

any help on how to make the first one work would be greatly appreciated. I ultimately will have various 'ul' from various photo sets that can then be changed via flickr.

Thanks in advance!

David

David said...

Great plug-in, I have used it many times on different websites.
Recently I have had a picky client that does not want the scroller to scoll on initial page load. So what I have done is:


var startDiv = $('#... div.start');
var $start = $('#...div').index(startDiv);

var scrollOptions = {
....
start: $start,
force: true,
duration: 1,
easing: 'swing',
onBefore: initial
};



function initial(){
this.duration = 500;
return;
}


This works quiet well, however on the 1st click (next/previous) the scoller duration is set at 1.

Is there a different approach, I can use. To have an initial on page load duration = 1. AND then the normal duration of 500?

Thanks

flugga said...

I need some help. I have tried to use serialScroll on many occasions and have given up because I could never get it to work. I'm sure it is something simple that I am missing. This is my page:

http://new.paceandpartners.com/index.html#how

LocalScroll is successfully working for the main navigation. And I am trying to use SerialScroll for scrolling the text on the page, but with no luck.


$('#scroll-content').serialScroll({
items:'div',
prev:'img.down',
next:'img.up'
});

flugga said...

Nevermind. It was a CSS issue.

Kristian said...

Hey there Ariel,

First, thanks so much for the excellent, excellent plugin, it's absolutely brilliant.

That said, I've hit a wall that I'm hoping you might be able to knock down for me...

I have a project that has numerous instances of scrollable lists within it.

Each individual list has below it a series of dots, whose css classes I need to change such that each dot highlights for each panel the user can scroll to.

I've attempted to do this by treating these dots as navigational elements within your plugin, however, my problem is this...

I can't get each series of dots to behave relatively to only the instance of scroller they are contained within... scrolling panels on any of the lists all effect only the dots meant for the first list.

Any way I can accomplish what I'm after? (And my apologies if my explanation is poor... it's for a project I can't put publicly available, but I can certainly email you a link if need be...)

Thanks so much! Some of my code is below...

jQuery('.scrollcont').serialScroll({
target:'.yearcatcont',
items:'li',
prev:'a.prv',
next:'a.nxt',
axis:'xy',
navigation:'.panelnav a.ir',
duration:700,
force:true,
onBefore:function( e, elem, $pane, $items, pos ){
jQuery('.smalld a').removeClass('smlact');
jQuery('.smalld a').eq(pos).addClass('smlact');
e.preventDefault();
if( this.blur )
this.blur();
},
});

Maverick - Kumar said...

how can i increase the number of images per slide in the SerialScroll example...right now it shows 3..i need to show 7

Subrata Sen Gupta said...

Hi Ariel,
I used the library for scrolling a number of "li" items with pagination. I used the following settings

items:'li',
prev:'#prev a.prev',
next:'#next a.next',
step: 6,
offset:-15,
start:0,
duration:1200,
force:true,
stop:true,
lock:false,
cycle:false,
jump: false,
exclude: 3

I want a mirror effect of this settings to place them in an arabic site.

Please help.

«Oldest ‹Older   1 – 200 of 226   Newer› Newest»