Load data on scroll up like facebook chatting system [closed]

Question

i am developing a chat system where i need to display chat history on scroll up function like Facebook chat system.

can anybody help me?

Answer 1

It'll go something like this...

HTML

<div id="chatBox">
     <div class='inner'>
     <?php foreach($messages as $m){;?>
       <div class='message'><?php echo $m;?></div>
    <?php ;};?>
     </div>
</div>

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('<div class="messages">First Batch messages<br/><span class="date">'+Date()+'</span> </div>');}


$("#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('<div class="messages">Newly Loaded messages<br/><span class="date">'+Date()+'</span> </div>');
            }
            // 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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatBox">
<!--Loading ANIMATION-->
<img id="loader" src='http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif'>
<!--END LOADING ANIMATION-->
    
    <div class='inner'>
        <!-- WHERE YOU WILL LOAD CONTENT-->
    </div>
</div>

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