JQuery Jscroll plugin - inconsistent scrolling

Discussion in 'Web Design and Development' started by Brendon Bauer, May 16, 2011.

  1. Brendon Bauer, May 16, 2011
    Last edited: May 17, 2011

    Brendon Bauer macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #1
    Ok so I have a small problem that I can't seem to figure out. I am using a JScroll plugin I found that uses JQuery to make elements scroll down the page as a user scrolls down the page. I have used it for the navigation menu on my website. The problem is that on most pages it scrolls fine, but on some it scrolls to a certain point and then stops.

    I can't find anything in the code that jumps out at me as to why it won't scroll the same? It just stops? Any idea?

    Here is the js for the plugin:
    Code:
    (function($){$.fn.jScroll=function(d){var e=$.extend({},$.fn.jScroll.defaults,d);return this.each(function(){var a=$(this);var b=$(window);var c=new location(a);b.scroll(function(){a.stop().animate(c.getMargin(b),e.speed)})});function location(c){this.min=c.offset().top;this.max=c.parent().height()-c.outerHeight();this.originalMargin=parseInt(c.css("margin-top"));this.getMargin=function(a){var b=this.originalMargin;if(a.scrollTop()>=this.min)b=b+e.top+a.scrollTop()-this.min;if(b>this.max)b=this.max;return({"marginTop":b+'px'})}}};$.fn.jScroll.defaults={speed:"slow",top:10}})(jQuery);
    And I include both jquery 1.5.2 and jscroll at the top of the page inside the head tags:
    Code:
    <script type="text/javascript" src="/includes/styles/js/jquery.js"></script>
    <script type="text/javascript" src="/includes/styles/js/jquery.jscroll-1.0.min.js"></script>
    
    <script type="text/javascript">
    
    $(function() {
    $(".scroll").jScroll({top : 30});
    });
    
    </script>
    Thanks so much for your help! I'm sure I'm just missing something silly :p
    Brendon
     
  2. indoboarder macrumors newbie

    Joined:
    May 17, 2011
    #2
    Try to put your execution code in this function:

    $(document).ready(function() {

    /* Your code here */
    $(".scroll").jScroll({top : 30});

    });

    Then it wait's until whole document is loaded until it executes the code and it will read the whole height of the page (after images are loaded).
     
  3. Brendon Bauer, May 17, 2011
    Last edited by a moderator: May 17, 2011

    Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #3
    Thanks for the tip. I tried using your code but it didn't seem to fix the behavior. What you're saying makes sense, though, and I could see how that could be a problem. It still seems to be random when I try combinations of refreshing, navigating away and back to the page, etc. Is there a different way to guarantee waiting until the page is loaded to run the script? Because that code is in the head tags and so it seems like it'd go first.

    I think I figured it out. I find a method that uses JQuery to check to make sure the page is loaded and it seems to be working consistently. The code for it is as follows (as long as you have already loaded JQuery.js):

    Code:
    <script type="text/javascript">
    $(window).load(function() {
    $(".scroll").jScroll({top : 30});
    });
    </script>
    Basically just added the "$(window).load(" bit. Thanks for pointing me in the right direction! I never even thought of this as the problem. Found this new method here: http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html
     

Share This Page