Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple localscrolls on 1 page

    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:

    Code:
    $(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:
    Code:
    $('#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!
    Last edited by willikm; 01-27-2011 at 07:25 AM.

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Last edited by willikm; 01-25-2011 at 10:39 AM.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •