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
Post a Comment