replicate ios chat box

by ZachWills

HTML

<div class="chat-window">
    <div class="chat clearfix">
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
    </div>
    <div class="bottom">
        <input type="text" value="Hey!!!" />
        <input type="button" value="Send" />
    </div>
</div>

CSS

* {
    position:relative;
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-transition: bottom 0.2s ease-in-out;
    -moz-transition: bottom 0.2s ease-in-out;
    -o-transition: bottom 0.2s ease-in-out;
    transition: bottom 0.2s ease-in-out;
    font-family:"Arial";
    line-height:20px;
    font-size:14px;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* start commented backslash hack \*/
 * html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* close commented backslash hack */
 .chat-window {
    display:block;
    position:relative;
    z-index:1;
    width:320px;
    height:480px;
    padding:10px;
    margin:auto;
    background:#222;
    border-radius:10px;
    margin-top:30px;
}
.chat {
    background:white;
    height:85%;
    padding:10px;
    overflow:scroll;
    z-index:5;
}
.chat-bubble {
    width:auto;
    border-radius:10px;
    padding:5px 12px;
    margin-bottom:5px;
    max-width:265px;
}
.chat-bubble.you {
    background:#49b1ff;
    color:white;
    clear:both;
    float:right;
}
.chat-bubble.them {
    background:#f3f5f7;
    color:#666;
    clear:both;
    float:left;
}
.bottom {
    padding:10px 0;
    z-index:9999;
    height:79px;
    background:#222;
}
.bottom input[type='text'] {
    width:82%;
}
.newchat {
    position:absolute;
    bottom:0;
    right:35px;
    z-index:10;
    max-height:90px;
}

JavaScript

var textBox = $("input[type='text']");
var chatBox = $(".chat");
var sendBtn = $("input[type='button']");
chatBox.scrollTop(chatBox[0].scrollHeight);

sendBtn.click(function () {
    //make the reply bubble
    reply = '<div class="chat-bubble you">';
    reply += textBox.val();
    reply += '</div>';

    $(".chat-window").append('<div class="chat-bubble you newchat">' + textBox.val() + '</div>');

    //the margin amount + the height of the text
    offSetAmount = 13 + $(".newchat").height();
    chatBox.css({
        "padding-bottom": offSetAmount
    });

    //animate the box from the out of view into view
    chatBox.animate({
        scrollTop: chatBox[0].scrollHeight
    }, 400, function(){
         $(".newchat").css({
            bottom: 92,
            right: 35
        });
    });
    
    //after the 800ms reset the padding and add the real box
    setTimeout(function () {
        chatBox.css({
            "padding-bottom": 0
        });
        $(".newchat").remove();
        chatBox.append(reply);
    }, 800);
});