Make div content go up inside parent

Question

I need to make a certain div contents to simulate a scroll, when new data is added, kind of like facebook chat. How do I go about this? I'm using jQuery.

Here's a markup sample :

<div id="chat-messages">
   <div class="msg">John Doe says : Hi!</div>
</div>

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

Solutions found similar to what you are describing:

Load Data From Server While Scrolling Using jQuery AJAX: http://www.codeproject.com/Articles/239436/Load-Data-From-Server-While-Scrolling-Using-JQuery

There are some other solutions here:

edited May 23 '17 at 12:27

Community

1
1

answered Feb 09 '12 at 12:54

JSuar

20,828
4
42
81

@EvilP I didn't know this. Thanks for the pointer. I will update my answer. – JSuar Feb 09 '12 at 12:58

score 3 · Accepted Answer · answered Feb 09 '12 at 13:01

First, you need to put a fixed height (height: 400px) on the container div (chat-messages) and a scroll(overflow-y:scroll) for vertical content to make the scroll appear.

Next, when a new message is posted, you need to scroll down using javascript. For example:

$(".chat-messages").attr({ scrollTop: $(".chat-messages").attr("scrollHeight") });

Or animate the scroll:

$(".chat-messages").animate({ scrollTop: $("chat-messages").attr("scrollHeight") }, 1000);

score 1 · Answer 3 · answered Feb 09 '12 at 12:54

1

This will append new content at the bottom of a div. I guess that's what you want.

$('#chat-messages').append(newdiv);

But I think you need to do a bit of background reading. Check this out.

answered Feb 09 '12 at 12:54

Jivings

22,276
6
54
98

Make div content go up inside parent

3 Answers3