javascript - JQuery dynamic update div content, jump by scroll position -


i have problem im not able solve in past days. writing simple chat based on php + jquery. have div chat content:

<div class="conversation-message-list" onclick="hideemoticons()">     <div id="note">new message</div>     <div class="conversation-content">         <div class="row">            message         </div>      </div> </div> 

with jquery call function refreshchat. selects new messages mysql , appends conversation-content this:

$(".conversation-content").append(data.chat); 

chat window scrolling when there many messages. need is: when chat window scrolled @ bottom (user view last message), new message appends , automatic scrolled last message. if user scrolled , new message append, show message (in code id="note") not scroll last message.

in summary, need same function on fb chat - if scrolled up, warning of new message shown in chat window. if chatting , see bottom of chat, new message shown , scrolled on it.

im in vicious circle, tried play $(".conversation-message-list").innerheight() , $(".conversation-message-list").scrolltop() , $(".conversation-message-list")[0].scrollheight) im not able do, need. thank you.

here example of refreshchat function:

function refreshchat() {     var id = "'.$convers_id.'";     var receiver = "'.$system->getfirstname($second_user->full_name).'";     $.getjson("'.$system->getdomain().'/ajax/refreshchat.php?id="+id, function(data) {         if(data.kod != "" && data.kod != " " && data.isnew == "1") {         // here want implement function             $(".conversation-content").append(data.chat);         }     } } 

you can check if user's scroll @ bottom of chat container when new message coming , set $(".conversation-message-list").scrolltop() large value (or .scrolltop() value of new message dom element if have access it) scroll @ bottom:

var $chatcontainer = $('.conversation-message-list');  function isscrollatthebottom () {     var scrolltop = $chatcontainer.scrolltop(),             height = $chatcontainer.outerheight();      return scrolltop + height >= $chatcontainer[0].scrollheight; }  function refreshchat() {     var id = "'.$convers_id.'";     var receiver = "'.$system->getfirstname($second_user->full_name).'";     $.getjson("'.$system->getdomain().'/ajax/refreshchat.php?id="+id, function(data) {         if(data.kod != "" && data.kod != " " && data.isnew == "1") {             // here want implement function             $(".conversation-content").append(data.chat);              if (isscrollatthebottom()) {                 $chatcontainer.scrolltop($chatcontainer[0].scrollheight)             }         }     }) } 

Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -