Simple chat box design style using jquery and css | 2my4edge

25 April 2017

Simple chat box design style using jquery and css

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.

chatting box chat style design css layout
LIVE DEMO                                        DOWNLOAD

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.

1 comment:

  1. 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.

    ReplyDelete

^