I'm trying to get this infinite load script to work in my project.

Here's my HTML:

<!-- Contents -->

<div id=page-container>

  <div id=scroller>

    <div id=page_1 class=pagina></div>

    <div id=page_2 class=pagina></div>

    <div id=page_3 class=pagina></div>

    <div id=page_4 class=pagina></div>

    <div id=page_5 class=pagina></div>

    <div id=page_6 class=pagina></div>

  </div>

</div>



<div id=pages-to-load>

  <div id=page_7 class=pagina></div>

  ...

  <div id=page_25 class=pagina></div>

</div>

And here's the script:

function scrollalert(){

  var pages = document.getElementById(scroller).getElementsByTagName(div);

  var currentPageId = pages[pages.length - 1];

  //console.log(currentPageId is: +currentPageId);

  var scrollbox = document.querySelector('#page-container');

  var scrolltop = $(window).scrollTop();

  var scrollheight = scrollbox.scrollHeight;

  var windowheight = $(window).height();

  var scrolloffset=20;

  console.log(scrolltop);

  console.log(scrollheight);

  console.log(windowheight);

  console.log(scrollheight-(windowheight+scrolloffset));

  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {

    //fetch new items

    console.log(loading more pages);



    (function() {

      alert('test');

      var i;

      var pagesToLoad = $(#pages-to-load > div).size();

      for (i = 0; i < pagesToLoad; i++) {

        console.log(pagesToLoad[i].id);

        $.get(pagesToLoad[i].id, function(newitems){

          alert('get new page');

          $('#scroller').append(newitems);

          updatestatus();

        })

      };

    })();

  };

}

Whatever I try, I can't seem to load and append my new pages. Also when scrolling down, my scrollTop and scrollHeight don't change. I'm sure I'm missing something obvious here. Also my pages-to-load is undefined?