Infinite scroll javascript not running

Question

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.

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. — Waltzy, Jun 25 '12 at 19:11
In the console tab I'm getting `Uncaught ReferenceError: $ is not defined` — jaimerump, Jun 25 '12 at 19:41

score 1 · Answer 1 · answered Jun 25 '12 at 19:10

1

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');  
  }
});

answered Jun 25 '12 at 19:10

Lowkase

5,631
2
30
48

I copied this in and it still isn't popping up at all. I tried putting inside the head tags in the header file, in the footer file with the other javascript, nothing. – jaimerump Jun 25 '12 at 19:35
1

Then its not the scroll code that is broken. If you are running Chrome bring up the inspector and click on the CONSOLE tab. I am thinking your javascript is breaking somewhere before the window scroll code, meaning your window scroll code will never fire. Find your runtime javascript error(s), fix them and then try again. – Lowkase Jun 25 '12 at 19:37

Waltzy · Accepted Answer · 2012-06-25T20:10:03.990

1

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

edited Jun 25 '12 at 20:10

answered Jun 25 '12 at 19:59

Waltzy

1,113
4
14
31

For some reason, I tried adding that to the head and it didn't work, I tried adding it right above my script in the body and it didn't work, I added both the scroll script and the jquery include to the footer and it didn't work, then I put both back in the body exactly where I had them and now it works perfectly. The jquery include in the body now that I have it working is in exactly the same spot it was in the first time I tried it, and I don't have one above it anywhere, but suddenly it works. – jaimerump Jun 25 '12 at 20:18
then you may want to put your JQuery function inside this function `window.onload=function(){/* my code or function calls here */}` that will make sure that all the content has loaded before trying to execute any script. – Waltzy Jun 25 '12 at 20:28

Infinite scroll javascript not running

2 Answers2