jQuery Multiple localscrolls on 1 page

[willikm]

I'm having trouble having two individual jQuery localscroll's work on the same page. I've searched hours on end for similar problems (including Ariel Flesler's docs/guide), but to no avail. This was actually my first day messing with jQuery, so I'm a bit inexperienced.

I currently have 1 localscroll exactly how I want it (the 'Design' box) but I'm having problems trying to get the 2nd localscroll (the 'Web Development' box) to work separately from the other one.

Here's the code I am using for the properly working localscroll:

$(document).ready(function(){

	// Scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: '#DesignView', // Could be a selector or a jQuery object too.
		queue: true,
		duration: 1500
	});
	
	$.localScroll({
		target: '#DesignView', // could be a selector or a jQuery object too.
		queue: true,
		axis: 'x',
		duration: 1000,
		hash: false,
		onBefore: function( e, anchor, $target ){
			// The 'this' is the settings object, can be modified
		},
		onAfter: function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		}
	});
});

I want the #DesignNav hyperlinks to work with the #DesignView, and the #WebNav hyperlinks to work with the #WebView

What code do I need to add/modify for the 2nd box to work? I have a feeling it has to do with the fact that I'm not using something like:

$('#WebNav').localScroll();

which I have tried, but I do not think I'm using it properly.

I'll be grateful to anywho that helps! Thanks!

[venegal]

It's probably not going to work. Since the plugin action is triggered using links to a hash value, and those links don't have to be inside the element that's used for scrolling, there's really no way for it to know which of the initialized elements (should there be more than one) it should use for scrolling. (It could theoretically look in which of the initialized elements the requested element actually resides, but I don't think it does that.)

That means, it doesn't look like it's made for multiple initializations on different elements.

[willikm]

Thanks for the quick reply!

I sort of came to that conclusion as well. However, I was wondering if it was possible to have it detect hash values such as #web1, #web2, and #web3 and automatically trigger the WebView element?

...Kind of like in pseudo-code:

if (#web1, #web2, #web3)
target: #WebView;
else if (#design1, #design2, #design3)
target: #DesignView;


...As there wouldn't be any repeating elements (I'd make sure of it)

[venegal]

Sure you can do that. It would involve monkey-patching the plugin, but if you feel comfortable doing this and you are certain that you won't ever want to update the plugin, should a new version become available, why not.

I wouldn't check for those hardcoded ids, though, I'd do what I previously mentioned: Let the plugin search inside the initialized elements for the existence of the requested element, and trigger the scroll only on those where it has been found. Shouldn't be too much of a hassle, really, and that way you can submit your change to the original author for inclusion in the next update.

Well, any way you decide to handle this, good luck with it.