xxxxxxxxxx1
<!-- Navigation -->2
<header>3
4
<!--Navbar-->5
<nav class="navbar navbar-expand-md navbar-dark unique-color fixed-top">6
7
<!-- Navbar brand -->8
<a class="navbar-brand" href="#">Navbar</a>9
10
<!-- Collapse button -->11
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"12
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">13
<span class="navbar-toggler-icon"></span>14
</button>15
16
<!-- Collapsible content -->17
<div class="collapse navbar-collapse" id="basicExampleNav">18
19
<!-- Links -->20
<ul class="navbar-nav mr-auto">21
<li class="nav-item active">22
<a class="nav-link" href="#">Home23
<span class="sr-only">(current)</span>24
</a>25
</li>26
<li class="nav-item">27
<a class="nav-link font-weight-bold" href="#" id="chat">Chat</a>28
</li>29
30
</ul>31
<!-- Links -->32
33
<form class="form-inline">34
<div class="md-form my-0">35
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">36
</div>37
</form>38
</div>39
<!-- Collapsible content -->40
41
</nav>42
<!--/.Navbar-->43
44
<!-- Video -->45
<section class="view intro-section" id="home">46
47
<video autoplay muted loop preload="true" class="video-intro" poster="https://mdbootstrap.com/img/Photos/Horizontal/Things/full%20page/img%20%287%29.jpg">48
49
<source src="https://mdbootstrap.com/img/video/Atmos_1 (3).mp4" type="video/mp4">50
51
</video>52
53
<div class="mask rgba-black-strong">54
55
<div class="container h-100 d-flex justify-content-center mt-5 pt-5">56
57
<div class="row mt-5">58
59
<div class="col-md-4 col-xl-12 white-text text-center smooth-scroll">60
61
<div class="white-text text-center wow fadeInUp">62
63
<h3 class="display-4 font-weight-bold text-uppercase mb-4 pb-3">Small chat model</h3>64
65
</div>66
67
</div>68
69
</div>70
71
</div>72
73
</div>74
75
</section>76
77
</header>78
<!-- Navigation -->79
80
<!-- Main layout -->81
<main class="mt-n5">82
<div class="container"> 83
84
<!-- Grid row -->85
<div class="row d-flex flex-row-reverse">86
87
<!-- Grid column -->88
<div class="col-md-6 mb-4 d-flex flex-row-reverse">89
90
<!-- <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">91
<a class="btn-floating btn-lg red open-button" onclick="openForm()">92
<i class="fas fa-comments"></i>93
</a>94
</div> -->95
96
<div class="card chat-room small-chat wide" id="myForm">97
<div class="card-header white d-flex justify-content-between p-2" id="toggle" style="cursor: pointer;">98
<div class="heading d-flex justify-content-start">99
<div class="profile-photo">100
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0">101
<span class="state"></span>102
</div>103
<div class="data">104
<p class="name mb-0"><strong>John Smith</strong></p>105
<p class="activity text-muted mb-0">Active now</p>106
</div>107
</div>108
<div class="icons grey-text">109
<a class="feature"><i class="fas fa-video mr-2"></i></a>110
<a class="feature"><i class="fas fa-phone mr-2"></i></a>111
<a class="feature"><i class="fas fa-cog mr-2"></i></a>112
<a type="button" id="closeButton"><i class="fas fa-times mr-2"></i></a>113
</div>114
</div>115
<div class="my-custom-scrollbar">116
<div class="card-body p-3">117
<div class="chat-message">118
<div class="media mb-3">119
<img class="d-flex rounded mr-2" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Generic placeholder image">120
<div class="media-body">121
<p class="my-0">You're friends on Facebook</p>122
<p class="mb-0 text-muted">Web Designer at MDBootstrap</p>123
<p class="mb-0 text-muted">Lives in Paris</p>124
</div>125
</div>126
<div class="card bg-primary rounded w-75 float-right z-depth-0 mb-1">127
<div class="card-body p-2">128
<p class="card-text text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit voluptatem cum eum tempore.</p>129
</div>130
</div>131
<div class="card bg-primary rounded w-50 float-right z-depth-0 mb-2">132
<div class="card-body p-2">133
<p class="card-text text-white">Rem suscipit lorum repellendus ditiis?</p>134
</div>135
</div>136
<div class="card bg-light rounded w-75 z-depth-0 mb-1 message-text">137
<div class="card-body p-2">138
<p class="card-text black-text">Nostrum minima cupiditate assumenda, atque cumque hic voluptatibus at corporis maxime quam harum.</p>139
</div>140
</div>141
<div class="d-flex justify-content-start">142
<div class="profile-photo message-photo">143
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0">144
<span class="state"></span>145
</div>146
<div class="card bg-light rounded w-75 z-depth-0 mb-2">147
<div class="card-body p-2">148
<p class="card-text black-text">Qui animi molestiae autem nihil optio recusandae nisi sit ab quo est.</p>149
</div>150
</div>151
</div>152
<div class="card bg-primary rounded w-75 float-right z-depth-0 mb-2">153
<div class="card-body p-2">154
<p class="card-text text-white">Maxime nostrum ut blanditiis a quod quam, quidem deleniti?</p>155
</div>156
</div>157
</div>158
</div>159
</div>160
<div class="card-footer text-muted white pt-1 pb-2 px-3">161
<input type="text" id="exampleForm2" class="form-control" placeholder="Type a message...">162
<div>163
<a><i class="far fa-file-image mr-2"></i></a>164
<a><i class="far fa-laugh mr-2"></i></a>165
<a><i class="fas fa-gamepad mr-2"></i></a>166
<a><i class="fas fa-paperclip mr-2"></i></a>167
<a><i class="fas fa-camera mr-2"></i></a>168
<a><i class="fas fa-thumbs-up float-right"></i></a>169
</div>170
</div>171
172
</div>173
174
</div>175
<!-- Grid column -->176
177
</div>178
<!-- Grid row -->179
180
</div>181
</main>182
<!-- Main layout -->xxxxxxxxxx1
html,2
body,3
header,4
.intro-section {5
height: 100vh;6
}7
.chat-room.small-chat {8
position: fixed;9
bottom: 0;10
-webkit-border-bottom-left-radius: 0;11
border-bottom-left-radius: 0;12
-webkit-border-bottom-right-radius: 0;13
border-bottom-right-radius: 0;14
width: 20rem; }15
.chat-room.small-chat.slim {16
height: 3rem; }17
.chat-room.small-chat.slim .icons .feature {18
display: none; }19
.chat-room.small-chat .profile-photo img.avatar {20
height: 2rem;21
width: 2rem; }22
.chat-room.small-chat .profile-photo .state {23
position: relative;24
display: block;25
background-color: #007E33;26
height: .65rem;27
width: .65rem;28
z-index: 2;29
margin-left: 1.35rem;30
left: auto;31
top: -.5rem;32
-webkit-border-radius: 50%;33
border-radius: 50%;34
border: .1rem solid #fff; }35
.chat-room.small-chat .profile-photo.message-photo {36
margin-top: 2.7rem; }37
.chat-room.small-chat .heading {38
height: 2.1rem; }39
.chat-room.small-chat .heading .data {40
line-height: 1.5; }41
.chat-room.small-chat .heading .data .name {42
font-size: .8rem; }43
.chat-room.small-chat .heading .data .activity {44
font-size: .75rem; }45
.chat-room.small-chat .icons {46
padding-top: .45rem; }47
.chat-room.small-chat .my-custom-scrollbar {48
position: relative;49
height: 18rem;50
overflow: auto; }51
.chat-room.small-chat .my-custom-scrollbar > .card-body {52
height: 18rem; }53
.chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .media img {54
width: 3rem; }55
.chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .media .media-body p {56
font-size: .7rem; }57
.chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .message-text {58
margin-left: 2.47rem; }59
.chat-room.small-chat .card-footer .form-control {60
border: none;61
padding: .375rem 0 .43rem 0;62
font-size: .9rem; }63
.chat-room.small-chat .card-footer .form-control:focus {64
-webkit-box-shadow: none;65
box-shadow: none; }xxxxxxxxxx1
// Perfect scrollbar2
const myCustomScrollbar = document.querySelector('.my-custom-scrollbar');3
const ps = new PerfectScrollbar(myCustomScrollbar);4
const scrollbarY = myCustomScrollbar.querySelector('.ps.ps--active-y>.ps__scrollbar-y-rail');5
myCustomScrollbar.onscroll = function () {6
scrollbarY.style.cssText = `top: ${this.scrollTop}px!important; height: 288px; right: ${-this.scrollLeft}px`;7
}8
9
const $myForm = $('#myForm');10
11
$('#chat').on('click', function () {12
13
if ($myForm.hasClass('slim') || !$myForm.is(':visible')) {14
15
$myForm.css('display', 'block');16
$myForm.removeClass('slim');17
};18
})19
20
$('#closeButton').not('#toggle').on('click', function () {21
22
$myForm.hide();23
})24
25
$("#toggle").on('click', function () {26
27
$myForm.toggleClass('slim');28
}); Console errors: 0