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

108 comments:
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.
"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.
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.
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!
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.
@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.
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.
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.
@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!
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.
@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.
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!
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!
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
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.
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
That sounds cool!
Found some more uses for the plugin I'll play with for now.
Thanks for the quick help!
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.
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
Ariel, please, write text scrolling example, which using your plugins, like
easyscrolling
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
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!
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
Added a snippet for constant auto scrolling. This was requested many times in the past.
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.
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.
I was about to post the same, till I read your second post.
Glad to know that someone actually reads the docs :)
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');
});
});
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 :(
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
Try writing your own call to the plugin. You're using a bunch of settings that you probably don't need.
@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
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.
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.
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
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
Hi Aamir
What you're asking, has its own section on the docs, there's even a code sample...
here it is.
Well done Aamir :D
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
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.
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');
});
});
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.
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
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
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.
Thank you very very much Ariel
:-D
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.
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.
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 ;-)
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"?
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.
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 ;-)
Hi Alexia
Sorry, can't find the previous comments (deleted?).
Please contact me by email and we'll figure this out.
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)?
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!
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.
@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 :)
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?
Hi Vanceingalls
Sorry for the delay (been busy). Do you have a demo of this ? if you want, contact me by email.
Cheers
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!
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.
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
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.
Hello Ariel,
I have tried to write one too but with no success.
See you
Great Stuff! Thanks!!
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
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.
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.
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.
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!
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.
WOW!! that makes the combos endless! :-)
Ariel once again thank you... everything works now.
Blessings to you and the hard work you do,
Ron
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?
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.
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
Can't tell without a demo. I'd advice you to use LocalScroll for the goto X links and keep serialScroll for the others.
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
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
Arial, thanks for the reply. I was able to fix the next and previous buttons by actually specifying the navigation option.
Thanks, again!
@Marcus
The settings are meant to be changed from the outside.
@Bixentro
Glad to know :)
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
Sorry for the delay, can you put the demo back up ?
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
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.
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.
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.
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.
Hi Paul
Do you have this online so I can check ? you should use firebug, put a breakpoint and inspect.
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.
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.
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.
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 ){
}
});
});
But the problem is that this script only works for one scroller inside #sections
@Pravat
Not sure what you mean, sorry.
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
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
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?
@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.
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.
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
});
});
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.
Hi Clint
I've stared at it for quite a while and can't figure out the problem, sorry :(
Hi
I'm trying to use your plugins with no success.
Scripts are loaded inside head tag:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
jquery.scrollTo-1.4.2-min.js
jquery.serialScroll-1.2.1-min.js
// From demo
$('#nscroll').serialScroll({
items:'div',
duration:2000,
force:true,
axis:'y',
easing:'linear',
lazy:true,
interval:1,
step:6
});
In the html section:
< div id="nscroll">
< div>11111 aaa< / div>
< div>22222 aaa< / div>
< div>33333 aaa< / div>
< / div>
What am I missing here? apache logs looks fine, no 404's complains. Items apear on page but there's no scroll.
Cheers
holo
Buenas, yo quisiera saber si con su componente podemos hacer que el scroll active automáticamente, pero que se detenga si presiono un botón de PAUSA y siga si vuelvo a presionar ese botón otra vez. Se podrá?
Hi Ariel,
This a great script. I have one question with regards to auto-scrolling. I was wondering if there is a simple way to iterate in the reverse direction when the scroll gets to the end.
Thanks for the help!
Hi! The script is really great. What im missing is some easy option to center the every scrolled element.
I have a horizontal list of images with different widths and managed to center the first one, but then the others have the same offset and are not centered...
Post a Comment To get help prepare a demo.