CODEWITHSUNDEEP
jqueryhtmlcss
Adam
Adam

Reputation: 20882

Jquery Chat Box - Show first messages at bottom of DIV moving up

I have a Chat DIV that sends and receives messages.

Currently messages start at the top of the DIV and work down the DIV (shown in red) and when they hit the bottom they are pushed upwards with Jquery like below:

.scrollTop(activeConversationsDIV[0].scrollHeight);

enter image description here

I wanted to ask if there is method to start the messages at the bottom of the DIV? This would make more sense to a user as they would see what they are typing close to where they type it.

Is there a way to start the flow of messages from the bottom of the DIV working upwards?

thankyou

Upvotes: 4

Views: 8741

Answers (2)

Ajith S
Ajith S

Reputation: 51

Here is an example with positioning

HTML

<div id="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

CSS

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}

JQuery

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

jsfiddle with scroll

jsfiddle without scroll

Upvotes: 0

Magnus Engdal
Magnus Engdal

Reputation: 5624

You can use display: table, display: table-cell and vertical-align: bottom.

Here is an example:

http://jsfiddle.net/ktpRK/

CSS

#chat {
    display: table;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

.chatMessage {
    display: table-cell;
    vertical-align: bottom;
}

HTML

<div id="chat">
<div class="chatMessage">
    <p>test</p>
    <p>test 2</p>
</div>
</div>

Upvotes: 5

Related Questions