Social Networks

Load Data while Scrolling Page Down with jQuery and PHP: in this tutorial  i will show you 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.

content loading while scrolling feature using jQuery, PHP and MySQL

Click here to download the script of Load Data while Scrolling Page

Click on below image to view live demo of Load Data while Scrolling Page:-

scrolling-page-date-load

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")
{
?>

<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; ?>
</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;
}

Reference Link – http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
ASP Version tutorial : webresourcesdepot.com

  1. responsive website design says:

    Now if we view this website on computer, it is advisable
    to avoid excess ads and pop-ups as these can distract users.
    But when one requires that same structure and allows it amount the breadth of
    a desktop computer or through a mobile device or desktop device, the basics are the same, albeit changed ever so
    slightly. Think about the variety of devices such as smart phones, tablets, and so on, businesses constantly needs to upgrade their web design and development problems for different
    mobile gadgets.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>