Load Data after page scroll down

Lets create a system where the records from mysql database will load after the user scroll down. This can be done with very simple php scripts and jQuery function.

jQuery Function

$(document).ready(function(){

$(window).scroll(function(){
scrollMore();
});

function scrollMore(){
if($(window).scrollTop() == ($(document).height() - $(window).height())){

var offset = $('[id^="myData_"]').length; 
var records = $(".allData").text();

$(window).unbind("scroll");
if(records != offset){
$("#loaderImg").html('<img src="images/ajax-loader.gif" />');
$("#loaderImg").show();
loadMoreData(offset);
}
}
}

function loadMoreData(offset){
$.ajax({
type: 'get',
async:false,
url: 'getMoreData.php',
data: 'offset='+offset,
success: function(data){
$("#loaderImg").empty();
$("#loaderImg").hide();
$(".loadData :last").after(data);
},
error: function(data){
alert("ajax error occured…"+data);
}
}).done(function(){
$(window).bind("scroll",function(){
scrollMore(); 
});
});
}


});

Write down the following code in getMoreData.php file.

<?php
include('connection.php');

$offset = (isset($_REQUEST['offset']) && $_REQUEST['offset']!='') ? 
$_REQUEST['offset'] : '';
$limit = 10;
$qry1 = mysql_query("select * from message limit ".$offset.", ".$limit."");
$i = ++$offset;
while($result = mysql_fetch_array($qry1)){ ?>
<div class="tableRow loadData" id="myData_<?php echo $i;?>">
<div class="firstColumn"><?php echo $i; ?></div>
<div class="secondColumn"><?php echo $result['url']?></div>
</div>
<?php $i++; } ?>

You can download the zip file from here.