I added a major release of jQuery.SerialScroll. It doesn't have that many changes, but I really feel it made one step ahead.
Optimizations
- The animation is skipped if a bad position was received or it's the same as the actual. Saving some overhead.
Changes
- Changed the licensing from GPL to GPL+MIT.
Features
- The plugin binds 3 events to the container to allow external manipulation. They are clearly explained in the main post, please check it.
- Added 2 more arguments to the onBefore callback: actual item collection, index of the actual item in the collection.
- Added option 'interval', can be a number specifying the amount of milliseconds for autoscrolling.
Links
Downloads
- jQuery.SerialScroll 1.2.2 Source(to learn or test)
- jQuery.SerialScroll 1.2.2 Minified(recommended)
- jQuery.ScrollTo 1.4.3.1 Source(to learn or test)
- jQuery.ScrollTo 1.4.3.1 Minified(recommended)
115 comments:
Isn't there any way to get a cycle to work which constantly - as the word says - cycles around the images of a slideshow. I'd call the behaviour it has at the moment "rewind=true" not "cycle=true"...
Is there any trick to get a constanly cycling slideshow to work - even better without delay between moving the pictures?
Hi
The endless scrolling requires to clone or move nodes. The plugin doesn't do that (and won't).
For constant scrolling with no stops, you can set the step option to the amount of items - 1, that's the closest you can get with this approach.
Cheers
Thank you!!! It was the comma's fault, and it's time to go learn JavaScript...
How do your demo navigation links work for section 1, 3, 5? I don't see how each link is related to the target? - Thanks!
Hi
They're linked by index. Using the option 'navigation'.
If you need a more "consistent" relation, you can use LocalScroll for that part (also on this blog).
That will link them by id/href.
re: navigation linked by index - the demo has 5 scrolling "sections" but only three navigation links, pointing to the first, third and fifth items; so where in the demo is the index set for nav link #2 to scroll to item #3? ... Regards, Phillip
It is by index. But it will do rounding if you have less links than panes.
rounding ... OK ... thanks, Phillip
Hi Ariel,
I'm trying to use your serial scroll to accomplish scrolling on rollOver, much like this site.
http://inside.nile.ru/#years-2008/
Can you help out?
Hi
You need to set 2 transparent divs, one on each side. Set them as 'prev' and 'next' respectively and set the 'event' setting as 'mouseover'.
That will scroll like that, only that won't go on scrolling automatically.
For that, you need a "smarter" mouseover that keeps triggering each X seconds. I think there was a plugin for that.
Thank you for such a wonderful plugin. By the way, I have figured out a way to get a real 'cycle'. Will post here if anyone need it.
I upload a demo here. It's not perfect though. But plz see it and make it perfect if possible. Thanks
www.budsicecream.com.vn/demo/demo_cyc
le/serialscroll.htm
I only made changes in jquery_serialscroll.js and the html file
Finally, I make the 'cycle' working like I want.
budsicecream.com.vn/demo/scroll.htm
@Anonymous
The noConflict needs to be called after including all the plugins.
@Hai
Seems pretty neat, it's only a bit quirky when going backwards. Good job.
@Niclas
The server is giving me an internal error.
thanks for the reply :)
yes I tryed localscroll but, it won't scroll too :(
however I added items to my demo but it doesn't resolve the problem :(
Hi and thanks for your great plugin.
I got the problem that my pages (doing paging) have different height. In a previous comment you recommend to use onBefore to adjust the height. Imho it looks ugly when first adjusting height and then scrolling. Sometimes the height-adjustment could even be out of the screen, so the user wont see it.
If I do it afterwards I got the problem that if the current canvas is longer than the last page, it wont scroll correctly to it.
This might be solved with a dummy-div or something.
Anyway, is there a option for joining the scrolling animation an do the height-adjusting as well as "scroll to top" simultaneously?
@Lars
The plugin doesn't include stuff like this "built-in". As you said, Any parallel animation can be initiated from within the onBefore, or even a new click handler... you problably need to tune both animations' settings to synchronize them correctly.
@Jono
Oops, I missed the comment. I checked the demo and all the initialization code is commented out...
Hi
your plugin is great, thank you very much for it. But there's a question...
Is it possible to use SerialScroll on one content-div twice? I mean, first navigation panel scrolls content-div through items-A and there's a second navigation panel with I'd like to scroll the same content-div but through different items let's say items-B?
Cheers
It should work alright. I intentionally ensure it'd basically work with several calls.
Just call the plugin twice with different navigation/prev/next/items.
ok I know the reason. But I need your help to solve it.
this line is the problemmaker ;)
$contentDiv.trigger('goto', 0);
Since there are two sets of items. It doesn't know which item[0] should it scroll to.
Yeah, that's why I said "basically".
If you intend to use the custom events, then that'll be a problem.
I only add them for the first call, else it'd go mad.
At this point, I think you need 2 containers or a similar workaround :)
Fab plugin Ariel... I got it working on 2 sites.
Now I want to make the nav menu on 1 of the sites scrollable too using prev/next:
See http://basher.biz/dreamloft/web.htm for an example.
Clicking on each nav thumbnail brings up the desired slider underneath, but I just can't seem to get the prev/next buttons to move the nav along (there are 2 more thumbnails out of view).
I've tried specifying "items" as both the individual LIs in the nav, and also just the UL.
Am I missing something obvious?
YO ARIEL, thank you so much for building this. you rock
Ariel,
I have alomost fixed the scrolling navigation problem I reported last week.
See "http://www.basher.biz/dreamloft/web.htm" for an example.
Thumbnail navigation scrolling pane works fine in FF and IE7/IE6.
But not in Safari and Google Chrome:
The "next" arrow/button works OK the first time it is clicked - the nav pane scrolls to the next set
of thumbnails - but clicking the "prev" arrow doesn't scroll back again.
Any ideas??
The demos are back
@Basher
I don't know what's the problem, please put the unminified versions and I'll re-check.
Thanks Ariel.
I have now uploaded unminified versions of ScrollTo & SerialScroll.
I've changed the site since I last posted, so please now look at this page instead:
http://basher.biz/dreamloft/pics.htm
@Basher
It's pretty odd actually. The scrollLeft property of the element IS changing when scrolling backwards, but it's not reflecting that, maybe a browser quirk?
It's something that has to prolly be changed within the css, so that the browser won't go mad.
Can you try switching the doctype to transitional ?
Thanks Ariel,
I've changed doctype to transitional.
I did do a test whereby I took just the nav scroller code and dumped it into a new html page with no formatting (e.g. no floats, etc) - the arrows still didn't function correctly.
Also, I've just noticed that scrolling forward on "pics" page, a whole panel is missed out - there should be 18 pics in total, but Safari just renders 14.
And on "scribbles" page, Safari only renders 13 instead of 21.
Safari is jumping to the last pane after showing the first 3 correctly.
Sorry to be a pain...!
Ariel,
Sorry for the confusion.
Try basher.biz/dreamloft then select any of motion/photos/scribbles pages.
Or try the "live" site - thedreamloft.co.uk.
Not sure what's going on with the formatting on 2 of the pages - doesn't happen on live site - but that's for me fix!!
Cheers for pointing it out.
Hi
This is a brilliant plug-in, thanks. I have a question though.
Is there any way to add multiple carousels to a page without giving each one a seperate ID? I currently have several on one page and have targeted them using the class name, but when I click a button all five scroll simultaneously.
Thanks!
@Basher
The property that is annoying the browser is the display:inline on #portfolioNav. With that removed, all works well.
@Irishsteve
Yes, that's why the target option is there. If you specify a target, then each matched node will become just a context to each one of prev,next,target,items selectors. That means they become relative, though reusable.
Many thanks Ariel... how random, eh!
Happy new year.
Hi Ariel, for the life of me I cannot get this to work, and it looks amazing, really excited about using it. I mocked up something quickly and I was hoping you could give me a pointer to what is wrong..
http://twittersuite.maestroresults.com/ariel/
Thanks Ariel, wish I had your skills.
Hi,
Great work, I love this plugin. I am using it for a Coda type slider/slideshow. Works perfect but I just ran into a bug by adding a simple anchor <a href="#someAnchor"> to the page (unrelated to the slideshow) On clicking that anchor i get: error on line 184 of SerialScroll Error: elem is null elem = elem.parentNode;
Have you run into this? Any ideas? Thanks again!
Ariel thanks a ton for your work. You are a really amazing programmer. I truly appreciate your work.....however unfortunately the documentation is really terrible. Just examples no code snippets. When should I use scrollTo vs serialscroll vs localscroll...all the examples look the same and there is no code provided for any of then??? I know you can just view your source but... Why can't you post a simple example with js and html for each plugin. It would save you thousands of help requests. Almost every other jquery plugin seems to manage to do this. Every time I use this plugin it takes 30min to an hour to figure out/remeber the syntax for your methods....jeepers
Hi! I have a quite strange question about this great jplugin. I'd like to make just an ordinary menu using this plugin, where after clicking the link (just "a href" link) in the "ul list" you go to the next page. Now, after clicking on the link in menu I have nothing :-( It just stands still and doesn't do anything...
@cmacG1970 and @Bartłomiej
Got a demo online ?
@no one will read me
I can accept that the demos are not the greatest, and yes, you're meant to check the init.js.
I'm quite slow at html/css so many demos would take me too long.
On the other hand, I think the documentation (blog post) is really clear and descriptive for all three plugins.
I'm sorry to hear it's not clear enough for you.
" #goto.serialScroll
Scrolls to the specified index "
Is there a way to do this but without the scroll? I want to go straight to say image number 10 but I don't want to scroll to it, I just want it to start there.
?
Cheers
$('#container').scrollTo('li:eq(9)');
You can of course add settings.
Thanks for your reply! It's weird. I tried your suggestion and also took a look at the scrollto demo. None of the following did anything, except the last line, which isn't scrollTo. No error is thrown though... it just doesn't move the lis at all.
$('#slideshow').scrollTo( '+=340px', { axis:'y' } );
$('#slideshow').scrollTo( 150, 800);
$('#slideshow').scrollTo('li:eq(9)');
$("#slideshow").trigger( 'goto', [ 9 ] );
Hi Ariel,
I just find out this project and it's really a great job. Congratulation.
However I still have a problem and I hope you can help me.
So I m looking to make a circular auto scroll list but I would like that on the last item, it doesn't go back to the first but continue as the list as no ending.
Is it possible to do it ? and how to do it ?
In advance thanks
Hi,
First of all congratulations and thanks for this amazing pluging.
I would like to know if there is a way to add a "slider" like in here: http://jqueryui.com/demos/slider/#side-scroll
I have checked the different demos that you have but I haven't found anything similar.
Thanks
H,
Thanks for such a nice plug in. Its really nice and easy to customize.
I am trying to use swf videos inside the li instead of your sample loreum ipsum text. If I use flash swf's then the first and second swf are visible and if click next then 2 and 3 are visible. I tried changing the width for sections but it doesn't help. I can post the code or email it, if you can help me out!
regards
Pragan
forgot to mention that it works fine in IE 7.0.5730.13 and not in FF 3
Hi Ariel,
well done man!
I want to put more than one news ticker in my page and start the second and the third after some time from the first.
For instance the first news ticker starts when the page loads, the second one starts after 3 seconds and the third one after 6 seconds.
Can I do that?
Thanks.
Hi,
I can't make the news ticker work.
What am I missing:
$(document).ready(function()
{
$('#news-ticker').serialScroll({
interval: 1,//auto scroll constantly
easing:'linear'
});
});
Hey Ariel
Thanks for this amazing plugin. However, I wonder if this is possible:
I have one page with links. When I click on the link, can I have it open to a new page and automatically slide to the currently selected "page" in the sliding list?
@Anonymous
Do you have a demo online ?
@Bucheron
I haven't provided a way, some users added propositions within the comments.
@Alberto
Same as Bucheron, that requires additional coding (outside of the plugin).
@Pragan
I don't fully get it, do email me a demo please.
@Nicola
Call the plugin many times, with within a setTimeout with different delay, or.. just use a different auto scrolling interval.
@Anonymous2
You must specify a selector to the items.
@Chris
You should pass the id of the target element as hash (#foobar). Then read it from the other page. I'd do something related to the 'start' and 'force' options of serialScroll.
Thanks for replying so quickly. But I'm not quite sure what the code would look like.
Would I pass the ID through the a href similar to local scroll? And how would the start/force javascript look like and where would it go?
Hey, I'm a novice at Javascript, and I've got the serialscroll,localscroll and scrollto commands working for a horizontal slider. However for the life of me I cannot seem to get it to become a vertical slider. I was just wondering if you can help me!! As in which bit of code in which js file I need to alter. Thanks
Hello Ariel, beautiful plugin. I am having a difficult time finding detailed information on the callback behavior. (example: I would like to control behavior after the last element. Instead of scrolling all the way back (kind of distracting), I would fade it, then manually change the position of the element and then fade the first element back in. Could you point me in the right direction? Or will this require hack? Let me know!
i'm wondering if you got a solution for the fact if you click 5 times next after 'last' element, you got to click 5 times on previous to begin scrolling again.
thx in advance
Hi Ariel -
Awesome work on your end. I am running into an issue that I can't seem to find an answer to. I have the scroll automatically starting, it is powered by both next and prev buttons as well as a navigation. How do I get the scroll to stop if a user clicks one of the options? right now it keeps scrolling automatically. Any guidance is appreciated.
Thanks,
Phil
@Chris
Quite complex to explain in a blog post or email. Can you add me on Gtalk/MSN ? aflesler[at]gmail for both.
@dirtymole
You should be changing the setting axis from 'x' to 'y'. Got a demo online ?
@anonymous
Something like this maybe ? probably needs some tuning.
@sven
Try removing the line that says 'offset' if you have it. Else you need to play with the option 'exclude' so that it works nicely. Check the docs about it.
@phil
Check the post called "doctorate on serialScroll". There's a snippet on how to do "stop on hover". This should be similar.
Thanks for your Reply Ariel - my last query here again for clarification
" It's weird. I tried your suggestion and also took a look at the scrollto demo. None of the following did anything, except the last line 'trigger', which isn't scrollTo. No error is thrown though...
$('#slideshow').scrollTo( '+=340px', { axis:'y' } );
$('#slideshow').scrollTo( 150, 800);
$('#slideshow').scrollTo('li:eq(9)');
$("#slideshow").trigger( 'goto', [ 9 ] );
"
Yes I do have an online demo!:
http://www.artcell.com.au/test-gallery.html
^ You can use the 'test' link on that demo page to see what I mean. Thanks.
Hi
The axis should be 'x', as it is horizontal.
Something like this:
$('#slideshow')
.scrollTo('li:eq(5)', {axis:'x'})
.trigger('notify',[5]);
Where 5 means: to the 6th.
Hi,
Love this plugin!
I'm scrolling a horizontal list (ul/li) and controlling the scroll with left and right buttons. The buttons are placed over the list. My intention is to have the "active" item between the buttons and the other items to the left and right of the buttons. Like this:
item1 item2 << ITEM3 >> item4 item5
It works ok but I can't get it to start with item1 between the buttons.
How do you position item1 to be in the middle of the visible area? Have tried offset without any luck.
You should add either padding-left to the container or an invisible element on the left side of the container.
Make sure the option 'force' is set to true.
Is it possible to "refresh" some variables used for serialScroll with another js junction after the fact? Hmmm....That's not very clear--just look at my demo page: http://benekdesign.com/align/.
The need for this arises because I've got a function to resize the content area depending on the user's screen size. I want to set the "step" (and some other values which are based on the step number) to equal the number of items that can fit on the screen. This number will change when the screen is resized so I need to have my resize function update this "step" variable.
The problem is that if I put the serialScroll code after the resize function the resize doesn't work--the content size will be stuck at the default small size and will not expand. So I've put the serialScroll code before the resize and it works fine.
So now I need to way to have the resize function update the serialScroll function with the new "step" value. Is this possible--or is that step value stuck on whatever it was when serialScroll initiated and there's no way to update it?
See http://benekdesign.com/align/js/behavior.js for the code.
Would be very grateful if you could offer some help. Thanks again for the great scripts!
@Benek
Not at the moment. It's on my TODO list, not sure when will I be able to get that it.
I'm now working on scrollTo as much as I can. Will let you know if I add that.
Thanks for the reply Ariel.
If I cannot change that value after serialScroll has initiated, do you have any idea on how I can initiate serialScroll after my resize function without messing it up?
Currently, if I put serialScroll after my resize it will override the width's that have been set by the resize function and will put the scroll container back to it's default width (as set in CSS). Is it possible to initiate serialScroll without it having any effect on the width of the container?
You mean cleanup up and re-call serialScroll ?
To cleanup, you need to do:
$('#container').unbind('.serialScroll');
And then clean the arrows, check the source to see all the bindings.
Will try to expose the settings asap.
Hi Ariel,
I am having a hard time with 2 things. First, the onBefore callback will not see past a third argument. I have a function defined to test it like this:
beforeCallback(a, b, c, d, e, f, g){
console.log(a);
...
console.log(g);
}
and after it hits c, it prints 'undefined'.
Also, i am passing in valid prev and next buttons, but they are not making the buttons active.
here is an example: http://bbb.jayamster.com
Thanks
That's because you're using the same callback for LocalScroll, which doesn't pass that many arguments.
Hey Ariel,
Sorry for bothering you again, but I have another question. So far I have updated my sculpture page (http://zhiwancheung.com/sculpture.html) and passing the id from the works page (http://zhiwancheung.com/works.html) as you suggested.
However, a funny thing happened. The prev/next buttons seem to assume I am on the first item of the list and scrolls accordingly (http://zhiwancheung.com/sculpture.html#china_orange) How can I let the prev/next buttons know I've started on a later element?
Also, the hash seems to force the page up a little bit when it's not suppose to. What's wrong? Thanks!
Hi,
I can't find the place where you use the location hash.
But anyway, you can let serialScroll know about a change like this (in the docs!):
$('#scrollable').trigger('notify',[what]);
Where 'what' is either a number (index) or a dom element.
Hi Ariel,
I'm a bit confused by what you mean when you say "cleanup up and re-call serialScroll"(march 10). What specifically does that do, and how will it help with my problem of resizing the container? Do you have any documentation on what you are referring to? I'm a JS beginner here so I need a bit of hand-holding unfortunately. Would you be willing to help some more?
I meant that you can call serialScroll again with different settings.
That's what you wanted to do, right ?
Whoa thanks for the fast reply! So I added this to the javascript code:
var elem = location.hash && $(location.hash)[0];
if( elem )
$('#s_gallery').trigger('notify',[elem]);
where #s_gallery is the element for sculpture. So far, the nothings happening.
My problem is that serialScroll works fine when called before my resize function, but if I call it after the resize function it resets the width of the container to it's CSS width rather than what the resize function reset it to be.
So I need a way to call serialScroll after the resize function without it affecting the resize of the container or I need to call serialScroll first but then recall it somehow after the resize to update a few of the variables which should be based on screen width.
What would you suggest?
I need an online demo, I'm not really understanding.
Excellent script thanks!
One problem...can't seem to get it to scroll in IE7 on either of two machines I've tried. Tried to make sure that the style includes position:relative but it still isn't sliding. FF works perfectly. Any thoughts. I've tried all I can think of but I don't have tons of experience with jquery.
Thanks
Hi, can't tell without a demo.
Sorry...thought the link to the page was included in the form.
Here it is. Any insights would be helpful.
Thanks
http://www.neighbay.ca/Home/tabid/38/Default.aspx
Ariel,
Please refer to my first post (March 5, 2009 8:48 PM) for links to online demo and my JS file.
As you'll see in the file the container for serialScroll resizes based on screen size. I need to be able to change the "step" and "exclude" settings dependent on that screen size. So I need to be able to initialize serialScroll after those variables can be adjusted by the resize function.
But I've tried this and it doesn't work. When initialized after the resize function serialScroll resets the size of my container to the default size overriding the size set by the resize function.
Which means I need to find a way to stop serialScroll from messing with the container width, or I need to leave it as it is now (serialScroll initializing before resize) but then somehow recall the function after the resize to update the "step" and "exclude" settings.
Does that make sense now?
@Wendy
Right, didn't see it. The problem is the with trailing commas in the last element of an object.
In english, you need to remove the comma from lines 87 and 112 within serialScroll.init.js.
Appart from that, you probably want to clean up that file, you're calling the plugin a lot of times and I doubt they're all used.
You're also including jQuery twice. All these isn't crucial, the problem is with the commas.
@Benek
No, it doesn't. SerialScroll doesn't alter any CSS attribute, nor height, width or any other.
IF you need to clean up the original call to the plugin, just unbind all the bound events. They all have the .serialScroll namespace (except the one on the 'event' setting) so that should be easy.
Thanks Ariel,
That did the trick! Much appreciated.
Wendy
Hi Ariel,
Sorry to ask another question, but now that my horizontal slider is working beautifully in both FF and IE I tried a vertical one, and you guessed it, it's not working in IE. I made sure that all my end line commas were correct too. Can you have a look and see if you can spot anything?
Thanks
Hey Ariel,
Sorry to bug you again...I'm not having a lot of luck setting up SerialScroll. I tried following your instructions in setting it up, and when that worked I tried just using one of your examples and building my serial scroll around that, and it still didn't work.
Would you mind checking over what I've got and see if what the problem is jumps out at you? I'm sure its something obvious, but I'd greatly appreciate it
http://www.mynameispj.com/designirvana/about2.php
I'm sorry, there was a typo in my previous post....
"I tried following your instructions in setting it up, and when that worked"
I meant, when that DIDN'T work. =P Wouldn't need to ask for help if I could get it to work, lol
Hey Ariel,
First of all, thanks for a seriously amazing plugin.
I'm having the same problem as Benek. Maybe I'll be able to explain it a bit better? Let's hope! Okay, here goes...
I've got a serialScroll side-scroll implemented where the viewable area of the target changes when you resize your browser window. The target has a constant width with padding that changes. Because of this padding I set the offset to the padding value.
The problem arises when you resize the window. The offset then needs to be reset to match the padding of the target that changed.
I've tried unbinding, but I'm at a loss of how to correctly do this. Here's what I have:
$('#container')
.unbind('prev.serialScroll')
.unbind('next.serialScroll')
.unbind('goto.serialScroll')
.unbind('start.serialScroll')
.unbind('stop.serialScroll')
.unbind('notify.serialScroll');
Then I try to recall serialScroll using:
$('#container').serialScroll(options with new offset);
Any words of wisdom on successfully unbinding everything associated with serialScroll?
@Wendy
I'm not sure but it's related to styling (not js) I'm pretty sure of that.
@PJ
Something's wrong with the markup and/or the 'target' setting.
Try changing overflow:hidden to auto where applicable and you'll see it's messed up.
@Sean
Try:
$('#container').find('*').andSelf()
.unbind('.serialScroll');
You should also add the namespace serialScroll to your 'event' setting:
event:'click.serialScroll'
That worked!! Brilliant, really. Thanks so much for the quick response. Your commitment to this community is much appreciated!
Hi Ariel,
Your plugin is awesome, I plan on using it on a number of Drupal instances as a sliding gallery.
What do you recommend for a continuous cyclic loop? Is there another plugin that can work with SerialScroll to achieve this effect?
Would the looped slider help?
http://code.google.com/p/loopedslider/
@Krisbfunk
There're no plugins to use WITH serialScroll, you need to use one or the other.
Is there a way to have a loading graphic display until the slider has finished loading?
Thanks
@Wendy
It's possible to do that, yes, but that's not provided by this plugin.
I've come across a bug which only shows in Safari 3 / IE8. It can be demonstrated on the demo page.
1. Open demo page: http://demos.flesler.com/jquery/serialScroll/
2. On the top demo, click "Section 5". The panel scrolls to section 5.
3. In the JS console, enter:
$('#screen').hide()
to hide the scroller
4. Then show it again, with:
$('#screen').show()
The scroller returns back to section 1. However it still thinks it is at section 5 - the right arrow does not work, and the previous arrow takes you to section 4.
The way to get it back on track is to notify the scroller where it really is, and tell it to go back to where it should be.
Surely it shouldn't move just by showing / hiding??
These browsers seem to reset the scrolling position when hiding the element. Not much to do from the plugin.
If, for some reason, you need to hide one and then show it. You'll need to either fix the scroll (with scrollTo or something) or either trigger the notify event passing 0 as the argument so it realizes it is back at 0.
Thanks, yes, I did the latter. Is it possible for the plugin to detect if this happens and compensate??
Not really. I think it's out of scope, sorry.
Hi,
First, great plugin. Thanks!
Here's my page in queston:
GameI'm trying to get the numbers to stop, but nothing I try seems to work. Could I get some suggestions please?
Thanks!
Just after the area that tries to explain how to use triggers, you say "Note that to use 'start' and 'stop' you need to use the option 'auto' first."
Where do I use the 'auto' option?
Also, if this is my code:
$("#slot1").serialScroll({
items : 'div',
duration : 50,
force : true,
axis : 'y',
lazy : true,
interval : 1,
step : 9
});
How do I get a trigger to work with that? I'm trying to use the 'goto' but this:
$("#step1").trigger( 'goto', [3] );
Isn't doing anything.
Thanks again!
@Clint
Meant 'interval' not 'auto' (fixed). Can't believe this was wrong all this time :)
It should be:
$("#slot1").trigger('stop').trigger( 'goto', 3 );
Ok, then I must have something else bothering that. It's depending on an element being clicked. So when I click to stop, it stops but does not goto until I click the element again.
$("#endGame a").click(function(){
setTimeout(function(){
$("#slot1").trigger( 'stop' ).trigger( 'goto', 4);
}, 5);
});
Like I said, I have to click $("#endGame a") twice to get it to 'goto'.
Any ideas?
Thanks again.
@Clint
Try adding the settings:
lock:false,
stop:true
or set:
step:1
or do this:
$("#slot1").trigger('stop').stop().trigger('goto',4)
Problem is that as step is 9, it always continues to the end.
Hi Ariel,
I'd like to change the appearance of the next/prev buttons when there are no more items to scroll.
How can I find the first and the last item and how can I address the buttons ?
Thanks + regards,
Hans
Thanks a ton Ariel!
The lock and stop settings did the trick.
@Hans
Check the post called "Doctorate on SerialScroll". There's a snippet called "hide the arrows....".
You need to do just that but instead of hiding, add a css class or something.
Hi there, I'm stumped when it comes to making the slider autoscroll on page load. I've set the interval ok, but it will only start when one of the navigation links is selected, whereas I want it to start on page load. I can't seem to figure out where / how to set start.serialScroll - which I think is the thing i need to set? Any help would be greatly appreciated, cheers.
@Jeremy
You just need to set force = true, which will force an initial scroll event, as noted here:
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
@Sean - you're bang on, thanks very much for that :)
Hello Ariel,
great work.
One question: I have an autoscrolling list of items, now i have prev/next-buttons too. I wonder if it's possible to "jump" 3 or 4 elements forward or back when i click on the buttons and then let the list continue its normal scrolling.
Any idea?
@Sean
Thanks for answering :)
@Anon
You can call the plugin twice. Once with step:1, autoscrolling, w/o prev & next. Then you call again with step:3 and prev & next.
@Ariel or Sean (or anyone for that matter!),
Me again ;) I was wondering, now that I have the automated sliding, if a user selects any of the links manually, I need to stop auto scrolling, is this doable? I'm guessing perhaps I'm back to serialscroll('stop') - don't follow how to apply this though. Any clues?
Hi Ariel, it's not the first time when I use your plugins. Here I have a problem with SerialScroll stopping working. Demo is here, click the first row of the table that is named "Demo", and then "Foto" button. The slideshow was working when most of JS was inline with onclick events. There's another SerialScroll object on the page which works without any trouble but this one has cost me already two days, and yet I haven't got any idea why it's not working.
@Jeremy
If you check the post called "doctorate on serialScroll", there's a snippet to stop on hover. You just need to change the event and the context element.
@Jay
The prev and next selectors don't match the buttons.
@Ariel, thanks for the advise - I've tried it out but it's not happening for me - It is going into the function, I've verified this using Firebug and some window alerts for checking the on hover and off hover, but with the triggers nothing seems to happen.
You can see the code here: http://www.oak.co.uk/ajax/slider.js
Do you have any thoughts?
This is great. Much easier than scrollable! I wasted two days with that thing but I have the same issue with this scroller. I have multiple items (product thumbnails) shown at once. I am using this to scroll product thumbnails left and right. I want it to stop when it gets to the last one and not be able to go any further. But the only time it resets is when all the products are off except for the last one. Please see my page for yourself:
Click the right arrow and keep clicking it.
http://www.gracedigitalaudio.com/new-ir-cat/ir-cat-page-3.html
@Buddy
You need to set 'cycle' to false and exclude to 6 (play with it).
@Jeremy
You need to trigger the events on $scroll, not on $('#slider').
I've tried everything I can think of and this does not work from my house. Maybe it could use a tutorial unless it is only for those who really want to dig deep into learning how this works
The main blog post is the tutorial/documentation.
Thanks Ariel, appreciate the work you've put into this plug-in.
Regarding updating serialScroll settings on a container using $(...).unbind('.serialScroll') then re-instantiating it. Thought I'd share my experience with this as it may help others.
I was banging my head against this as I could unbind serialScroll from the container fine but when I re-instantiated it the scroll would not automatically advance any more.
I'm sure you're aware why. Once I downloaded the source I discovered the line "if( !pane.ssbound )// don't bind more than once" was preventing serialScroll working properly the second time around. Commenting out line 109: pane.ssbound = true; fixed the problem.
Is there a way to do this without editing the source?
Hope this helps someone else anyhow.
Cheers - Scott
Post a Comment To get help prepare a demo.