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.
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.
$(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 'auto' 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
- Project Page
- Demo
- jQuery.ScrollTo
- jQuery.ScrollTo's demo
- Doctorate on jQuery.SerialScrollnew
- Changelog
Downloads
- jQuery.SerialScroll 1.2.1 Zip(all files and docs)
- jQuery.SerialScroll 1.2.1 Source(to learn or test)
- jQuery.SerialScroll 1.2.1 Minified(recommended)
- jQuery.ScrollTo 1.3.3 Source(to learn or test)
- jQuery.ScrollTo 1.3.3 Minified(recommended)
90 comments:
Excellent tutorials and examples! I've been trying to do something like this myself!
Okay, that's pretty sweet. Thanks so much for your great contributions, Ariel!
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
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.
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
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
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?
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
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.
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!
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...
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!
@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!
@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.
Excellent work, man! I created the feature request already but you can then just ignore that... ;)
Again, great stuff! :D
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.
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
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?
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.
Wow. Thanks for the quick response Ariel! Your rock. Works like a charm.
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.
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.
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...
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
Will do... By the way, I had to add the following line of code to 94 of serialscroll:
e.data = Math.max(e.data +actual,0)
This addresses a situation where the actual is less the amount to step (i.e. step -3 prev while at index 2).
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.
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!
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
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!
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
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.
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
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
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!
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.
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 ?
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
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 !
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.
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 :)
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!
@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
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
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.
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});
}
});
Hi Niko,
Try this:
http://flesler.pastebin.com/f79871afa
Pastebins look so much better :)
Cheers
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
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
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.
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/
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!
@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
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.
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
I've done a pretty simple cargo-cult of the demo to provide navigation for a generic questionnaire application I'm developing (example temporarily deployed here).
Anyway I'm wondering if there's a straightforward way for me to move the animation forward when the radio button is clicked (prefereably after a short delay), as well as retaining the function of the back/forward arrows.
Thanks for the work on this, it's just what I need :)
Hi Kieren
If it's simply forward, you can include the radio/s in the 'next' selector.
If you need a delay, or some previous checks, then you need to bind yourself, to the click or change of the radios, and inside,
use the $().trigger('next').
Check the docs up there, check the event triggering part.
Hi there,
I'm struggling to achieve an effect: a continuous infinite scrolling (without a scroll back to the first item).
I have been playing with the onAfter to try restart/reset the scroll, but without success.
http://nigelcoates.jmdentand.com/test.html
Any suggestion?
Hi Jean Michael
SerialScroll is not meant for endless scrolling, there are many things that can be achieved, if you code a little (which I encourage). But it won't swap nodes and stuff like that, I'll check the demo later, and will get back to you if I figure something out.
Ciao
Hello,
Nice plugin generally. I like the way you can achieve so much animation with relatively little code. I wish I could do that too! I have been trying to do just that for the last couple of days with no luck yet.
You can see what I am doing at http://carli2.collectivecolors.com/paintings.
Essentially, I have a div with id #taxonomy-gallery-teasers that contains many divs with id's and classes. I want to be able to scroll to one of the inner divs when one of the thumbnails at the top are pressed.
My js code currently looks something like this:
$(document).ready(function(){
$("a.gallery-image-thumbs").click(function(){
var these_nodes = $('#taxonomy-gallery-teasers');
these_nodes.serialScroll({
items:'div.gallery-disp',
axis:'y',
});
});
});
I hope you can help me understand what I am doing wrong.
Best regards, Derek
Hi Derek
First of all, you aren't including the plugin, nor ScrollTo that is a dependency. That's why calling $().serialScroll fails.
Out of that, I don't quite get what you are trying to do.
SerialScroll is not meant to be called in the moment you want the scrolling animation to happen. That's what ScrollTo is for.
SerialScroll needs to be called when the page loads, it will prepare all the click binding and stuff.
Check the demos carefully.
Cheers
Hello Ariel, thanks for the quick reply. Its curious, in your demo I see only scrollTo-min and serialScroll-min being called (as well as jquery obviously). I figured that was all I needed to add...
At any rate, What I am trying to do is allow people to click on one of the thumbnails, which then automatically scrolls the "pane" to the appropriate location.
I have tried using scrollTo before however I was under the impression that it didn't work when overflow was set to hidden.
Thanks for the help.
Best regards, Derek
Hi Derek
>>I figured that was all I needed
Indeed, those are the only files you need, but you are not including them, check again.
>>I was under the impression that it didn't work when overflow was set to hidden.
Wrong. It works in those cases too. Actually, I don't see any scrollbar in the demo of SerialScroll, and it does use ScrollTo.
Based on what you are telling, LocalScroll might be better for this case, or even using both (LocalScroll and SerialScroll).
Please check the demo/s. If you need help, feel free to contact me by email or IM.
Cheers
Just wanted to thank you for your wonderful scrips.
Keep up the great work.
Cheers.
Thanks Andrei!!
I love this kind of posts :)
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.
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
Hi Ariel, I just sent an email to your gmail account, thanks!
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!!
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
ah. looks like it's been mentioned before. thanks.
.. and thanks for being so patient & helpful with everyone and their questions!
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
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
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!
Hi Ben, thanks
That will require the mousehold plugin for jQuery and in the callback, you use
$('...').trigger('next');
Ciao
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
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
Thanks! I wonder if it would work with your rotater script?
VERY clever, never thought about that :)
Let me know if you do use it.
Thanks
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.
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
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?
Remove the part that says:
force:true,
It worked! You rule. Thanks
I want to scroll item from bottom, and stop when mouse over. Please help me.
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.
@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
Hi, I'm trying to make an image scroller based on the location of the mouse. Imagine a single row of images. As you move your mouse to the right, the images scroll faster to the right and as you move your mouse to the left the images scroll faster to the left. I was thinking of using autoscrolling but the problem is I'm not sure if you can change the direction or the step size after configuring it. Thanks!
Hi
I don't think this is the plugin if you want to use acceleration, as it uses item-based scrolling.
As for the other thing, you put 2 invisible divs, one on each side of the container, and when the user hovers them, it'll scroll one item.
For that, you set the option 'event' to 'mouseover', 'mousemove' or 'mouseenter'. See which one fits you better.
Cheers
Hi Ariel,
Hopefully an easy one for you; I would like my scroll to start somewhere different when the page loads. At the moment it defaults to the first item in the list.
How would I force it to show http://www.nmmc.co.uk/20century/#1968-04-23 on page load? (http://www.nmmc.co.uk/20century)
Any help greatly appreciated as always - Jock
Use the option 'start'.
Check the docs please.
Cheers
Post a Comment to get help, please try to prepare a demo.