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 Zip(all files and docs)
- jQuery.SerialScroll 1.2.2 Source(to learn or test)
- jQuery.SerialScroll 1.2.2 Minified(recommended)
- jQuery.ScrollTo 1.4.2 Source(to learn or test)
- jQuery.ScrollTo 1.4.2 Minified(recommended)
26 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
Post a Comment To get help prepare a demo.