Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"draggable chatbox"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
chat
Preview
HTML
View Full Screen
Fork
Fork this
6.7K
 
2 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andytran/pen/OPxVmq?limit=all&page=46&q=box" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body { background: #e9e9e9; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .chat { background: #ffffff; width: 300px; margin: 0 auto; } .chat header { background: #bd6982; padding: 10px 15px; color: #ffffff; font-size: 14px; cursor: move; } .chat header:before, .chat header:after { display: block; content: ''; clear: both; } .chat header h2, .chat .body ul li .content h3 { margin: 0; padding: 0; font-size: 14px; float: left; } .chat header h2 a { color: #ffffff; text-decoration: none; } .chat header .tools { list-style: none; margin: 0; padding: 0; float: right; } .chat header .tools li { display: inline-block; margin-right: 6px; } .chat header .tools li:last-child { margin: 0; } .chat header .tools li a { color: #ffffff; text-decoration: none; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .chat .body { position: relative; max-height: 360px; overflow-y: scroll; } .chat .body .search { display: none; width: 100%; } .chat .body .search.opened { display: block; } .chat .body .search input { width: 100%; margin: 0; padding: 10px 15px; border: none; -webkti-box-size: border-box; -moz-box-size: border-box; box-size: border-box; } .chat .body ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f2f2f2; } .chat .body ul li { position: relative; background: #ffffff; display: block; width: 100%; padding: 10px; box-sizing: border-box; } .chat .body ul li:before, .chat .body ul li:after { display: block; content: ''; clear: both; } .chat .body ul li:hover .thumbnail { background: #bd6982; } .chat .body ul li:nth-child(2n) { background: #f2f2f2; } .chat .body ul li .thumbnail { display: inline-block; background: #bfbfbf; width: 50px; color: #ffffff; line-height: 50px; text-align: center; text-decoration: none; -webkit-transition: background 0.3s linear 0s; -moz-transition: background 0.3s linear 0s; -ms-transition: background 0.3s linear 0s; -o-transition: background 0.3s linear 0s; transition: background 0.3s linear 0s; } .chat .body ul li .thumbnail img { width: 100%; } .chat .body ul li .content { display: inline-block; margin-left: 6px; vertical-align: top; line-height: 1; } .chat .body ul li .content h3 { display: block; width: 100%; margin-bottom: 5px; color: #808080; } .chat .body ul li .content .preview { display: block; width: 100%; max-width: 200px; margin-bottom: 5px; color: #cccccc; font-size: 12px; } .chat .body ul li .content .meta { color: #b3b3b3; font-size: 12px; } .chat .body ul li .content .meta a { color: #999999; text-decoration: none; } .chat .body ul li .content .meta a:hover { text-decoration: underline; } .chat .body ul li .message { display: none; position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .chat footer a { background: #bd6982; display: block; width: 100%; padding: 10px 15px; color: #ffffff; font-size: 14px; text-align: center; text-decoration: none; box-sizing: border-box; } .chat footer a:hover { background: #cd8ca0; -webkit-transition: background 0.3s linear 0s; -moz-transition: background 0.3s linear 0s; -ms-transition: background 0.3s linear 0s; -o-transition: background 0.3s linear 0s; transition: background 0.3s linear 0s; } .info { width: 300px; margin: 25px auto; text-align: center; } .info h1 { margin: 0; padding: 0; font-size: 24px; font-weight: 400; color: #333333; } .info span { color: #666666; font-size: 12px; } .info span a { color: #000000; text-decoration: none; } .info span .fa { color: #bd6982; } .info span .spoilers { color: #999999; margin-top: 5px; font-size: 10px; } </style></head><body> <div class='info'> <h1>Draggable Chatbox</h1> <span> Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andytran.me'>Andy Tran</a> <div class='spoilers'> (Click the search button) | (Scroll the chat) </div> </span> </div> <div class='chat'> <header> <h2 class='title'> <a href='https://www.elegantthemes.com/'>ElegantThemes</a> </h2> <ul class='tools'> <li> <a class='fa fa-gear' href='#'></a> </li> <li> <a class='fa fa-search' href='#'></a> </li> </ul> </header> <div class='body'> <div class='search'> <input placeholder='Search...' type='text'> </div> <ul> <li> <a class='thumbnail' href='#'> NR </a> <div class='content'> <h3>Nick Roach</h3> <span class='preview'>hey how are things going on the...</span> <span class='meta'> 2h ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> <li> <a class='thumbnail' href='#'> KS </a> <div class='content'> <h3>Kenny Sing</h3> <span class='preview'>make sure you take a look at the...</span> <span class='meta'> 3h ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> <li> <a class='thumbnail' href='#'> MS </a> <div class='content'> <h3>Mitch Skolnik</h3> <span class='preview'>i love wood grain things!</span> <span class='meta'> 6h ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> <li> <a class='thumbnail' href='#'> YP </a> <div class='content'> <h3>Yuriy Portnykh</h3> <span class='preview'>check issues for the latest version...</span> <span class='meta'> 10h ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> <li> <a class='thumbnail' href='#'> JR </a> <div class='content'> <h3>Josh Ronk</h3> <span class='preview'>make sure to do the following by...</span> <span class='meta'> 2d ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> <li> <a class='thumbnail' href='#'> BM </a> <div class='content'> <h3>Benjamin Mueller</h3> <span class='preview'>Hi nice to meet you!</span> <span class='meta'> 1w ago · <a href='#'>Category</a> · <a href='#'>Reply</a> </span> </div> </li> </ul> </div> <footer> <a href='#'>View All Messages</a> </footer> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://code.jquery.com/ui/1.11.2/jquery-ui.min.js'></script> <script >$('.fa-search').click(function(){ $(this).stop().toggleClass('fa-close'); $('.search').stop().animate({height: "toggle", opacity: "toggle"}, 300); }); $('.chat').draggable({ handle: 'header' }); //# sourceURL=pen.js </script> </body></html>
Related:
See More
Free Template
Material Dashboard Dark Edition
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76