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.

4 comments:

  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
  2. Daroga Haffu Singh7/04/2017 1:45 PM

    Maraj monthly kitne chhap lete ho ?

    ReplyDelete
  3. Perpetually logical and an outstanding contribution to the world of bloggers.
    Locatalk App replaces the Base Chat

    ReplyDelete
  4. That is truly decent to read. much obliged to you for the upgrade and good matter.... text chat

    ReplyDelete

^