Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

JQuery Jscroll plugin - inconsistent scrolling

B

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
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
 
Last edited:
I

indoboarder

macrumors newbie
May 17, 2011
1
0
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).
 
B

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
indoboarder said:
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).
Click to expand...

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
 
Last edited by a moderator:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom