Bootstrap Snippet Chat Box Like Facebook using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="panel panel-chat">
        <div class="panel-heading">
            <a href="#" class="chatMinimize" onclick="return false"><span>Özgür Gürbüz</span></a>
            <a href="#" class="chatClose" onclick="return false"><i class="glyphicon glyphicon-remove"></i></a>
            <div class="clearFix"></div>
        </div>
        <div class="panel-body">
            <div class="messageMe">
                <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" alt=""/>
                <span>asdasdssadasdasdassssssssssssssssssssssssssssssssssssssssssdasdasd</span>
                <div class="clearFix"></div>
            </div>
            <div class="messageHer">
                <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" alt=""/>
                <span>asdasdsassssssssssssssssssssssssssssssssssssssss</span>
                <div class="clearFix"></div>
            </div>
            <div class="messageMe">
                <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" alt=""/>
                <span>asdasdssadasdasdassssssssssssssssssssssssssssssssssssssssssdasdasd</span>
                <div class="clearFix"></div>
            </div>
            <div class="messageHer">
                <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" alt=""/>
                <span>asdasdsassssssssssssssssssssssssssssssssssssssss</span>
                <div class="clearFix"></div>
            </div>
            <div class="messageMe">
                <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" alt=""/>
                <span>asdasdssadasdasdassssssssssssssssssssssssssssssssssssssssssdasdasd</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        *
        {
            -webkit-border-radius: 0px  !important;
            -moz-border-radius: 0px  !important;
            border-radius: 0px !important;
        }
        htlm, body
        {
            padding: 0;
            margin: 0;
            position: relative;
        }
        .clearFix
        {
            clear:both;
        }
        .panel.panel-chat
        {
            position: fixed;
            bottom:0;
            right:0;
            max-width: 350px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }
        .panel.panel-chat *
        {
            background: none;
            border: none;
        }
        .panel.panel-chat .panel-heading
        {
            background: #4b67a8;
            border: 1px solid #2e4588;
            color:#FFF;
        }
        .panel.panel-chat .panel-heading a:nth-of-type(1)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function(){
            $(".panel.panel-chat > .panel-heading > .chatMinimize").click(function(){
                if($(this).parent().parent().hasClass('mini'))
                {
                    $(this).parent().parent().removeClass('mini').addClass('normal');
                    $('.panel.panel-chat > .panel-body').animate({height: "250px"}, 500).show();
                    $('.panel.panel-chat > .panel-footer').animate({height: "75px"}, 500).show();
                }
                else
                {
                    $(this).parent().parent().removeClass('normal').addClass('mini');
                    $('.panel.panel-chat > .panel-body').animate({height: "0"}, 500);
                    $('.panel.panel-chat > .panel-footer').animate({height: "0"}, 500);
                    setTimeout(function() {
                        $('.panel.panel-chat > .panel-body').hide();
                        $('.panel.panel-chat > .panel-footer').hide();
                    }, 500);
                }
            });
            $(".panel.panel-chat > .panel-heading > .chatClose").click(function(){
                $(this).parent().parent().remove();
            });
        })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Chat Box Like Facebook"
Bootstrap 3.2.0 Snippet by OzGurbuz

Related: See More

Questions / Comments:

"Chat Box Like Facebook" Bootstrap 3.2.0 Snippet by OzGurbuz

Related: See More

Questions / Comments:

"Chat Box Like Facebook"
Bootstrap 3.2.0 Snippet by OzGurbuz