Draggable Chatbox

Developer
Andy Tran
Size
5,316 Kb
Views
123,464
  1. Draggable Chatbox Previews
  2. Draggable Chatbox HTML Codes
  3. Draggable Chatbox CSS Codes
  4. Draggable Chatbox JS Codes

How do I make an draggable chatbox?

A simple flat draggable chat box with a toggle search function. . What is a draggable chatbox? How do you make a draggable chatbox? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Draggable Chatbox Previews
IQ Test

Draggable Chatbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable Chatbox</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</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='http://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 &middot; <a href='#'>Category</a> &middot; <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 &middot; <a href='#'>Category</a> &middot; <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 &middot; <a href='#'>Category</a> &middot; <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 &middot; <a href='#'>Category</a> &middot; <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 &middot; <a href='#'>Category</a> &middot; <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 &middot; <a href='#'>Category</a> &middot; <a href='#'>Reply</a> </span> </div> </li> </ul> </div> <footer> <a href='#'>View All Messages</a> </footer>
</div> <script src='http://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 src="js/index.js"></script>
</body>
</html>

Draggable Chatbox - Script Codes CSS Codes

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;
}

Draggable Chatbox - Script Codes JS Codes

$('.fa-search').click(function(){ $(this).stop().toggleClass('fa-close'); $('.search').stop().animate({height: "toggle", opacity: "toggle"}, 300);
}); $('.chat').draggable({ handle: 'header' });
Draggable Chatbox - Script Codes
Draggable Chatbox - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 5,316 Kb
Views 123,464
Do you need developer help for Draggable Chatbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Tran (andytran) Script Codes
Name
Information Card Slider
Flat Pricing Table
Flat Navigation
Planner Dashboard
Material Playing Cards
Flat Login Form
Flat Vertical Navigation 2.0
Material Login Form
Day 23 - Interactive Wallet
Code Module - Slide In Banner
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!