This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.
Download Script 
Live DemoDatabase Table
CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);
Browser Capability : Safari, Firefox, IE, Chrome
load_data.php
When we are scrolling down a webpage, the script($(window).scroll) finds that you are at the bottom and calls the last_msg_funtion(). Take a look at $.post("") eg: $.post("load_data.php?action=get&last_msg_id=35")
<?php
include('config.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];
if($action <> "get")
{
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,
function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
</script>
</head>
<body>
<?php include('load_first.php'); //Include load_first.php
?>
<div id="last_msg_loader"></div>
</body>
</html>
<?php}
else
{
include('load_second.php'); //include load_second.php
}
?>
load_first.php
Contains PHP code to load 20 rows form the message table.
<?php
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" >
<?php echo $msg; ?>
}
?>
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" >
<?php echo $msg; ?>
</div>
<?php}
?>
load_second.php
Contains PHP code to load 5 rows less than last_msg_id form the message table.
<?php
$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");
$last_msg_id="";
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" >
<?php echo $msg;
?>
</div>
<?php}
?>
CSS
body
{font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}
.message_box
{height:60px;
width:600px;
border:dashed 1px #48B1D9;
padding:5px ;
}
#last_msg_loader
{text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}
.number
{float:right;
background-color:#48B1D9;
color:#000;
font-weight:bold;
}
ASP Version tutorial : webresourcesdepot.com
and as of 07/2009 jquery is up to version 1.3.2
It's working with jquery 1.3.2 also...
Nice information
http://www.quirksmode.org/dom/events/scroll.html
I wish you included a real javascript version (not with jQuery) so we can implement this with a few lines of proper javascript without having to load the entire jQuery framework.
That's what's frustrating with jQuery, it's that nobody is writing custom javascript code anymore!...
This works great thanks...
I had a quite the dilemma. I was loading a rather large user list into a facebox modal window. It was taking about 6 seconds to display the entire list. At first I thought I'd just paginate the list, but things got real complex quick.
So I adopted your code above to my facebox and it works great.
Thanks for saving me a good amount of time.
For those of you interested in using this one a scrollable DIV instead of a window try using this code for scroll function:
$('div.content').scroll(function(){
if ($('div.content').scrollTop() + $('div#facebox').height() >= $('div.content').height()) {
last_msg_funtion();
}
});
I will invite you to Ghana. Next Year.
Ebow Ansah
its awesome dude
gr8 work
@arvind.b
thank you!
it doesn't work unless you scroll slowsly. I tried your demo in IE and firefox to confirm. The reason is, it would pass the same id twice, if second scroll event occurs, while secondload.php is still fetching data.
thank you so much
Hello!
After many test, This script is fine but not scalable. I meet bug everywhere and for all browser when i try to mix it with some jquery or put the script inside js file.
It return this error code :
-- Chrome :
Uncaught TypeError: Object function (D,E){return new n.fn.init(D,E)} has no method 'setInterval' ---
---IE8 :
Détails de l’erreur de la page Web
Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.2; .NET CLR 3.0.30729)
Horodateur : Thu, 4 Feb 2010 21:38:11 UTC
This object don't support this http://.../livehome.js
how can i make it cycle through a given string of id's like "[2,21,114,3]" instead of adding on the previous hit?
Thanks, but how can I insert it to the php form I use?
Hey I want my webpage load like flickriver.com
i am not getting any script.
even I tried this script but it is not working, can anybody tell me how to implement it.
if live chat possible, it would be great.
id:- manpreetsingh.rism@gmail.com
thanks
nice article, but anybody knows how to do it in asp.net.
thanks
finally i found it.
Thanks for the code.
it really helped. :D
Thank for lesson )