CODEWITHSUNDEEP
javascriptjqueryscrollchat
yoda
yoda

Reputation: 10981

Make div content go up inside parent

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>

Upvotes: 0

Views: 453

Answers (3)

JSuar
JSuar

Reputation: 21091

Solutions found similar to what you are describing:

There are some other solutions here:

Upvotes: 3

Stelian Matei
Stelian Matei

Reputation: 11623

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);

Upvotes: 3

Jivings
Jivings

Reputation: 23250

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.

Upvotes: 1

Related Questions