Auto Load More

HTML

<div id="results">hi</div>

CSS

#results{
    display:inline-block;
    height:160px;
    overflow-y: scroll;
}

JavaScript

$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = 3; //total record group(s)
    var div_bottom_buffer = 150;
    
    for(var i=0; i<total_groups; i++)
        $("#results").append("<div>" + Math.random() + "</div>");
    //$('#results').load("autoload_process.php", {'page':track_load}, function() {track_load++;}); //load first group
    
    $("#results").scroll(function() { //detect page scroll
        //if($("#results").scrollTop() + $("#results").height() == $(document).height())  //user scrolled to bottom of the page?
        if($("#results")[0].scrollHeight - $("#results").scrollTop() < $("#results").height()+div_bottom_buffer)
        {
            
            if(track_load <= total_groups && loading===false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                //$('.animation_image').show(); //show loading image
                $.mobile.loading( "show", { text: "Loading...", textVisible: "visible", theme: "a"});
/*
                //load data from the server using a HTTP POST request
                $.post('autoload_process.php',{'group_no': track_load}, function(data){
                                    
                    $("#results").append(data); //append received data into the element

                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received
                    
                    track_load++; //loaded group increment
                    loading = false; 
                
                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
                    
                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;
                
                });
*/
     ...