"simple chatbox"
Bootstrap 3.3.0 Snippet by manali2407

<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 class="row"> <div style="height:300px"> <div class="col-sm-12"> <div id="chatbox_female" class="chatbox" style="bottom: 0px; right: 20px; display: block;"> <div class="chatboxhead"> <div class="chatboxtitle"> <span class="glyphicon glyphicon-heart-empty pulse"></span>  female </div> <div class="chatboxoptions"> <div class="dropdown"> <a href="javascript:void(0)" id="settings" data-toggle="dropdown" area-haspopup="true" area-expanded="true"><i class="fa fa-gears"></i></a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="settings"> <li><a href="#"><i class="fa fa-flag"></i> Report</a></li> <li><a href="#"><i class="fa fa-ban"></i> Block</a></li> </ul> </div> <a onclick="javascript:toggleChatBoxGrowth('female')" href="javascript:void(0)"><i class="fa fa-minus"></i></a> <a onclick="javascript:closeChatBox('female')" href="javascript:void(0)"><i class="fa fa-close"></i></a> </div> <br clear="all"> </div> <div class="chatboxcontent"> <div class="chatboxmessage ltr"> <span class="chatboxmessagefrom">female</span> <div class="chatboxmessagecontent"> <time datetime="2009-11-13T20:00">today • 51 min</time> yes we can </div> </div> <div class="chatboxmessage"> <span class="chatboxmessagefrom">male44</span> <div class="chatboxmessagecontent"><time datetime="2009-11-13T20:00">today • 51 min</time> not much more but little bit </div> </div> </div> <div class="chatboxinput"><textarea onkeydown="javascript:return checkChatBoxInputKey(event,this,'female');" class="chatboxtextarea form-control"></textarea></div></div> </div> </div> </div> </div> </div>
@import url(http://www.justinaguilar.com/animations/css/animations.css); /*-----------------------------------------------------*/ .chatbox { position: fixed; position:expression("absolute"); width: 240px; display:none; z-index:99; } .chatboxhead { background-color: #FD6E8A; padding:7px; color: #ffffff; border-radius:4px 4px 0 0; border-right:1px solid #ddd; border-left:1px solid #ddd; font-family: "Oswald",sans-serif; } .chatboxhead .chatboxoptions{ } .chatboxhead .chatboxoptions a{ vertical-align:middle; display:inline-block; color:#fff; margin:0 3px; height:14px; width:14px; text-align:center; } .chatboxhead .chatboxoptions a:hover{ color:rgba(0,0,0,0.5); } .chatboxhead .chatboxoptions a i{ vertical-align:top; } .chatboxblink { background-color: #176689; border-right:1px solid #176689; border-left:1px solid #176689; } .chatboxcontent { font-family: "PT Sans",sans-serif; font-size: 12px; color: #333333; height:200px; width:240px; overflow-y:auto; overflow-x:auto; padding:7px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #eeeeee; background-color: #ffffff; line-height: 1.3em; background-color:#FFD5D5; } .chatboxinput { padding: 5px; background-color: #ffffff; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } .chatboxtextarea { width: 226px; height:44px; padding:3px 0pt 3px 3px; border: 1px solid #eeeeee; margin: 1px; overflow:hidden; resize:none; } .chatboxtextareaselected { border: 2px solid #f99d39; margin:0; } .chatboxmessage { /*margin-left:1em;*/ } .chatboxmessage time{ color:#69F; font-size:10px; clear:both; display:block; position:absolute; right:4px; top:0; } .chatboxinfo { margin-left:-1em; color:#666666; } .chatboxmessagefrom { margin-left:0em; font-weight: bold; float:left; width:46px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } .chatboxmessagecontent { background-color:#fff; padding:14px 8px 4px; position:relative; margin-left:55px; margin-bottom:5px; } .chatboxmessagecontent:after { content: " "; position: absolute; top: 0; left: -10px; width: 0; height: 0; border: 5px solid #FFF; border-left-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); z-index:2; color:#333; } .chatboxoptions { float: right; } .chatboxoptions a { text-decoration: none; color: white; font-weight:bold; } .chatboxtitle { float: left; } .chatbox .all{ clear:both; overflow:hidden; height:0; } .chatboxmessage:before, .chatboxmessage:after,{ display: table; content: " "; } .chatboxmessage:after{ clear: both; } .chatboxoptions .dropdown{ display:inline-block; } .chatboxoptions .dropdown .dropdown-menu{ min-width: 120px; } .chatboxoptions .dropdown .dropdown-menu li a{ display:block; color:#333; font-family: "PT Sans",sans-serif; font-size:13px; height:auto; width:100%; text-align:left; padding-left:5px; padding-right:5px; } .chatboxoptions .dropdown .dropdown-menu li a i{ vertical-align:middle; } .chatboxoptions .dropdown .dropdown-menu li a:hover{ color:#fff; } .chatboxmessage.ltr{ } .chatboxmessage.ltr .chatboxmessagefrom{ float:right; text-align:right; } .chatboxmessage.ltr .chatboxmessagecontent { margin-left: 0; margin-right:55px; padding: 14px 8px 4px; } .chatboxmessage.ltr time { left: 4px; right:auto; } .chatboxmessage.ltr .chatboxmessagecontent:after { content: " "; position: absolute; top: 0; right: -10px; left:auto; width: 0; height: 0; border: 5px solid #FFF; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); z-index:2; color:#333; }

Related: See More


Questions / Comments: