In this post, I'm going to explain you a simple chat box design layout using jquery with css. Now a days most of them looking for chat box design, so here i'm going to show you one of the simplest way of chat box design with simple layout. lets see the code below.
HTML CODE
<div style='margin:0 auto; width:15%;'> <div id='chatbox' style='margin-top:20px'> <h3>2my4edge Demo Chat</h3> <div id='chat'> <ul id='messages'> <li> <img src="arun.jpg"/> <span>Hi</span> </li> <li> <img src="arun.jpg"/> <span>Hello Friends</span> </li> <li> <img src="arun.jpg"/> <span>Welcome to 2my4edge</span> </li> <li> <img src="arun.jpg"/> <span>Chatting box layout design</span> </li> <li> <img src="arun.jpg"/> <span>Simple facebook style Chatbox layout</span> </li> </ul> </div> <div class="inputbox"> <input type="text" id="chatdata" class="chatdata" placeholder="Message" /> <!-- <input type="button" value="Send" id="send" onclick="sendmsg()" /> --> </div> </div> </div>
CSS
<style type="text/css"> * { padding:0px; margin:0px; } body{ font-family:arial; font-size:13px } #chatbox { width:300px; border:1px solid #e8e6e6; margin:1px; position: absolute; min-height: 300px; } #chatbox > h3 { background-color:#4080ff; padding:5px; color:#fff; } #chat { max-height:220px; overflow-y:auto; max-width:350px; } #chat > ul > li { padding:3px; clear:both; padding:4px; margin:10px 0px 5px 0px; overflow:auto } #messages{ list-style:none } #messages > li > img { width:35px; float:left } #messages > li > span { width:200px; float:left; margin-left:5px; word-wrap: break-word; background: #4080ff; padding: 3%; color: white; border-radius: 10px; } #chatdata { padding:9px; border-radius:5px; border:1px solid #999; width:280px; height: 35px; } #send { padding: 4px; border: solid 1px #333; background-color: #133783; color:#fff; font-weight:bold } .inputbox{ position: absolute; bottom: 0; } </style>
JAVA SCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script type="text/javascript"> $(function(){ $('.chatdata').keypress(function (e) { if (e.which == 13) { sendmsg(); } }); var height = 0; $('#messages li').each(function(i, value){ height += parseInt($(this).height()); }); height += '1'; $('#chat').animate({scrollTop: height}); }); $("#chatData").focus(); function sendmsg() { var a = $("#chatdata").val().trim(); if(a.length > 0){ $("#chatdata").val(''); $("#chatdata").focus(); $("<li></li>").html('<img src="arun.jpg"/><span>'+a+'</span>').appendTo("#messages"); $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow"); } } </script>
I hope you can understand this code, If you have any query comment below in comment box. i will reply you. Thank you.
Hey Arunkumar, great code! Sometimes you can have all the voice and data cabling infrastructure, but you need to have simple code that loads fast too. Thank you for sharing this script with us. Will be implementing it soon.
ReplyDeleteMaraj monthly kitne chhap lete ho ?
ReplyDeletePerpetually logical and an outstanding contribution to the world of bloggers.
ReplyDeleteLocatalk App replaces the Base Chat
That is truly decent to read. much obliged to you for the upgrade and good matter.... text chat
ReplyDelete