<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="chats" class="container">
<div class="aligner">
<div class="chat-window col-md-3" id="chat_window_1">
<div class="chat-header col-xs-12">
<div class="col-xs-8">
<span class="glyphicon glyphicon-comment"></span><span class="username"> Mario</span>
</div>
<div class="col-xs-4 text-right">
<a><span class="glyphicon glyphicon-minus icon_minim"></span></a>
<a><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
</div>
</div>
<div class="toHide">
<div class="chat-body">
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
<time>10:07</time>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
</div>
<div class="chat-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div>
<div class="chat-window col-md-3" id="chat_window_2">
<div class="chat-header col-xs-12">
<div class="col-xs-8">
<span class="glyphicon glyphicon-comment"></span><span class="username"> Gaetano</span>
</div>
<div class="col-xs-4 text-right">
<a><span class="glyphicon glyphicon-minus icon_minim"></span></a>
<a><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
</div>
</div>
<div class="toHide">
<div class="chat-body">
<div class="row msg msg-received">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful, long looooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p>
<time>10:53</time>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
</div>
<div class="chat-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div>
<div class="chat-window col-md-3" id="chat_window_3">
<div class="chat-header col-xs-12">
<div class="col-xs-8">
<span class="glyphicon glyphicon-comment"></span><span class="username"> Luigi</span>
</div>
<div class="col-xs-4 text-right">
<a><span class="glyphicon glyphicon-minus icon_minim"></span></a>
<a><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
</div>
</div>
<div class="toHide">
<div class="chat-body">
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful, long looooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
<div class="row msg msg-sent">
<div class="col-xs-10">
<div class="msg-text">
<p>Some, beautiful text</p>
</div>
</div>
<div class="col-xs-2">
<div class="profile-pic">
<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">
</div>
</div>
</div>
</div>
<div class="chat-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="notifies">
</div>
<a class="btn btn-warning" id="notify-please">Notify please!</a>
</div>
#chats{
position: fixed;
bottom: 0;
width: 100%;
}
#chats .aligner{
display: flex;
align-items: flex-end;
}
#chats .chat-window {
bottom: 0;
}
#chats .chat-header{
padding: 15px;
width: 100%;
background: #2F2F2F;
color: white;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
#chats .chat-header a{
text-decoration: none;
cursor: pointer;
color: white;
}
#chats .chat-body{
width: 100%;
padding: 10px 10px 0 10px;
background: #dedede;
overflow-x: hidden;
height:300px;
font-size: 13px;
}
#chats .msg-received{
display: flex;
flex-direction: row-reverse;
}
#chats .msg{
padding: 10px 0;
margin: 0;
}
#chats .msg div{
padding: 0;
height: 100%;
min-height: 50px;
}
#chats .msg .msg-text{
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 10px;
margin: 0 5px;
}
#chats .msg-text p{
overflow-wrap: break-word;
word-wrap: break-word;
}
#chats time{
font-size:10px;
}
#chats .chat-footer{
height: 50px;
width: 100%;
padding: 10px 20px 0 20px;
border-top: #cccccc solid 1px;
background: #f5f5f5;
}
#notifies{
position: fixed;
right: 0;
top: 0;
width: 300px;
}
.notify{
position: static;
width: 100%;
padding: 10px 0;
background: #dedede;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
$( document ).ready(function(){
$(".icon_close").click(function(){
$( this ).parents(".chat-window").remove();
});
});
$(document).on('click', '.icon_minim', function (e) {
var toHide = $( this ).parents(".chat-window").find(".chat-body");
if (toHide.hasClass("panel-hidden")){
toHide.removeClass("panel-hidden");
toHide.slideUp();
$( this ).removeClass("glyphicon-minus").addClass("glyphicon-plus");
}else{
toHide.addClass("panel-hidden");
toHide.slideDown();
$( this ).removeClass("glyphicon-plus").addClass("glyphicon-minus");
}
});
$(document).on('click', '#notify-please', function(e){
var layout = '<div class="notify container-fluid">'
+'<div class="col-xs-3">'
+'<img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg">'
+'</div>'
+'<div class="col-xs-9">'
+'<p>New message from Luigi</p>'
+'</div>'
+'</div>';
$(layout).appendTo("#notifies").fadeOut(1000);
});
