Loading new content when user scrolls to bottom of page

[jbyrne]

Hello

Basically I have found and adapted the code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#projectscontainer').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in...

I want the new content to appear below "#projectscontainer'"

Why won't this work? Anyone know?

Thanks

[jbyrne]

Incase anyone wanted to know,
I changed the line to:

if($(window).scrollTop() + $(window).height() == $(document).height()) {

but now each page after page two loads into the wrong div...

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#content').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The div 'content' holds already a few divs, when the user hits the bottom of the screen, the new page (page2.html) loads into the 'content' div, they all load below as is expected.

Unfortunately, the page3.html (Which has the same content as 'page2.html) then loads below the footer... (which is set to position:relative; ) below everything else...

is there any reason why the next page would load into a different location?

Thanks!

[jscheuer1]

Are you sure? You would need to use a DOM inspector or other development tool that can show the generated DOM or source code to actually see what element the imported page ended up in.

The problem might be css on the imported page or even on the importing page, or possibly a combination of the two.

And/or, if the imported page has its own DOCTYPE, html, and/or body tags, that might be a factor.

You could also experiment with alternatives to:

$('#content').children().last().after(data);

like:

$('#content').append(data);

Or:

$('#content').html($('#content').html() + data);

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.