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 )
great piece of code man...you did good. But have you figured a solution to the double and sometimes triple load? If you scroll too fast, it will load the data twice and sometimes thrice...
check it out http://www.afrikaspeaks.com
Hey...just wanted to let you know that I fixed the repetitive data display. It had to do with the loader. Make sure that it's set outside the main content area. eg
if your content is 600px. set your load_msg_loader to say 700px and a negative top margin of say -100px and aligned to right! this solved mine for me. You can see it at work on my news portal www.afrikaspeaks.com
Thanx man
Just what I needed. Thank you very much for posting this!
very helpfull, thx for sharing
Thanks a lot for sharing knowledge
Hey, thanks very much for sharing this piece of code. I've modified it a bit to fit my video blogging site, and it really ads a useful effect. I still have a little trouble with double results if scrolling down too fast, but it's not serious.
Best!
Dan
repetitive data-issue:
you could also do something like setting a variable if there is content to load. while this is true, the last_msg_funtion() will not be called. if the feedback comes, you set it back:
if (data != "") {
$(".message_box:last").after(data);
// here you set the loadData variable to false
}
i've done something like that here http://deschavü.ch/dejavu, and tested it on firefox3.6, Safari4, Opera(quiteNew), ie7 and ie8. it worked in all these browsers, but in firefox, when you reload the page and you're on the bottom of all entries.
THX for the code BTW$$$
hello, how if I want to get new records from database for every 10 seconds? The conflict between the two features below :
1) feature of reload page for every 10 seconds to get new records.
2) feature of get older records when user scroll down to the page.
Because both features above are depend on the same variable $last_msg_id, how can I solve the conflict between the two features?
thank u it works :)
Hi Sri,
This is a great tutorial.
I tried this for my application.
But the problem come, when user scroll down very fast.It loads the data multiple time....
Any idea how can we overcome from this issue.
Thanks,
Gaurish
Hi, how to create similar function which loads data by clicking "Load More" button instead of scrolling down? I want to implement at http://www.livepage.info Thank you!
@Livepage
Try this http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html
Cant fix double load.
PLease help
thank you very much
U did great.Can i reload the content in particular div instead of whole document??? Please help me!
how to fix this double load problem . maximum times it loads three four times the second page contents.please tell if anyone has solved this problem
Set a variable to prevent it from being called. Some of the names are changed slightly in my example, but this fixes it:
var bSuppressScroll = false;
$(document).ready(
function()
{
function last_msg_funtion()
{
var ID=$(".search-result-list-element:last").attr("id");
$('div#loading').show();
$.post($('div#next_message_location').html() + "?p=" + ID,
function( data )
{
if (data != "")
{
$(".search-result-list-element:last").after(data);
window.bSuppressScroll = false;
}
$('div#last_msg_loader').empty();
$('div#loading').hide();
} );
};
$(window).scroll(function(){
if ( ( $(window).scrollTop() == $(document).height() - $(window).height() ) && window.bSuppressScroll == false ){
last_msg_funtion();
window.bSuppressScroll = true;
}
});
});
Excelente site, ótimo conteúdo...
The script aint working in IE, not your demo either.
thanks, helped me a lot,, very very good,
Thank you Mark Lane !
That worked for me. No more double posts.
This seems to be almost exactly what I need to make my site actually function! I'm so close, I can taste it! Right now I have a site using the Wordpress eCommerce Plugin (getshopped.org) to sell prints. There ultimately needs to be ~7000 products on a single page and as you might imagine the page takes AGES to load as it is right now with only 3000 products on the page. How would I implement this into my WPEC products page so I can actually make my site usable instead of the bloated Frankenstein of a page that it is right now?
this code is nice but if can fix the issue
the issue is
the show more function u have created is called when user scroll down. but if i already loaded the maximum results then the loader should not load, this may create confusion to user that there may be still more data to be loaded.
what do u say.
i got an error "Could not connect database"..please help how to fix this..
it works but on top of all i get these 2 errors:
Notice: Undefined index: last_msg_id in /opt/lampp/htdocs/reg/load_data.php on line 5
Notice: Undefined index: action in /opt/lampp/htdocs/reg/load_data.php on line 6
This is possible in blogspot?
multiple fetches occur
ps on ie it always fetches3 time
I have problem with Internet Explore, Rows duplicate....
Hi I am working inside an overflow div.In which i used an internal scroll-er with fix height and width of that div container now i want to use the auto load on that container scroll down.
:)
what if in
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];
if($action <> "get")
{
$last_msg_id and $action are not set :(
Great post.
Use This To Avoid Error Reporting
"get")
{
?>
Thanks a lot!