Load More Posts onScroll (PHP/Ajax/jQuery)

Load More Posts onScroll

Thursday, December 1, 2011 by William Thomas

PHP:

index.php, file with the first page of content

<?php

mysql_connect("server", "username", "password");
$q = mysql_query("SELECT * FROM your_database.table LIMIT 0, 5"); //change the "5" if different from rows per page
while($r=mysql_fetch_array($q)){
$list .= $r['text'].'<br>';
}

echo '<div id="list">'.$list.'</div>';

load-more.php, where one page of content will be loaded at a time.

<?php

//PAGE NUMBER

if($_GET['page']){
$page = $_GET['page'];
} else {
$page = 1;
}

//ROWS PER PAGE & OFFSET

$rrp = 5;
$offset = ($page-1)*$rrp;

//SHOWS A SPECIFIC PAGE OF CONTENT

$q = mysql_query("SELECT * FROM your_database.table LIMIT $offset, $rrp");
while($r=mysql_fetch_array($q)){
$list .= $r['text'].'<br>';
}

//SHOWS IN THE #list ELEMENT WHILE GOING TO THE BOTTOM THE MAIN PAGE

echo $list;

Ajax/jQuery

Place in the <head> of index.php

window.onscroll = load_more;
var page = 1; //PAGE NUMBER ALREADY SHOWN

function load_more(){
var doc_h = document.body.scrollHeight; //DOC HEIGHT
var win_h = document.body.clientHeight; //WINDOW HEIGHT
var d = doc_h-win_h; //DIFFERENCE OF DOC & WINDOW HEIGHT
var yOffset = window.pageYOffset; //WINDOW SCROLLBAR Y OFFSET

//IF SCROLLBAR OFFSET EQUALS DIFFERENCE

if(yOffset==d){
page++; //LOAD THE NEXT PAGE ONE AT A TIME
$.get("load-more.php?page="+page, function(data){
$("#list").append(data); //WILL SHOW IN THIS ELEMENT IN 'index.php';
});
}
}

</script>

Views: 237 Likes: 0 Dislikes: 0

Email:
Password:
	Keep me logged in

Email: