Skip to content

Instantly share code, notes, and snippets.

@sachinfl

sachinfl/chatbox_design.html

Created October 16, 2015 20:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sachinfl/2bc77bf3163a9097a5be to your computer and use it in GitHub Desktop.
Save sachinfl/2bc77bf3163a9097a5be to your computer and use it in GitHub Desktop.
Download ZIP
How to Create Message Box , Chat Box Design Using Bootstrap , JavaScript
Raw
chatbox_design.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message Box Design By Sachin Yadav</title>
<link href="http://fastlearning.in/controller/css/css_files/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<style type="text/css">
.actions {
list-style: none;
padding: 0;
z-index: 2;
margin: 0;
}
.actions > li {
display: inline-block;
vertical-align: baseline;
}
.actions > li > a,
.actions > a {
width: 30px;
height: 30px;
line-height: 35px;
display: inline-block;
text-align: center;
position: relative;
}
.actions > li > a > i,
.actions > a > i {
-webkit-transition: color;
-o-transition: color;
transition: color;
-webkit-transition-duration: 1300ms;
transition-duration: 1300ms;
color: #adadad;
font-size: 20px;
}
.actions > li > a:hover > i,
.actions > a:hover > i {
color: #000;
}
.actions > li > a:before,
.actions > a:before {
left: 0;
top: 0;
content: "";
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: scale3d(0, 0, 0);
-moz-transform: scale3d(0, 0, 0);
-ms-transform: scale3d(0, 0, 0);
-o-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
background-color: rgba(0, 0, 0, 0.1);
z-index: 0;
border-radius: 50%;
opacity: 0;
filter: alpha(opacity=0);
}
.actions > li > a:hover:before,
.actions > a:hover:before {
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
filter: alpha(opacity=100);
}
.actions > li.open > a > i,
.actions.open > a > i {
color: #000;
}
.actions > li.open > a:before,
.actions.open > a:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
.actions.actions-alt > li > a > i {
color: #fff;
}
.actions.actions-alt > li > a > i:hover {
color: #fff;
}
.actions.actions-alt > li.open > a > i {
color: #fff;
}
.actions.open {
z-index: 3;
}
.line-wrap {
width: 18px;
height: 12px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
margin: 10px 20px;
}
.line-wrap .line {
width: 18px;
height: 2px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
.line-wrap .line.center {
margin: 3px 0;
}
.open .line-wrap {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.open .line-wrap .line.top {
width: 12px;
transform: translateX(8px) translateY(1px) rotate(45deg);
-webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
}
.open .line-wrap .line.bottom {
width: 12px;
transform: translateX(8px) translateY(-1px) rotate(-45deg);
-webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
}
.listview{position:relative}.listview:not(.lv-lg):not(.lv-message) .lv-item{padding:12px 20px}@media (min-width: 480px){.listview.lv-lg .lv-item{padding:17px 35px 17px 25px}}@media (max-width: 767px){.listview.lv-lg .lv-item{padding:17px 35px 17px 20px}}.listview.lv-lg .lv-item:hover{background-color:#FFFFDB}.listview .lv-item{position:relative;display:block;-webkit-transition:background-color;-o-transition:background-color;transition:background-color;-webkit-transition-duration:300ms;transition-duration:300ms}.listview .lv-item .lv-small{font-size:12px;color:#A9A9A9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.listview .lv-item .checkbox,.listview .lv-item.media{margin:0}.lvh-search-close:hover{background:#333}.lv-header-alt{position:relative;background:#f8f8f8;padding:15px}.lv-header-alt .lv-actions{z-index:3;float:right;margin-top:3px;position:relative}.lv-header-alt .lv-actions > li > a{margin:0 3px}.lvh-label{color:#818181;display:inline-block;margin:0;font-size:14px;font-weight:400;padding:0 6px;line-height:33px;vertical-align:middle}.lv-footer{display:block;text-align:center;padding:7px 10px 8px;border-top:1px solid #F0F0F0;line-height:100%;font-size:11px;margin-top:20px;color:#828282}.card{position:relative;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,0.15);margin-bottom:30px}.#messages-main:before,#messages-main:after{content:" ";display:table}#messages-main:after{clear:both}#messages-main .ms-block{padding:23px 20px 0}#messages-main .ms-menu{position:absolute;left:0;top:0;background:#F8F8F8;border-right:1px solid #EEE;padding-bottom:50px;height:100%;width:240px;-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:250ms;transition-duration:250ms}@media (max-width: 767px){#messages-main .ms-menu{height:calc(100% - 58px);-webkit-transform:translate3d(-240px,58px,0);transform:translate3d(-240px,58px,0);opacity:0;filter:alpha(opacity=0);z-index:1}#messages-main .ms-menu.toggled{-webkit-transform:translate3d(0,58px,0);transform:translate3d(0,58px,0);opacity:1;filter:alpha(opacity=100)}}#messages-main .ms-menu .lv-item.active{background:#fff}#messages-main .ms-menu .lv-item:not(.active):hover{background:#F2F2F2;cursor:pointer}@media (min-width: 768px){#messages-main .ms-body{padding-left:240px}}@media (max-width: 767px){#messages-main .ms-body{overflow:hidden}}#messages-main .ms-user:before,#messages-main .ms-user:after{content:" ";display:table}#messages-main .ms-user:after{clear:both}#messages-main .ms-user:before,#messages-main .ms-user:after{content:" ";display:table}#messages-main .ms-user:after{clear:both}#messages-main .ms-user > img{border-radius:50%;width:40px;float:left}#messages-main .ms-user > div{overflow:hidden;padding:7px 5px 7px 15px;font-size:11px}#messages-main #ms-compose{position:fixed;bottom:120px;z-index:1;right:30px;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28)}#ms-menu-trigger{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;float:left;margin:1px 0 0 -7px}@media (min-width: 768px){#ms-menu-trigger{display:none}}#ms-menu-trigger .line-wrap .line{background-color:#717171}.lv-message .lv-item{padding:20px}.lv-message .lv-item.right{text-align:right}.lv-message .lv-item.right .lv-avatar{margin-right:0;margin-left:15px}.lv-message .lv-item:not(.right) .ms-item{background-color:#f5f5f5;color:#7c7c7c;box-shadow: 0 1.5px .5px rgba(0,0,0,.13);}.lv-message .lv-item.right .ms-item{background:#ecf0f1;box-shadow: 0 1.5px .5px rgba(0,0,0,.13); color:#7c7c7c;}.lv-avatar{width:35px;height:35px;border-radius:50%;color:#FFF;text-align:center;line-height:34px;font-size:15px;margin-right:15px;padding:0!important;text-transform:uppercase}.lv-avatar > img{width:35px;height:35px;border-radius:50%;vertical-align:top}.ms-item{padding:13px 19px 15px;border-radius:2px;display:inline-block}@media (min-width: 768px){.ms-item{max-width:70%}}.ms-date{display:block;color:#B3B3B3;margin-top:7px; margin-left:3px;}.ms-date > i{font-size:14px;vertical-align:bottom;line-height:100%}.ms-reply{ background-color:#f5f5f5;position:relative;margin:0!important}.ms-reply textarea{width:94%; margin-left:-50px; resize:none; border-style: none;border-color: Transparent; overflow: auto; font-size:15px; padding:10px;font-style:normal;height:45px;}.ms-reply button{position:absolute;top:0;right:0;border:0;height:100%;width:60px;font-size:25px;background:#F5F5F5;color:#999}.ms-reply button:hover{background:#f2f2f2; color:#7c7c7c}
textarea:focus {outline: none !important;border-color: #719ECE;}
.user-detail{ border:none !important; border-radius:0px; z-index:9999;}
#ms-scrollbar::-webkit-scrollbar-track
{
background-color:#CCCCCC;
}
#ms-scrollbar::-webkit-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
#ms-scrollbar::-webkit-scrollbar-thumb
{
background-color:#eeeeee;
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
}
.ms-new{box-shadow:0 2px 5px rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); background-color:#2196f3;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container ng-scope">
<div class="block-header">
<h2> </h2>
</div>
<div class="card m-b-0" id="messages-main" style="box-shadow:0 0 40px 1px #c9cccd;">
<div class="ms-menu" style="overflow:scroll; overflow-x: hidden;" id="ms-scrollbar">
<div class="ms-block">
<div class="ms-user">
<img src="./images/avatar.jpg" alt="">
<h5 class="q-title" align="center">Sachin Yadav <br/><b>5</b> New Messages</h5>
</div>
</div>
<div class="ms-block">
<a class="btn btn-primary btn-block ms-new" href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp; New Message</a>
</div>
<hr/>
<div class="listview lv-user m-t-20">
<div class="lv-item media active">
<div class="lv-avatar pull-left">
<img src="./images/bhai.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Ashwani Singh Yadav</div>
<div class="lv-small"> Acadnote a world class website is processing surveys for </div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/ajit.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title"><b>Ajit Gupta</b><span class="pull-right">10 new</div>
<div class="lv-small"><b>Hello bro whatsup , how are you</b></div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/chota.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title"><b>Deepak Yadav</b><span class="pull-right">2 new</span></div>
<div class="lv-small"><b>aur bhai collage kse chale rhai hai </b></div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/sumit.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Sumit kumar</div>
<div class="lv-small">aur suna kya haal hai bhai, aur</div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/sega.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Sage Kalia</div>
<div class="lv-small">abey kaha chala gya ?? mar gya kya ??</div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/gan.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Gagandeep Singh</div>
<div class="lv-small">yeh ley eamil address sachin.yadav1212@gmail.com</div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/vasu.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Vasu</div>
<div class="lv-small">kal se classess start hai koi holiday nahi hai </div>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/abc.jpg" alt="">
</div>
<div class="media-body">
<div class="lv-title">Deepu Singh</div>
<div class="lv-small">okk byee gud night dude kal baaat karte hai </div>
</div>
</div>
</div>
</div>
<div class="ms-body">
<div class="listview lv-message">
<div class="lv-header-alt clearfix">
<div id="ms-menu-trigger">
<div class="line-wrap">
<div class="line top"></div>
<div class="line center"></div>
<div class="line bottom"></div>
</div>
</div>
<div class="lvh-label hidden-xs">
<div class="lv-avatar pull-left">
<img src="./images/bhai.jpg" alt="">
</div>
<span class="c-black">Ashwani Singh Yadav<span style=" margin-left:8px; position:absolute; margin-top:12px;width: 8px;height: 8px;line-height: 8px; border-radius: 50%; background-color:#80d3ab;"></span></span>
</div>
<ul class="lv-actions actions list-unstyled list-inline">
<li>
<a href="#" >
<i class="fa fa-check"></i>
</a>
</li>
<li>
<a href="#" >
<i class="fa fa-clock-o"></i>
</a>
</li>
<li>
<a data-toggle="dropdown" href="#" > <i class="fa fa-list"></i></a>
<ul class="dropdown-menu user-detail" role="menu">
<li>
<a href="">Latest</a>
</li>
<li>
<a href="">Oldest</a>
</li>
</ul>
</li>
<li>
<a data-toggle="dropdown" href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left"><span class="glyphicon glyphicon-trash"></span></a>
<ul class="dropdown-menu user-detail" role="menu">
<li>
<a href="">Delete Messages</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="lv-body" id="ms-scrollbar" style="overflow:scroll; overflow-x: hidden; height:520px;">
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/bhai.jpg" alt="">
</div>
<div class="media-body">
<div class="ms-item">
<span class="glyphicon glyphicon-triangle-left" style="color:#000000;"></span>
We have an aim to educate and provide you the power to make website anything. Anytime. We don't teach, we educate.We provide Tutorials for many Programming languages on our website.
</div>
<small class="ms-date"><span class="glyphicon glyphicon-time"></span>&nbsp; 05/10/2015 at 09:00</small>
</div>
</div>
<div class="lv-item media right">
<div class="lv-avatar pull-right">
<img src="./images/avatar.jpg" alt="">
</div>
<div class="media-body">
<div class="ms-item">
We started this site with clear mission that we want to deliver complete details knowledge of Programming to our audience. We are sharing this knowledge in all areas that you can see in our site.
</div>
<small class="ms-date"><span class="glyphicon glyphicon-time"></span>&nbsp; 05/10/2015 at 09:30</small>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/bhai.jpg" alt="">
</div>
<div class="media-body">
<div class="ms-item">
It's gives the power to synthesis anything anywhere you want to. Its the ultimate tool to solve any problem. And we help you excel in that by working with you.
</div>
<small class="ms-date"><span class="glyphicon glyphicon-time"></span>&nbsp; 20/02/2015 at 09:33</small>
</div>
</div>
<div class="lv-item media right">
<div class="lv-avatar pull-right">
<img src="./images/avatar.jpg" alt="">
</div>
<div class="media-body">
<div class="ms-item">
The basic essence of life is to learn, explore and synthesis. We provide you with the tools to make your dreams come true.Our website is totally for free and available 24/7 and does not consume your data packs and works like a charm on the supersonic lovely internet.
</div>
<small class="ms-date"><span class="glyphicon glyphicon-time"></span>&nbsp; 05/10/2015 at 10:10</small>
</div>
</div>
<div class="lv-item media">
<div class="lv-avatar pull-left">
<img src="./images/bhai.jpg" alt="">
</div>
<div class="media-body">
<div class="ms-item">
Acadnote a world class website is processing surveys for every student who wants to do something new and different in the field of academics. so it is a right place for every student to share their opinions about their present academics so this website can provide every single student requirements and it is possible for us to do if every student explains about their academics requirements. Last but not the least tell the needs and collect your study materials which we will provide to you.
</div>
<small class="ms-date"><span class="glyphicon glyphicon-time"></span>&nbsp; 05/10/2015 at 10:24</small>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="lv-footer ms-reply">
<textarea rows="10" placeholder="Write messages..."></textarea>
<button class=""><span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="http://fastlearning.in/controller/js//jquery-1.11.0.min"></script>
<script src="http://fastlearning.in/controller/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
@sachinfl
Copy link
Author

Output of this Code like this :

mobile message

phone messages

phones messages 2

phones messages

tab message

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment