I'm trying to create an AJAX im and am having trouble with an issue.
When a buddy sends a user a msg and that user does not currently have
the im box open for that buddy, it should create a new im box,
retrieve all msgs from the current conversation, and scroll to the
bottom of the div to display the latest msg. The problem is that when
a new im box is created, the scrollheight of the div containing the
im's returns just the default size, not the size after the msgs are
appended. If the im box is already open, the scrollheight function
works fine. Here is my code. I'm a noob to programming so go easy.
Thx in advance for your help, it is much appreciated!
//cycle through new messages
var messageCount = (typeof(data.messages) !==
'undefined' ?
data.messages.length : 0);
for (i = 0; i < messageCount; i++) {
var sender=data.messages[i].sender;
var msg=data.messages[i].message;
//if im box for buddy exists, append new msg
and scroll to bottom
if ($("div[name='"+sender+"']").length > 0) {
$("div[name='" + sender +
"']").append("<b>" + sender + ":</b> "
+ msg + "<br>");
var
height=$("div[name='"+sender+"']")[0].scrollHeight;
$("div[name='"+sender+"']").scrollTop(height);
}
//else create new im box, retrieve all msgs and
append to im, then
scroll to bottom
else{
//add im name to toolbar, and create
the im box
$('#toolbar').append('<li><a href="#"
class="im" name="' + sender
+ '"><span>' + sender + '</span></a><ul class="ulim" name="' + sender
+ '"><li><div class="receivedim" name="' + sender + '"></div><div
style="overflow: auto;"><textarea class="sendim" name="' + sender +
'"></textarea></div></li></ul></li>');
$.post("post/imajax.php", {
action: "check_old_ims",
sender: sender,
username: $("#username").val()
},
function(data){
var messageCount =
(typeof(data.messages) !== 'undefined' ?
data.messages.length : 0);
for (i = 0; i < messageCount;
i++) {
var
sender_old=data.messages[i].sender;
var
msg_old=data.messages[i].message;
$("div[name='"
+ sender + "']").append("<b>" + sender_old +
":</b> " + msg_old + "<br>");
}
},
"json");
$("ul[name='"+sender+"']").toggle();
// my issue is here,
as the scrollheight returns only the default size of the im box
var
height=$("div[name='"+sender+"']")[0].scrollHeight;
$("div[name='"+sender+"']").scrollTop(height);
}
}
}, "json");
return false;
