"draggable chatbox"
Bootstrap 3.0.0 Snippet by evarevirus

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

Material Kit

Questions / Comments: