Question

I’m having trouble undesrtanding how the script exacly works, and what can i do to improve it, minify etc. I’d also like to find a way for appending button, that would stop the function (sort of disable autoloading of content button), do you have any idea? Here’s the code: (the most important part for me is to understand the code)

var page = 1;
var pageLast = 1;
var stop = false;
function lastPostFunc() 
{ 

    $('div#loading').html('loading data ...') ;
    page += 1;
    if (page+1 > pageLast) {
        stop=true;
    }
    var objURL = new Object();
    window.location.search.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
        objURL[ $1 ] = $3;
        }
        );
    q = '?strona='+page
    for (var k in objURL){
        if (k != 'strona' ) 
            q += ('&'+k+'='+objURL[ k ])
    }
    data = $('<div/>').load( "/shop/category/example/" + q +' #produkt_lista',function() {
        $('.produkt .opis',$(this)).each( function() { $(this).css('display', 'none'); } );
        $('a.jt').cluetip({ cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false, sticky: false, mouseOutClose: true, showTitle: false, closeText: 'zamknij', width: 300, positionBy: 'mouse', topOffset: 0});
    });
    if (data != "") {
        $('.paginator').hide();       
        $("#produkt_lista").append(data);            
    } 
    $('div#loading').empty();
}; 

$(document).ready(function() { 

pageLast = parseInt( $('.paginator .paginate-pages').first().text().replace('Stron: ',''));
$('#produkt_lista').after( $('<div id="wczytywanie" style="display: none; font-weight: bold; font-size: 20px; line-height: 40px; color: red; margin: 20px auto; width: 300px; border: 1px solid red;"></div>') );
$(window).scroll(function(){
        if  ($(window).scrollTop()+200 > $(document).height() - $(window).height()){
           if (!stop) lastPostFunc();
        }
});
} );

Answer 1

The script basically binds that lastPostFunc() function to the $(window).scroll() event. It says if the user scrolls down to the bottom 200px of the screen, JavaScript should fire that function.

All the function does is show a loading div, likely a modal or overlay, and then fetches the next page of data:

• /shop/category/example/?strona=1#produkt_lista
• /shop/category/example/?strona=2#produkt_lista
• /shop/category/example/?strona=3#produkt_lista

..and so on. It then iterates over all the nodes which match the CSS class .produkt .opis and hides them using $(this).css('display','none');. It should just be using $(this).hide();, but it’ll work either way.

After that it binds a cluetip plugin to all the anchors with the class .jt and passes in some various plugin parameters. I imagine that is so you can hover those with your mouse and some fancy tooltip will appear near your cursor.

Finally it checks if data is not empty and hides the paginator element (dont know why) and appends the newly fetched HTML-wrapped data to the existing data inside #produkt_lista.