We help IT Professionals succeed at work.

prevent multiple panels from scrolling simultaneously

soujohn
soujohn asked
on
Greetings,

I am having issues with the localScroll jQuery plugin that I am using in order to slide overflowed content.  Currently my code is setup so that when you click a link within the navbar of the Work section the content will slide for every panel simultaneously. (i.e., if I click on the Scan Design link from the work section it takes me to that panel. Then if i click on the web link that content slides up. Then if I click the orange arrow in the nav bar it will take you to the next client, but it will land on their web section rather than starting in the print section.)

Here is a link to view the issue:
http://www.soujohn.com/clients/sil/test/index-work.html

This is what my localScroll script looks like currently.

                                    $('#section-work').localScroll({
                                                target : 'div#content',
                                                axis : 'xy',
                                                queue : true,
                                                hash : false
                                    });

I know that all the panels are scrolling because my target is set to animate every div with the id of "content". However if i remove "div", and leave it as "#content" then the localScroll animation will only scroll the the first section (Scan Design). Then if you click the right arrow in the navigation bar to access another client the links in that navbar won't animate anything.

Is there any way I can have the localScroll target each #content div which contains the sliding content, but not have it scroll the content simultaneously?
Comment
Watch Question

Commented:
One issue is that ids are supposed to be unique.  It's a quirk that it's working correctly for div#content.  I suggest changing to a class on those divs, then you can use .content, or div.content.

I think that each link is meant to have it's own localScroll setup with the target div defined for it.  That would mean that you need to set up multiple ones instead of having this one work for everyything.  

Author

Commented:
Thank you. I was hoping there would be an easier way. It seems that I'll just have to take some extra time to make sure the client can clearly understand how to update this section. Thanks again.