"Chatroom"
Bootstrap 4.0.0 Snippet by aalonzolu

Post to Facebook Tweet this

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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
<div class="content container-fluid bootstrap snippets">
<div class="row row-broken">
<div class="col-sm-12 col-xs-12 chat" style="overflow: hidden; outline: none;" tabindex="5001">
<div class="col-inside-lg decor-default">
<div class="chat-body">
<!--<div class="answer left">-->
<!-- <div class="avatar">-->
<!-- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">-->
<!-- <div class="status offline"></div>-->
<!-- </div>-->
<!-- <div class="name">Alexander Herthic</div>-->
<!-- <div class="text">-->
<!-- Lorem ipsum dolor amet, consectetur adipisicing elit Lorem ipsum dolor amet, consectetur adipisicing elit Lorem ipsum dolor amet, consectetur adiping elit-->
<!-- </div>-->
<!-- <div class="time">5 min ago</div>-->
<!--</div>-->
<!--<div class="answer right">-->
<!-- <div class="avatar">-->
<!-- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="User name">-->
<!-- <div class="status offline"></div>-->
<!-- </div>-->
<!-- <div class="name">Alexander Herthic</div>-->
<!-- <div class="text">-->
<!-- Lorem ipsum dolor amet, consectetur adipisicing elit Lorem ipsum dolor amet, consectetur adipisicing elit Lorem ipsum dolor amet, consectetur adiping elit-->
<!-- </div>-->
<!-- <div class="time">5 min ago</div>-->
<!--</div>-->
<!--<div class="answer left">-->
<!-- <div class="avatar">-->
<!-- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">-->
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
body{
margin-top:20px;
background:#eee;
}
.row.row-broken {
padding-bottom: 0;
}
.col-inside-lg {
padding: 20px;
}
.chat {
height: calc(100vh - 180px);
}
.decor-default {
background-color: #ffffff;
}
.chat-users h6 {
font-size: 20px;
margin: 0 0 20px;
}
.chat-users .user {
position: relative;
padding: 0 0 0 50px;
display: block;
cursor: pointer;
margin: 0 0 20px;
}
.chat-users .user .avatar {
top: 0;
left: 0;
}
.chat .avatar {
width: 40px;
height: 40px;
position: absolute;
}
.chat .avatar img {
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
$(function(){
$(".chat").niceScroll();
var chatmessages = [{
username : 'bot',
name: 'El puto bot',
avatar: 'https://bootdey.com/img/Content/avatar/avatar2.png',
text: 'Texto 1',
ago: '5 min ago'
},
{
username : 'example',
name: 'Usuario',
avatar: 'https://bootdey.com/img/Content/avatar/avatar1.png',
text: 'Texto 2',
ago: '2 min ago'
}];
let htmldiv = ``;
jQuery.each( chatmessages, function( i, item ) {
console.log(item);
let position = item.username=='bot'? 'left': 'right';
let ago = item.ago;
htmldiv += `<div class="answer ${position}">
<div class="avatar">
<img src="${item.avatar}" alt="${item.name}">
<div class="status offline"></div>
</div>
<div class="name">${item.name}</div>
<div class="text">
${item.text}
</div>
<div class="time">${ago}</div>
</div>`;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit Pro

Questions / Comments: