It'll go something like this...
HTML
JQUERY
$(document).ready(function(){
$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);
$('#chatBox').scroll(function(){
if ($('#chatBox').scrollTop() == 0){
// Do Ajax call to get more messages and prepend them
// To the inner div
// How you paginate them will be the tricky part though
// You'll likely have to send the ID of the last message, to retrieve 5-10 'before' that
$.ajax({
url:'getmessages.php',
data: {idoflastmessage:id}, // This line shows sending the data. How you get it is up to you
dataType:'html',
success:function(data){
$('.inner').prepend(data);
$('#chatBox').scrollTop(30); // Scroll alittle way down, to allow user to scroll more
};
});
}
});
});
EXAMPLE HERE
// GENERATE FIRST BATCH OF MESSAGES
//This will be where you do your SQL and PHP first
for(var i=0;i<20;i++){
$('.inner').prepend('First Batch messages
'+Date()+'
');}
$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);
// Assign scroll function to chatBox DIV
$('#chatBox').scroll(function(){
if ($('#chatBox').scrollTop() == 0){
// Display AJAX loader animation
$('#loader').show();
// Youd do Something like this here
// Query the server and paginate results
// Then prepend
/* $.ajax({
url:'getmessages.php',
dataType:'html',
success:function(data){
$('.inner').prepend(data);
};
});*/
//BUT FOR EXAMPLE PURPOSES......
// We'll just simulate generation on server
//Simulate server delay;
setTimeout(function(){
// Simulate retrieving 4 messages
for(var i=0;i<4;i++){
$('.inner').prepend('Newly Loaded messages
'+Date()+'
');
}
// Hide loader on success
$('#loader').hide();
// Reset scroll
$('#chatBox').scrollTop(30);
},780);
}
});
body {font-family:Arial;}
#chatBox {width:300px;height:400px;border: 1px solid;overflow:scroll}
#loader {display:none;}
.messages {min-height:40px;border-bottom:1px solid #1f1f1f;}
.date {font-size:9px;color:#1f1f1f;}
This example just shows a quick and dirty scroll, with prepend. No ajax call or anything. But you get the idea
It'll likely be a little more complex then what I posted above though....to avoid double data, etc
And also, you need to send the server the id of last post, or pagination data of sorts, so it know what to retrieve next. How you do that is your choice.
But basically youll query the server, and retieve the next 10 posts, and echo them in a foreach loop, then fetch that html, and display it
