"chat hub"
Bootstrap 3.3.0 Snippet by ashishsingh300

<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-fluid"> <div class="row"> <div class="col-md-9 current-chat"> <div class="row current-chat-area"> <div class="col-md-12"> <ul class="media-list"> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/1839999/48/1470773165634"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Alex Deo | 23rd June at 5:00pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/2733968/48/1470773158079"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Jhon Rexa | 23rd June at 5:00pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/1839999/48/1470773165634"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Alex Deo | 23rd June at 5:00pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle" src="https://app.teamsupport.com/dc/1078/UserAvatar/2733968/48/1470773158079"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Jhon Rexa | 23rd June at 5:00pm</small> <hr> </div> </div> </div> </li> </ul> </div> </div> <div class="row current-chat-footer"> <div class="panel-footer"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Send</button> </span> </div> </div> </div> </div> </div> </div>
.blue { background: blue } .grey { background: grey } .chats-row { height: 100vh; } .chats-row div { height: 50%; border: 1px solid #ddd; padding: 0px; } .list-group-item { border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .list-group-item:first-child { border-top: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } .current-chat { height: 100vh; border: 1px solid #ddd; } .chat-toolbar-row { background-color: #f5f5f5; } .chat-toolbar { margin-top: 10px; margin-bottom: 10px; } .current-chat-area { padding-top: 10px; overflow: auto; height: 85vh; } .current-chat-footer { position: absolute; bottom: 0; }
$( document ).ready(function() { $( ".chat-request" ).click(function(e) { e.preventDefault(); $('.open-request').html('Matthew Townsen - TeamSupport').removeClass('open-request') $(this).html('<p>Name: Matthew Townsen</p>' + '<p>Email: mtownsen@teamsupport.com</p>' + '<p>Time: 2:47 PM</p>' + '<p>Message: Its all broken</p>' + '<button class="btn btn-default">Accept</button>') .addClass('open-request'); }); });

Related: See More


Questions / Comments: