Results 1 to 3 of 3

Thread: Loading new content when user scrolls to bottom of page

  1. #1
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Loading new content when user scrolls to bottom of page

    Hello

    Basically I have found and adapted the code:

    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
    Last edited by jbyrne; 03-12-2012 at 09:10 PM.

  2. #2
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    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...

    Code:
    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!
    Last edited by jscheuer1; 03-12-2012 at 11:57 PM. Reason: sense after merge

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    $('#content').append(data);
    Or:

    Code:
    $('#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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •