Membuat Chat Bubble Seperti di Facebook dengan CSS dan jQuery
May 9, 2019
Add Comment
Selamat Siang kali ini admin akan membahas Chat Bubble dengan CSS dan JQuery, langkah pertama buat dulu kerangka htmlnya seperti berikut
<!DOCTYPE html>
<html>
<head>
<title>Facebook Like Chat</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="style.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_head">Chatbox</div>
<div class="chat_body">
<div class="user">Juanas Smith</div>
</div>
</div>
<div class="msg_box" style="right: 290px">
<div class="msg_head">Juanas Smith
<div class="close">x</div></div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">This is from A</div>
<div class="msg_b">This from B</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer">
<textarea rows="2" class="msg_input" placeholder="Press Enter to send Message"></textarea>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Facebook Like Chat</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="style.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_head">Chatbox</div>
<div class="chat_body">
<div class="user">Juanas Smith</div>
</div>
</div>
<div class="msg_box" style="right: 290px">
<div class="msg_head">Juanas Smith
<div class="close">x</div></div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">This is from A</div>
<div class="msg_b">This from B</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer">
<textarea rows="2" class="msg_input" placeholder="Press Enter to send Message"></textarea>
</div>
</div>
</div>
</body>
</html>
kemudian buat style CSS nya seperti berikut
body {
background-color: #16a085;
margin: 0px;
font-family: sans-serif;
}
.chat_box, .msg_box {
cursor: pointer;
position: fixed;
bottom: 0px;
right: 20px;
background: white;
width : 250px;
/*height: 400px;*/
border-radius: 5px 5px 0px 0px;
}
.msg_box {
/*height: 350px;*/
bottom: -5px;
}
.chat_head,.msg_head {
background: #f39c12;
padding: 15px;
color: white;
font-weight: bold;
border-radius: 5px 5px 0px 0px;
/*position: fixed;*/
}
.chat_body {
height: 400px;
}
.user {
padding: 20px 25px;
position: relative;
cursor: pointer;
}
.user:hover {
background: #f8f8f8;
}
.user:before {
content: "";
position: absolute;
background-color: #2ecc71;
width: 10px;
height: 10px;
left: 8px;
top: 24px;
border-radius: 50%;
}
.msg_head {
background: #3498db;
}
.close {
float: right;
}
.msg_body {
height: 250px;
font-size: 12px;
overflow-y: auto;
overflow-x: hidden;
background: #bdc3c7;
}
.msg_input {
border-color: transparent;
border-top: 1px solid silver;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.msg_a {
margin-top: 10px;
margin-right: 20px;
min-height: 20px;
padding: 15px;
background: #99ffcc;
margin-left: 20px;
position: relative;
border-radius: 5px;
color: white;
}
.msg_a:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 7px;
left: -30px;
border: 15px solid;
border-color: transparent #99ffcc transparent transparent;
}
.msg_b {
margin-top: 10px;
width: auto;
margin-right: 20px;
min-height: 20px;
padding: 15px;
background: #ffff99;
margin-left: 20px;
position: relative;
border-radius: 5px;
color: black;
}
.msg_b:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 7px;
right: -30px;
border: 15px solid;
border-color: transparent transparent transparent #ffff99;
}
kemudian buat style javascriptnya, untuk javascriptnya ini memerlukan jquery, silakan anda download dulu jquery dari website resminya. untuk javascriptnya seperti berikut
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat_body').slideToggle('slow');
// $('.user').slideToggle('slow');
});
$('.msg_head').click(function(){
$('.msg_wrap').slideToggle('slow');
// $('.msg_box').slideToggle('slow');
});
$(".close").click(function(){
$('.msg_box').hide();
});
$(".user").click(function(){
$('.msg_wrap').show();
$('.msg_box').show();
});
$('textarea').keypress(function(e){
if(e.keyCode == 13) {
var msg = $(this).val();
$(this).val('');
$("<div class='msg_b'>"+msg+"</div>").insertBefore('.msg_insert');
$('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
}
});
});
langkah terakhir silakan test hasilnya di browser jika tampilanya seperti gambar di atas maka anda telah berhasil, ok sekian dulu tutorial kali ini, jika ada yang ditanyakan silakan tulis pada kolom komentar di bawah. jika artikel ini bermanfaat silakan bagikan ke teman anda.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Chat Bubble Seperti di Facebook dengan CSS dan jQuery"
Post a Comment