HTML
=======
<style>
.chat_box { height: 130px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<span id="loading">Loading Please wait...</span>
<div class="chat_box">
<ul id="results">
</ul>
</div>
<span id="total"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
loadResults(0);
$(".chat_box").scrollTop($(".chat_box")[0].scrollHeight);
$('.chat_box').scroll(function() {
if($("#loading").css('display') == 'none') {
if ($('.chat_box').scrollTop() == 0){
var limitStart = $("li").size();
//$('#total').text(limitStart);
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "record_for_scroll.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
setTimeout(function(){
//var a=JSON.parse(data);
$.each(data, function(bb,value) {
$.each(value,function(key2,v){
//alert(value2.a);
if(limitStart > 0)
{
$('#results').find(" > li:nth-last-child("+limitStart+")").before("<li>"+v.b+"</li>");
}
else
{
$("#results").append("<li>"+v.b+"</li>");
}
});
});
$("#loading").hide();
$('.chat_box').scrollTop(100);
var total=$('li').size();
$('#total').text(total);
},780);
},
error: function (data) {
alert("Error");
console.log(data);
}
});
};
});
</script>
PHP
=======
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "chat";
if (isset($_POST['limitStart'] ))
{
$limitStart = $_POST['limitStart'];
$limitCount = 5; // Set how much data you have to fetch on each request
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT id,msg FROM chat ORDER BY msg_posted_on ASC limit $limitStart, $limitCount";
$result = mysqli_query($con, $query);
$data = array();
while($resultSet = mysqli_fetch_assoc($result)) {
$data[] = array(
'a' => $resultSet['id'],
'b' => $resultSet['room_msg']
);
}
echo json_encode(array("response"=>$data ));
}
?>
SQL QUERY UPDATE
================
select * from (select * from chat order by id desc limit 5 ) tmp order by tmp.id asc
=======
<style>
.chat_box { height: 130px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<span id="loading">Loading Please wait...</span>
<div class="chat_box">
<ul id="results">
</ul>
</div>
<span id="total"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
loadResults(0);
$(".chat_box").scrollTop($(".chat_box")[0].scrollHeight);
$('.chat_box').scroll(function() {
if($("#loading").css('display') == 'none') {
if ($('.chat_box').scrollTop() == 0){
var limitStart = $("li").size();
//$('#total').text(limitStart);
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "record_for_scroll.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
setTimeout(function(){
//var a=JSON.parse(data);
$.each(data, function(bb,value) {
$.each(value,function(key2,v){
//alert(value2.a);
if(limitStart > 0)
{
$('#results').find(" > li:nth-last-child("+limitStart+")").before("<li>"+v.b+"</li>");
}
else
{
$("#results").append("<li>"+v.b+"</li>");
}
});
});
$("#loading").hide();
$('.chat_box').scrollTop(100);
var total=$('li').size();
$('#total').text(total);
},780);
},
error: function (data) {
alert("Error");
console.log(data);
}
});
};
});
</script>
PHP
=======
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "chat";
if (isset($_POST['limitStart'] ))
{
$limitStart = $_POST['limitStart'];
$limitCount = 5; // Set how much data you have to fetch on each request
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT id,msg FROM chat ORDER BY msg_posted_on ASC limit $limitStart, $limitCount";
$result = mysqli_query($con, $query);
$data = array();
while($resultSet = mysqli_fetch_assoc($result)) {
$data[] = array(
'a' => $resultSet['id'],
'b' => $resultSet['room_msg']
);
}
echo json_encode(array("response"=>$data ));
}
?>
SQL QUERY UPDATE
================
select * from (select * from chat order by id desc limit 5 ) tmp order by tmp.id asc