CODEWITHSUNDEEP
javascriptjqueryinfinite-scroll
jaimerump
jaimerump

Reputation: 882

Infinite scroll javascript not running

I'm trying to add infinite scroll functionality to a page using code given in this question, Check if a user has scrolled to the bottom, but nothing happens when I scroll to the bottom of the page. Here is the code so you don't have to follow the link:

<script type="text/javascript"> 
alert("popup!");    
$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("bottom!");
   }
});  
</script>

I added in the first alert to check if it was simply my browser blocking alerts, but it displays fine. The server also has JQuery 1.7.2 min installed and the page is masonry correctly, so I don't think it is an installation problem.

Upvotes: 1

Views: 2454

Answers (2)

Waltzy
Waltzy

Reputation: 1107

After your reply to my comment, you said you are getting

In the console tab I'm getting Uncaught ReferenceError: $ is not defined

I'm guessing then, that you havent included jQuery in the header of your page (this needs to be in the <head> of each page)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

This will tell you if JQuery has sucessfully loaded on your page

if (typeof jQuery != 'undefined') {
    alert("jQuery library is loaded!");
}else{
    alert("jQuery library is not found!");
}

Original comment:

try putting console.log($(window).height()+"<-current sctoll | target->"+($(document).height() - 100)) in that loop, open it in chrome and right click -> element inspector, open the console tab, that will tell you what the values are each loop, should help you diagnose the problem. If you don't get any traces, the event is not firing

Upvotes: 1

Lowkase
Lowkase

Reputation: 5699

Perhaps the scroll event is firing properly with the syntax you have there, try this:

$(window).on('scroll', function () { 
  if ($(window).height() + $(window).scrollTop() >= $(document).height() - 100) {
    alert('do stuff');  
  }
});

Upvotes: 1

Related Questions