<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> <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="clearFix"></div> </div> <div class="panel-footer"> <textarea name="textMessage" cols="0" rows="0"></textarea> </div> </div> </div> </div>

* { -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) { text-decoration: none; width: 290px; color:#FFF; font-weight: bold; float:left; } .panel.panel-chat .panel-heading a:nth-of-type(2) { text-decoration: none; max-width: 11px; width: 11px; color:#FFF; float:right; } .panel.panel-chat .panel-body { display: block; padding: 0; margin: 0; max-height: 250px; height: 250px; border-left: 1px solid #b2b2b2; border-right: 1px solid #b2b2b2; background: #EDEFF4; overflow: auto; } .panel.panel-chat .panel-body::-webkit-scrollbar { display: none; } .panel.panel-chat .panel-body .messageMe { border-bottom:1px dotted #b2b2b2; } .panel.panel-chat .panel-body .messageMe img { float:left; max-width: 50px; max-height: 50px; } .panel.panel-chat .panel-body .messageMe span { display: block; float:left; padding: 5px; background: #FFF; min-height: 50px; max-width: 280px; height: 50px; width: 280px; word-break: break-all; } .panel.panel-chat .panel-body .messageHer { border-bottom:1px dotted #b2b2b2; } .panel.panel-chat .panel-body .messageHer img { float:right; max-width: 50px; max-height: 50px; } .panel.panel-chat .panel-body .messageHer span { display: block; float:right; padding: 5px; background: #FFF; min-height: 50px; max-width: 280px; height: 50px; width: 280px; word-break: break-all; } .panel.panel-chat .panel-footer { padding: 0; margin: 0; border: 1px solid #b2b2b2; max-height: 75px; height: 75px; } .panel.panel-chat .panel-footer textarea { margin-bottom: -5px; resize: none; width: 100%; height: 100%; }

$(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(); }); })