CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
chethanks
chethanks

Reputation: 47

Div tag Scrolling to bottom

I have gone through all related questions. But didn't find any answer. My question is i have scrollable div tag, a chat window, in which images can be dropped as well. I have span tag at the end of every message so using this code the div tag scrolls properly to the bottom.

var EndChat = $(myid);
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);

But When i append Image after resizing it, It doesn't get to the bottom. It stop at 1/4th of the image.

And when the chat loads in the beginning, if there are many images, the scrolling stops even more far from the bottom. Please Help

Upvotes: 0

Views: 322

Answers (2)

Josh Toth
Josh Toth

Reputation: 764

In order to make sure the images have loaded before scrolling, attach an event to the load, something like this:

$('.chat img').on('load', function() {
    var chat_target = EndChat.find('span').last();
    EndChat.scrollTo(chat_target, 1000);
});

If I'm not mistaken, whenever an image in .chat is loaded, it'll trigger the scroll to the footer. You could modify it as necessary :)

Upvotes: 1

Shawn31313
Shawn31313

Reputation: 6052

Why don't you scroll to the bottom of the chat using:

EndChat.scrollTop(EndChat[0].scrollHeight);

It works: http://jsfiddle.net/shawn31313/mb6JA/

Upvotes: 2

Related Questions