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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jQuery.localScroll Help (Can't get it working)

    Hi Everyone,

    Here is what I'm working on: kernmagazine.com

    I'm having a great deal of difficulty getting localScroll to work on my site. Essentially I would like the scrolling effect to take place when the user selects a section from the navigation at the bottom.

    The plug-in's documentation isn't the clearest on how to troubleshoot any problems. Hopefully someone can help. Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think there's a few things wrong here. You have some errors in your markup including some overlapping tags. Fix these first.

    Then try replacing your scroll js with the simpler:

    <script type="text/javascript">

    Code:
    $(document).ready(function() {
        
    	$('#navigation a').click(function(){
    		$.scrollTo(this.hash,4000);
    		return false;
    	});
    });
    
    </script>
    You can then remove the localscroll.js and just use scrollto.js. Works on a test page, vary the 4000 to change the scroll speed.

    This is very similar to this thread.

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for drawing attention to the errors. I've cleared them up, but am still having difficulty invoking the script.

    $('#navigation a').click(function(){

    i've tried replacing #navigation with both the div id as well as the respective span ids that the links appear on, but to no avail. I've also tried the onclick method mentioned in this thead. Could the script be incompatible with the newest jQuery, or is there a conflict with other javascript i have running on the page?

    Not too sure what's going on as I've tried numerous ways of troubleshooting but nothing seems to be working.

    Thanks again.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Yes, looks like there's a conflict with prototype. Try:

    Code:
    <script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function($) {
        
    	$('#navigation a').click(function(){
    		$.scrollTo(this.hash,8000);
    		return false;
    	});
    });
    
    </script>

  • Users who have thanked SB65 for this post:

    jrclose (03-14-2011)

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still having issues. If this is the Div that has the links:

    Code:
    <div id="bottom_nav">
    	<p id="nav_title">Universal Navigator</p>
    	<p id="navigation">
    	<span id="chap1"><a href="#part1">1</a></span>
    	<span id="chap1-1"><a href="#part1">Lost in the Cosmos</a></span>
    	<span id="chap2"><a href="#part2">2</a></span>
    	<span id="chap2-1"><a href="#part2">Listening to the Big Bang</a></span>
    	<span id="chap3"><a href="#part3">3</a></span>
    	<span id="chap3-1"><a href="#part3">Understanding the Earth</a></span>
    	<span id="chap4"><a href="#part4">4</a></span>
    	<span id="chap4-1"><a href="#part4">The Mighty Atom</a></span>
    	<span id="chap5"><a href="#part5">5</a></span>
    	<span id="chap5-1"><a href="#part5">The Periodic Table</a></span>
    	<span id="chap6"><a href="#part6">6</a></span>
    	<span id="chap6-1"><a href="#part6">So Here We Are</a></span>
    	</p>
    	</div>
    should

    Code:
    	$('#navigation a').click(function(){
    be #navigation or the span IDs? (chap1, chap2, etc.) I've tried both including having #bottom_nav in there as well, but none are working.

    Thanks for your patience

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    #navigation a should be fine.

    Looking at your current live page you have:

    Code:
    $.noConflict();
    $(document).ready(function(){
    which should be:

    Code:
    $.noConflict();
    jQuery(document).ready(function($){ etc...
    By applying noConflict() we're relinquishing control of the $ variable, which is just a shortcut to jQuery anyway, so having done this we need to write jQuery in full on the document ready function. Including the $ as the argument for this function then allows us to use $ within the function as normal, if that makes sense.

    Testing this out I created a test page using your html and css, which I've put online here - and which works OK.

  • Users who have thanked SB65 for this post:

    jrclose (03-14-2011)

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Amazing! Thank you so much for your help


  •  

    Posting Permissions

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