Enhancements
- Removed the check that avoids re-scrolling to the same index, this might be desirable sometimes.
- The settings object is exposed in the onBefore as the this.
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)
53 comments:
hey,
i need some help for a website. i use ajax to change the inner of a div-box. the problem is that i want to use serialscroll on the new content in the div-box. i tried everything i know to make it work. is there a possibility to initialize serialscroll before/after the ajax response?
thanx.
ralf.
Have you tried setting the option 'lazy' to true ?
oh no. i didn't set this option to true.
but it still won't work. do i have to make the init of serialscroll in every response of ajax?
thanx!
ralf.
Hi Ralf
Can you get me a demo to see ? the option 'lazy' should do, maybe it needs some tweak.
hey ariel,
i sent you a pm.
cheers,
ralf.
Hi Ariel,
long time since last time I bothered you :)
An easy one about 'navigation' setting on serialScroll: is it like a stripped-down version of localScroll embeded inside serialScroll?
If so, it's a nifty addition (I missed it before, not sure in which version it was introduced).
Thanks.
It was added on 1.2.0.
It's not really the same as localScroll because it works index-wise but yeah... same result in the end.
Here you have the changelog if you're interested.
Ariel, thanks for the follow up.
One last question: do you have any trick (something coming off the top of your head) to add a CSS class ("selected") to corresponding item on this index-based navigation?
I mean,to add it to the navigation item that "matches" the current active/viewed item.
In the meanwhile, I'll play a little with onBefore/onAfter to see if I come up with something.
Thanks.
var $nav = $('#nav li');
$(...).serialScroll({
...,
navigation:$nav,
onBefore:function(e,el,$p,$i,pos){
$nav.removeClass('selected');
$nav.eq(pos).addClass('selected');
}
});
Haven't tested :)
Many thanks, Ariel, the snippet worked flawlessly.:)
pure genius! I was stuck on that "selected" navigation thingy for nearly a week now and you come up with the solution just like that. Oh man, I suck X))
thanks, ariel!
Glad you made it work :)
The navigation option of serialScroll is excellent and a snap to implement. But a question: As is commonly done in navigation, I'd like to keep the current nav item highlighted (bold, etc.) with a CSS class, to give users visual feedback about where they are. Is there any way to do that with serialScroll navigation? The navigation option is being applied to "ul#nav li a", and the scrolled elements are divs. Many thanks, Ariel. Great stuff.
Hi ralph!
Maniquí and I had the same problem and Ariel solved it 5 postings before.
please read the one that says "var $nav = $('#nav li');" and so on.
me again. I sure don't want to spam but I can't figure out if it's possible to attach a duration to a triggered goto event. I tried: $(container).trigger('goto',[0], {duration:200}) but that doesn't seem to work.
On the other hand I wonder if there is a chance to jump to the first li and skip the sliding animation?
@ DerFalscheHase: Thanks. I somehow missed your question when I scanned the comments. Yes, Ariel's onBefore function works perfectly. Ariel, you're the man! For future users, place the function as the last option you give serialScroll.
Now, one last thing on this subject: When my page loads, the first scrolling div (index [0]) is presented by default. Is there a way to add the selected class to the [0] nav item upon page load even though it hasn't been clicked upon? Thanks!
@DerFalscheHase
You could change the duration within the onBefore according to a variable. Then before calling trigger(goto) you change this var to 0 (or w/e) and change it back after trigger(). Something like that :)
@Ralph
$('....').eq(0).addClass('selected')
???
@Ariel
Many thanks. Yes, that works fine. I used the variable and placed it right after the variable declaration, like this:
var $nav = $('#nav li'); //or #anyID li a (etc.)
$nav.eq(0).addClass('selected');
Then my call to serialScroll comes after that.
Now the first navigation item gets the "selected" class upon page load. Brilliant.
I'm calling serialScroll in a js file shared by all pages of a site. The Home page does not contain the divs that my call names for target, items, or navigation. On that Home page only, Firebug complains that "p is not defined."
I could use a separate header template for Home, but it makes my maintenance harder. Is there something I can add to my shared js file to make the error go away?
serialScroll navigation is working perfectly for me up to and including the 9th item in the navigation list. As soon as it hits the 10th item, the navigation starts going to the wrong place, going backwards, going slowly, and in general doing lots of weird stuff.
I realize that the plugin is zero-indexed. I mean up to and including the 9th as seen by humans in a list. Technically, it would be item [8] in a zero index.
Any idea what's going on?
@Ralph
To fix the first issue, you can grab the last version from trunk (here), haven't released that yet.
As for the second thing, it's hard to guess w/o seeing, but I think your 10th item (which I assume it's floated) it's fallng down. Check with Firebug.
Ariel,
Re serialScroll navigation failing to work after the 9th nav item: I'm not sure what you mean by "falling down." Yes the nav items are floated li's, but they're all identical (built with a CMS loop) and I see no misbehavior with them.
I just sent you a link to my example at your Google email address.
One more question: Is there any way to build an anchor that will link (from another page on the same site) directly to one of the scrolled items, using navigation's index value somehow?
Many thanks,
Ralph
Hi Ariel, I have been using your plugin for quite some time now. I am recently working on a project where I have a navigation menu with categories and then a list of items broken into those categories with a header above each one. With the navigation I want to scroll to the begining of each group of items. so l I have an unordered list that in each list item has a header and then another unordored list of products. Since there are to many products that can be in a given category, I can not scroll with the previous and next buttons base on the main li item, I have to do it based on the li's that contain the products because the viewable area only holds about 5 products. So I thought that I would use the localscroll for the navigation so that I can scroll to each main li from there and then use the previous and next buttons to scroll the products. The issue I am having is when you click on the category link in the navigation and scroll to a certain point, if you click next or previous it starts from the begining. I looked at how they had the coda slider example but I think my situation is different because I am actually using the local scroll on the navigation.
Ok, I think I got it figured out. I am not sure why I couldn't get the
notify to work yesterday but the plugin is not working perfectly how I
need it by calling the notify event if the element is a ul.
onAfter:function(elem){
if(elem.tagName == "UL"){
$($target).trigger( 'notify', [ $($items, $target).index($
(elem).find("li").get(0)) ] )
}
}
oops that is suppose to say now working perfectly
I tried using your solution:
$nav.removeClass('selected');
$nav.eq(pos).addClass('selected');
for setting the navigation style when using the previous/next buttons for scrolling, but I am only able to get it to work for the first navigation LI (meaning, if scroll to page2, page1 nav style is "turned off"/class removed, but page2 nav class isn't added. If I use prev/next to go to page1, though, class IS added).
Hope that makes sense. My code is here:http://snipplr.com/view/25975/jquery-scrollto-sample-code/
I feel like I am missing something obvious... Any help would be much appreciated. Thanks for sharing this lovely plugin, great job!
Oyyy, I figured it out, SO easy...I am advancing 4 elements at a time, so I needed to divide the nav index position by the same amount, so:
onBefore:function(...){
var navPosition = pos/step;
$nav.removeClass('current-link');
$nav.eq(navPosition).addClass('current-link');
}
Ariel - Your stuff has helped a lot with the site I'm working on. I've got a problem though and I hope you can help.
The site is: http://autumnjonesdesign.com/proofs/ivinex/proof2ivinex.html
I need the link on the left side of the screen to work but it doesn't at the moment. I've found that if I disable the jquery-1.3.2.js it will work fine but then of course my site effects to not. Any idea on how to fix that so the link will work along with everything else?
Thanks!
Hi
I have truble to implement this work, kindly can create one example page and send me on, stokyboz@hotmail.co.uk
Thank in advance
Thanx for this great plugin. I love it! I use it for horizontal scrolling on a photography website. The problem I have is that my images don't have the same width, but I do want them centered in my browser window. I'd like to have the offset half the width of the current image. Would that be possible?
I already know the width of the container using:
onBefore:function(e,el,$p,$i,pos){
imgWidth = $('#gallery li:eq('+pos+') img').attr('width');
}
The only problem is that imgWidth cannot be used in offset: {left:imgWidth/2}.
Any ideas?
First off, I'd like to thank you for your great plugins.
Is there a way to stop jQuery, flash and iframes from flashing across the page when using Firefox? Specifically, on the page I'm working on, if you navigate from "our work" to the "contact" page you can see the effect I'm talking about. http://dev.no-refuge.com/catfish/
Thanks
Hi Ariel, thanks for the these plugins. My question is regarding to easing. I've got it work only 'linear' and 'easeOutQuart' for serialscroll. Could you provide complete list for easing.
Hi Ariel!
Great plugin thanks a lot.
One question: ist it possible to cycle the ticker items endless.?
I mean after reaching the last item it should start with the first one immediately without scrolling back the whole ticker ..
greetz
mil
How can I make it degrade gracefully with javascript switched off, im not sure how to do it.
thanks
Louise,
I've set my scroller up to degrade, without Javascript it simply displays all of the photos with a scroll bar at the bottom so that a user can manually scroll. It's not too pretty but it's an option. You could have it not display a scrollbar and display a set of fixed photos instead. Either way I have the following code:
NB: I've removed <> from the code.
div id="photos"
div id="scroller"
ul id="slideshow" style="width**PHP GENERATED WIDTH OF SLIDESHOW**;"
**SLIDESHOW LI's HERE**
/ul
/div
/div
noscript
p This slideshow requires Javascript. To learn how to enable Javascript click here.
/p
/noscript
In the css, #photos has a height about 15px larger than my photos to allow for the scrollbar; scroller has width of 100% (of the #photos div), overflow hidden BUT, overflow-x is set to AUTO, this is important as it enables the bottom scrollbar.
The UL that contains the items to be scrolled is absolutely positioned inside the scroller, it's width is set to the full width of all the photos, plus any margins/padding, which is all generated by PHP in my code because the photos can be uploaded by users.
In the javascript, the following two lines of code will setup the correct height for the outer div, and remove the scrollbar of the scroller div (and activate serialscroll):
$('#photos').css({height: '164px'});
$('#scroller').css({overflow: 'hidden'}).serialScroll(serialoptions);
The whole thing is live on beta.manchesterjitsu.org though I'm tinkering with it so it might not work perfectly.
I also have a problem, I'm trying to get it to cycle endlessly rather than go back to the beginning. So far I've got it to do this once, but it's jumpy. I'm using jQuery to append the first 'li' to the end of the list, then remove it from the beginning. I've got lazy to true but it's really jumpy, as if it already knows where the items are even though I've removed them. Any takers?
(Apologies for the long post :( )
Hi Arial,
First, thank you immensely for the work you have put into the scripts.
I have been beating my head against the wall for the last couple of days trying to get a variable height DIV scroller working. I have everything working perfectly EXCEPT when the page initially loads, the .slider DIV is expanded to the height of the largest DIV.
After the page loads, click on the "Home" tab in the nav, it then shrinks to the correct size. Can you please, please help me figure out the last piece of this puzzle?
Thanks and again, thank you for the work you have put into this!
DEMO: http//specialized.vandigroup.com
Joe Conlin
Hi Ariel,
I have the same problem as Joe. I have my content slider working fine, but I would like to have a dynamic height set for the pane. However, if I use 'min-height', then the pane is automatically set to the largest slide. Is there a way to have 'autoheight' where the pane is only the size of the content?
Thanks a lot for all your work towards this plugin. It's much appreciated!
Hi,
Thanks for all your work, I love your plugins!
I do have a problem though. I'd like to have a autoscroller of logo's. It should also contain arrows to scroll left/right (overriding the autoscroller).
I tried using the 'next' and 'prev' options, but they don't seem to work when interval is set. I also tried to attach triggers to the arrows (.trigger('stop') and 'previous') which also doesn't work.
My code can be found here:
http://flesler.pastebin.com/PewWm0ja
Thanks for any help!
Hi!
I really like your plugin and all the possibilities it has!
I was wondering if it you could help me on the way, to make a scroller that could scroll continuously/constant both forward and backward (from left to right and right to left).
The instance shouldn't scroll unless holding down a link outside the scroller. (using onmousedown and stop onmouseup)
and it would be great if it's not possible to scroll past the last and first item. (i don't want any empty space) But I guess I could do that with offset and exclude (:
I don't have any code for you, but if you want me to try some more first, I'll do that and send you if I got anything good out of it!
Hi there,
First of all, thanks for this excellent piece of code. It has helped me in so many projects.
I have a small problem with events:
I have a few items autoscrolling, and two links to play/pause the animation.
The pause link uses 'stop.serialScroll' to stop the autoscrolling, and work all right.
But when I click the 'play' link, that uses 'start.serialScroll', the autoscrolling doesn't start back.
This is the code:
$('#slider-destacados').serialScroll({
items:'div.destacado',
start:0,
duration:500,
step:1,
cycle:true,
interval:1000,
});
$("#animacion a.play").click(function(){
$('#slider-destacados').trigger('play');
return false;
});
$("#animacion a.pause").click(function(){
$('#slider-destacados').trigger('stop');
return false;
});
Am I doing something wrong?
Thanks in advance.
Celine Bags
Valentino Handbags
I dont understand the serialscroll demo.
The top demo on this page http://demos.flesler.com/jquery/serialScroll/
The navigation only has 3 items. But there are 5 sections. why i click "section 3" on the navigation tab, should it go to the section 2 instead?
i have an error problem...
p is undefined
what's wrong?
Hello I want to add the hash On The Serialscroll please is urgent! Thank you much! I specify Serialscroll
Hi, Ariel
I want to make a scrolling effect like this one on this flash site ( http://www.paneonline.it/index_eng.html )
I've found this path plugin that helps to create custom path ( http://weepy.github.com/jquery.path/ )
can you give me some hints about how combine your plugin with this, and make a beautiful not linear scrolling effect?
thanks Daniele
how to put a link on the pictures? in scrolling
Hello,
I've tried to use SerialScroll.
I want use on mouseover and on mouseout event to start and stop the scroll.
It's work perfectly for NEXT button but not for PREV button because the step is 1 so it works liKE next;
I've tried to modify step value but my new value is not tale anymore.
Hw can in modify this step without restarting the scroll ?
This works great in Firefox, but in WebKit (Safari/Chrome) clicking the "Next" link scrolls all the way to the last item in the series. Clicking it again goes back to the beginning. Only in Firefox does it advance item by item.
Any ideas?
Unfortunatly all behaviour depends to click "next" or "prev"
Is there way to make slideshow start with page load?
News ticker sort of does that but it should be named not newsticker but scroller - and that just looks ugly.
I probably dont understand demo,because so fare I cant make it work. Nice looking ticker should stop on news and then continue. I s this behavior possible?
Hi!
How do I remove Items from the scroll without causing the serialscroll to stop/crash?
Post a Comment To get help prepare a demo.