Question

I have a script doing a task much like a regular chat. Whenever I load new messages I fill a div like this:

....
<div class="conversation">
   <span class="sender">Sender: </span><span>Message sent by sender..</span>
</div>
....

Then, using jQuery I do something like this:

var lastOne = $("div.conversation:last", itemBox).offset();
itemBox.scrollTop(lastOne.top);

When I’m having a few (~40 messages) it works ok, but when the list grows too large, it starts calculating the offset wrong. This happens specially with large messages, taking over 3 lines. I’m not using any float inside the chat box (parent of all div.conversation), so I’m really shocked here…

Thanks in advance

Answer 1

Okay,

I’m not much of a fan of doing this whole “answering my question” thing, but I’m less of a fan of leaving an open question. The position function does work on jQuery with some major browsers, but I haven’t figured out why.. it dies with FFx 4, at the point I had to calculate the height of all the divs in the box, much like this:

var itemBox = $("#conversation5");
var loader = $("div.conversation", itemBox);
var sum = 0;

for (var i = 0; i < loader.length; i++)
   sum += $(loader[i]).innerHeight();

itemBox.scrollTop(sum);

It works flawlessly on all browsers, admitedly, not the prettiest solutions, but works nontheless.