This excercise about my top choice put Dzone like information stacking while page scrolling down with jquery and Php. We have heaps of information however can’t show all. This script encourages you to showcase small information and make quicker your site. Investigate live demo and span down.
Database Table
CREATE TABLE messages(
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”)
{
?>
$(document).ready(function()
{
function last_msg_funtion()
{
var ID=$(“.message_box:last”).attr(“id”);
$(‘div#last_msg_loader’).html(‘
‘);
$.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();
}
});
});
</head>
<body>
<?php
include(‘load_first.php’); //Include load_first.php
?>
</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’];
?>
<?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’];
?>
<?php
}
?>
Hello, I am not able to download the script as it leads to a broken link. Can you provide me with this script. Thanx.
Hi Marshal,
You can download it now, I have corrected link now.
Thanks
Team Vivacity
Is this complete and working? The code is bad! LOL…
Hi Michael,
I have re-uploaded it ,after testing it my local, so you can download it again and configur as per your need.
Let me know if you still facing any issue.
Thanks
Vivacity Team
Ah thats cool. I setup pagination for now. Doing a real estate site.. i will revisit the lazy load later.. its a pretty cool feature…
Thank you! i need infinite scroll for my homepage but i don’t think sql.
luckily i saw your post. and i complete it!
Great job, there is another one, it may help you too:
Ajax Scroll Paging Using jQuery, PHP and MySQL
http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and-mysql