CODEWITHSUNDEEP
phpjqueryajax
max tech
max tech

Reputation: 69

cant scroll up the div contents

I have created a simple chat app . I have used setTimeout to refresh the messages every .5 ms and scrolltop to keep the scroll bar at the bottom. But the problem is that cant scroll up the message div.

<?php
session_start();
?>
<html>  
  <head>  
       <title>Live Table Data Edit</title>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  </head>  
  <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">  
                     <h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br />  
                     <div id="live_data"></div>                 
                </div>  
            <div id="messages" style="    border: 1px solid #ccc;
width: 350px;
height: 210px;
padding: 10px;
overflow-y:scroll;
display:none;"></div> 
            <div class="area" style="display:none">
            <textarea id="text" name="text"style="    border: 1px solid #ccc;
width: 350px;
height: 50px;
padding: 10px;" ></textarea>
            <input type="submit" id="sub" name="sub" value="Send" />
                </div>
           </div>  


<script>
var currentID = null;
var chatTimer = null;

function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
  $('#live_data').html(data);
  //fetch_chat();
    }
  });
}

function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
  id: currentID
},
dataType: "text",
success: function(data) {
  $("#messages").show();
  $('#messages').html(data);
  $("div.area").show();

  $("#messages").animate({ scrollTop: $(document).height() }, "fast");
  return false;
   chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time     
    }

  });
}

$(document).ready(function() {

  $(document).on('click', '.first_name', function() {
   currentID = $(this).data("id1");
   //immediately fetch chat for the new ID, and clear any waiting fetch 
     timer that might be pending
   clearTimeout(chatTimer);
   fetch_chat(); 
 });

$("#sub").click(function() {
var text = $("#text").val();

$.post('insert_chat.php', {
  id: currentID,
  msg: text
 }, function(data) {
  $("#messages").append(data);
  $("#text").val('');
  });
});

fetch_data();//this will also trigger the first fetch_chat once it completes
   });
   </script>
  </body>  
  </html>

when I put the setTimeout below scrolltop the return false statement stops its execution but then I am able to scroll up.

Upvotes: 0

Views: 69

Answers (1)

Jerdine Sabio
Jerdine Sabio

Reputation: 6140

Do you really need to scroll to the bottom of the message div every time there's a new message? Most messaging apps don't do that; they only scroll to the bottom at the beginning of viewing the messages since you want to see the newest ones.

Run Code Snippet. Notice that the auto scroll to the bottom is only executed once, if there are new messages, my scroll position stays the same (since I am still reading) but new messages are added. 

$(document).ready(function(){
 var i = 1;
 setInterval(fillUpChat,2000);
 var div_to_scroll = $("#messages-container")[0];
 div_to_scroll.scrollTop = div_to_scroll.scrollHeight;

 function fillUpChat(){
  $("#messages").append("<li>New Message "+i+"</li>");
  i++;
 }
});
#messages-wrapper{
 height:200px;
 border:1px solid black;
 padding:10px;
}

#messages-container{
 height:100px;
 overflow-y:auto;
 border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages-wrapper">
 <div id="messages-container">
  <ul id="messages">
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
  </ul>
 </div>
</div>

Upvotes: 1

Related Questions