What's going on in this infinite scrolling script?

Question

I found this infinite scroll script. It works, but I don't understand this line:

'contentData': {}, // you can pass the children().size() to know where is the pagination

when I change it to something like this:

'contentData': {xyz:($('#content').children().size())},

The value is the same every time. In my example, when I call alert(($('#content').children().size())) in the afterLoad section, the value is correct (on every scrollevent different). I don't understand how to set contentData to different values (like 10 on the first load, 20 on the second load, etc.).

Here's my script:

$(function(){
    $('#content').scrollPagination({
        'contentPage': '/democontent.php', // the page where you are searching for results
        'contentData': {xyz:($('#content').children().size())}, // you can pass the children().size() to know where is the pagination
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
        'beforeLoad': function(){ // before load, some function, maybe display a preloader div
            $('#loading').fadeIn(); 
        },

        'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
            $('#loading').fadeOut();
            var i = 0;
            $(elementsLoaded).fadeInWithDelay();
            alert(($('#content').children().size()));

            if ($('#content').children().size() > 10000){ // if more than 100 results loaded stop pagination (only for test)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
            }
        }
    });

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };
});

What happens if you remove the `xyz:($('#content').children().size())` from {}? It's not in the live example. It says that you CAN pass the information. There's no need — OptimusCrime, Nov 16 '11 at 11:43
when i remove xyz:($('#content').children().size()) the democontent.php dont receive the $_POST data xyz. i want to use these POST data to increase the limit in a mysql query. — user1049535, Nov 16 '11 at 11:48

score 4 · Answer 1 · answered Dec 20 '11 at 20:21

I just worked with this piece of code and had the same problem. Then I looked for answer in the .js file we use : scrollpagination.js

In this some jQuery functions are defined. And the first is :

$.fn.scrollPagination.loadContent = function(obj, opts){...}

This is the one which call our page (target) each time the scroll is in the bottom enough. In fact this is defined once and only once, so if you give argument like $("#targetDiv").children().size(), it will take this once and put the first value in the target each time.

The idea is to pass an argument which will be used in javascript (here jQuery) to update the value : a function;

Basically you just have to do this :

'contentData': {xyz:function() {return $('#content').children().size()}},

And each time the function will be used it will calculate the return value.

Hope this helped, and forgive please forgive my poor english.

score 1 · Answer 2 · answered Nov 16 '11 at 11:46

If you want to keep track of how many loads your script is doing. Try this:

$(function(){
    var loads = 0;
    $('#content').scrollPagination({
        'contentPage': '/democontent.php?loads='+loads, // the page where you are searching for results
        'contentData': {}, // you can pass the children().size() to know where is the pagination
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
        'beforeLoad': function(){ // before load, some function, maybe display a preloader div
            $('#loading').fadeIn(); 
        },

        'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
             $('#loading').fadeOut();
             var i = 0;
             loads++;
             alert('Number of loads is now: '+loads);
             $(elementsLoaded).fadeInWithDelay();
                alert(($('#content').children().size()));
             if ($('#content').children().size() > 10000){ // if more than 100 results loaded stop pagination (only for test)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
             }
        }
    });

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };

});
</script>

Is this script included in the content coming back? If so, it looks like you could be setting loads to 0 each time at the top of the script. I'm not sure on the internals of the script, but it's using .load(page) without a selector [a lot of infinite scrollers use this technique], then it really runs through .html() and executes scripts before removing them. See the .load() docs. http://api.jquery.com/load/ — easement, Nov 16 '11 at 16:11

What's going on in this infinite scrolling script?

2 Answers2

Linked