"Comments Window"
Bootstrap 3.3.0 Snippet by marshallx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$( 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");
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: