Grow your CSS skills. Land your dream job.

Can this be executed more than once?

  • # June 10, 2013 at 8:51 pm

    Hi,

    I’ve written some simple jQuery to load an external html file when the user reaches the end of scroll. So far I’ve only been able to execute the function one time…allowing only one external file to load. I’m curious if anyone can suggest a method for calling the function each time the scroll reaches the bottom…thus loading a new external file each time.

    Here is what I have:

    $(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() – $(window).height()) {
    $.get(‘page2.html’).success(function (data) {
    $(‘#content’).html(data);
    });
    }
    });

    Any help is appreciated. Thank you

    # June 11, 2013 at 4:21 am

    I don’t see why this doesn’t run more than once (loading the same content multiple times though). To fix the latter you can do something like:

    var $window = $(window), // for efficiency
    $document = $(document),
    pages = ,
    nextPage = 0;

    $window.scroll(function () {
    if (nextPage < pages.length &&
    $window.scrollTop() == $document.height() – $window.height()) {
    $.get(pages[nextPage]).success(function (data) {
    $(‘#content’).append(data);
    });
    nextPage++;
    }
    });

    # June 11, 2013 at 9:39 am

    @crocoDillon

    > I don’t see why this doesn’t run more than once (loading the same content multiple times though)

    I continued to hack at this after I posted the question last night and ended up changing **.html(data)** to **.append(data)**. It did exactly what you describe…looping the append. Your above solution seems to fix that though. And for that, I thank you.

    Cheers

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".