<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 ----------> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <div class="chatContainer"> <div class="chatTitleContainer">Comments</div> <div class="chatHistoryContainer"> <ul class="formComments"> <li class="commentLi commentstep-1" data-commentid="4"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-4" data-commentid="4" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-4" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="5"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-5" data-commentid="5" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-5" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="6"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-6" data-commentid="6" class="comment"> This is a comment HELLO!!!! <div id="commentactions-6" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-2" data-commentid="7"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-7" data-commentid="7" class="comment"> This is a comment HELLO!!!! <div id="commentactions-7" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> <li class="commentLi commentstep-3" data-commentid="8"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-8" data-commentid="8" class="comment"> This is a comment HELLO!!!! <div id="commentactions-8" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i>Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-3" data-commentid="10"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-10" data-commentid="10" class="comment"> This is a comment HELLO!!!! <div id="commentactions-10" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-2" data-commentid="9"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-9" data-commentid="9" class="comment"> This is a comment HELLO!!!! <div id="commentactions-9" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="11"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-11" data-commentid="11" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-11" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="12"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-12" data-commentid="12" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-12" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="13"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-13" data-commentid="13" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-13" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> <li class="commentLi commentstep-1" data-commentid="14"> <table class="form-comments-table"> <tr> <td><div class="comment-timestamp">12:03 25/4/2016</div></td> <td><div class="comment-user">Ollie Bott</div></td> <td> <div class="comment-avatar"> <img src=""> </div> </td> <td> <div id="comment-14" data-commentid="14" class="comment comment-step1"> This is a comment HELLO!!!! <div id="commentactions-14" class="comment-actions"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> Reply</button> <button type="button" class="btn btn-default btn-sm"><i class="fa fa-pencil"></i> Edit</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i >Delete</button> </div> </div> </div> </td> </tr> </table> </li> </ul> </div> <div class="input-group input-group-sm chatMessageControls"> <span class="input-group-addon" id="sizing-addon3">Comment</span> <input type="text" class="form-control" placeholder="Type your message here.." aria-describedby="sizing-addon3"> <span class="input-group-btn"> <button id="clearMessageButton" class="btn btn-default" type="button">Clear</button> <button id="sendMessageButton" class="btn btn-primary" type="button"><i class="fa fa-send"></i>Send</button> </span> <span class="input-group-btn"> <button id="undoSendButton" class="btn btn-default" type="button" disabled><i class="fa fa-undo"></i>Undo</button> </span> </div> </div>

.chatTitleContainer { text-align: left; font-size: 14pt; vertical-align: middle; display: table-cell; height: 50px; width: 100%; font-family: Expert-Sans-Regular, verdana, Arial, helvetica, sans-serif; color: #b5b5b5; } .chatContainer { height: 100%; width: 100%; background-color: #e4e4e4; padding: 20px; } .chatHistoryContainer { padding: 20px; height: 400px; width: 100%; background-color: #f4f4f4; border-top: 1px solid #e1e1e1; border-left: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #c3c3c3; border-top-left-radius: 6px; border-top-right-radius: 6px; } .chatMessageControls { margin-top: 6px; padding: 10px; width: 100%; background-color: #fff; border-top: 1px solid #e1e1e1; border-left: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #c3c3c3; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } #undoSendButton { margin-left: 10px; border-radius: 3px; } #clearMessageButton { border-radius: 0; border-left: none; border-right: none; } #sendMessageButton { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fa { margin-right: 6px; } .formComments { list-style-type: none; overflow-y: scroll; height: 100%; padding-bottom: 60px; padding-left: 0px; } .formComments li { margin-bottom: 10px; } .commentstep-1 { margin-left: 0px; } .commentstep-2 { margin-left: 48px; } .commentstep-3 { margin-left: 96px; } .form-comments-table tr:nth-child(1) td:nth-child(1) { font-size: 9pt; color: #a7a7a7; white-space: nowrap; vertical-align: top; } .comment-user { margin-left: 10px; } .form-comments-table tr td { white-space: nowrap; } .form-comments-table tr:nth-child(1) td:nth-child(1) { padding-top: 8px; } .form-comments-table tr:nth-child(1) td:nth-child(2) { padding-top: 8px; font-size: 9pt; color: #737373; font-weight: bold; vertical-align: top; } .form-comments-table tr:nth-child(1) td:nth-child(3) { vertical-align: top; } .form-comments-table tr:nth-child(1) td:nth-child(4) { width: 100%; } .form-comments-table tr:nth-child(1) td:nth-child(5) { } .comment-step-controls { } .comment-avatar { margin-left: 10px; margin-right: 10px; width: 36px; height: 36px; background-color: #c9c9c9; } .comment-avatar img { width: 36px; height: 36px; } .comment-marker { margin-right: 10px; color: #aeaeae; } .comment-step1:hover { } .comment { width: 100%; background-color: #fff; font-size: 12px; margin: 0; padding: 8px 8px; line-height: 1.5; color: #9e9e9e; border-color: #ddd; cursor: pointer; border: 1px solid #e6e6e6; border-bottom: 3px solid #dddddd; border-radius: 3px; } .comment:hover { background-color: #fafafa; } .comment-actions { border-top: 1px solid #dddddd; padding-top: 8px; margin-top: 8px; display: none; } .commentTD { }

$( document ).ready(function() { initUIEvents(); }); function initUIEvents() { $(".comment").unbind().click(function(){ var currentComment = $(this).data("commentid"); $("#commentactions-" + currentComment).slideDown("fast"); }); $(".commentLi").hover(function(){ var currentComment = $(this).data("commentid"); $("#comment-" + currentComment).stop().animate({opacity: "1", backgroundColor: "#f8f8f8", borderLeftWidth: "4px"},{duration: 100, complete: function() {}} ); }, function () { var currentComment = $(this).data("commentid"); $("#comment-" + currentComment).stop().animate({opacity: "1", backgroundColor: "#fff", borderLeftWidth: "1px"},{duration: 100, complete: function() {}} ); $("#commentactions-" + currentComment).slideUp("fast"); }); }