Sunday, March 4, 2018

Facebook Style Chat Application with jQuery and CSS

Today we are going to discuss how to create Facebook Style Chat Application with jQuery and CSS. In our Earlier post we have provided simple demo and explanation about Facebook Like Chat Slider Layout Design and Facebook Style Chat Box Popup Layout Design Using JQUERY and CSS. Hoping this example helps you similarly for creating chat application.

Facebook Style Chat Application with jQuery and PHP, Facebook Style Chat Box Popup using jQuery and CSS, Chat Application like Facebook, Facebook Like Chat Slider Layout Design and Facebook Style Chat Box Popup Layout Design Using JQUERY and CSS


So, Here we are integrating chat slider layout and chat popup box layout design in one HTML file. When user click on the username from the chat slider box, then it will show the same user popup box like Facebook application.


Feature for this chat box application :
1. Easily select user from the chat silder box.
2. With the help of this you can perform multi user chat in single web page.
3. You can close the chat session whenever required.
4. You can minimize the chat pop-up box.
5. The Latest chat box, should be displayed at right most corner.

Chat Application like Facebook :

Lets see the complete example to design Facebook like chat application and in case of any question please do comment in comment box below :

Chat-Application.html
This consists of HTML layout design for the slider and chat box popup.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook like chat popup layout</title>
    <link href="style.css" rel="stylesheet">
 <script src="jquery-1.10.1.min.js"></script>
 <script src="script.js"></script>
  </head>

<body>
 

<div id="chat-sidebar">

<div id="sidebar-user-box" class="100" >
<img src="user.png" />
<span id="slider-username">Sumit Kumar Pradhan </span>
</div> 

<div id="sidebar-user-box" class="101" >
<img src="user.png" />
<span id="slider-username">Skptricks </span>
</div> 

<div id="sidebar-user-box" class="102" >
<img src="user.png" />
<span id="slider-username">Amit Singh </span>
</div> 

<div id="sidebar-user-box" class="103" >
<img src="user.png" />
<span id="slider-username">Neeraj Tiwari </span>
</div> 

<div id="sidebar-user-box" class="104"  >
<img src="user.png" />
<span id="slider-username">Sorav Singh </span>
</div> 

<div id="sidebar-user-box" class="105" >
<img src="user.png" />
<span id="slider-username">Lokesh Singh </span>
</div> 

<div id="sidebar-user-box" class="106" >
<img src="user.png" />
<span id="slider-username">Tony </span>
</div> 

<div id="sidebar-user-box" class="107" >
<img src="user.png" />
<span id="slider-username">Alex Robby </span>
</div> 

<div id="sidebar-user-box" class="108" >
<img src="user.png" />
<span id="slider-username">Pragaya Mishra </span>
</div> 

<div id="sidebar-user-box" class="109" >
<img src="user.png" />
<span id="slider-username">Abhishek Mishra </span>
</div> 
 
</div> 

</body>
</html>

script.js
This consists of script design for chat application. It helps to perform below operations :
1.  Display the chat popup box window, when user click it out username from chart box slider.
2.  Maximize & Minimize the chat box popup window.
3. Closing the chat box or chat session.
4. Sending the new message to users.
$(document).ready(function(){
     
  var arr = []; // List of users 
 
 $(document).on('click', '.msg_head', function() { 
  var chatbox = $(this).parents().attr("rel") ;
  $('[rel="'+chatbox+'"] .msg_wrap').slideToggle('slow');
  return false;
 });
 
 
 $(document).on('click', '.close', function() { 
  var chatbox = $(this).parents().parents().attr("rel") ;
  $('[rel="'+chatbox+'"]').hide();
  arr.splice($.inArray(chatbox, arr), 1);
  displayChatBox();
  return false;
 });
 
 $(document).on('click', '#sidebar-user-box', function() {
 
  var userID = $(this).attr("class");
  var username = $(this).children().text() ;
  
  if ($.inArray(userID, arr) != -1)
  {
      arr.splice($.inArray(userID, arr), 1);
     }
  
  arr.unshift(userID);
  chatPopup =  '<div class="msg_box" style="right:270px" rel="'+ userID+'">'+
     '<div class="msg_head">'+username +
     '<div class="close">x</div> </div>'+
     '<div class="msg_wrap"> <div class="msg_body"> <div class="msg_push"></div> </div>'+
     '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>  </div>  </div>' ;     
    
     $("body").append(  chatPopup  );
  displayChatBox();
 });
 
 
 $(document).on('keypress', 'textarea' , function(e) {       
        if (e.keyCode == 13 ) {   
            var msg = $(this).val();  
   $(this).val('');
   if(msg.trim().length != 0){    
   var chatbox = $(this).parents().parents().parents().attr("rel") ;
   $('<div class="msg-right">'+msg+'</div>').insertBefore('[rel="'+chatbox+'"] .msg_push');
   $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
   }
        }
    });
 
  
    
 function displayChatBox(){ 
     i = 270 ; // start position
  j = 260;  //next position
  
  $.each( arr, function( index, value ) {  
     if(index < 4){
          $('[rel="'+value+'"]').css("right",i);
    $('[rel="'+value+'"]').show();
       i = i+j;    
     }
     else{
    $('[rel="'+value+'"]').hide();
     }
        });  
 }  
 
});

style.css
This consists of stylesheet design for the chat box slider and chat box popup window.
/**** Chat Popup Layout******/
body{
 background:#e5e5e5; 
 font-family: sans-serif;
}

.msg_box{
 position:fixed;
 bottom:-5px;
 width:250px;
 background:white;
 border-radius:5px 5px 0px 0px;
}

.msg_head{ 
 background:black;
 color:white;
 padding:8px;
 font-weight:bold;
 cursor:pointer;
 border-radius:5px 5px 0px 0px;
}

.msg_body{
 background:white;
 height:200px;
 font-size:12px;
 padding:15px;
 overflow:auto;
 overflow-x: hidden;
}
.msg_input{
 width:100%;
 height: 55px;
 border: 1px solid white;
 border-top:1px solid #DDDDDD;
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;   
 box-sizing: border-box;  
}

.close{
 float:right;
 cursor:pointer;
}
.minimize{
 float:right;
 cursor:pointer;
 padding-right:5px;
 
}

.msg-left{
 position:relative;
 background:#e2e2e2;
 padding:5px;
 min-height:10px;
 margin-bottom:5px;
 margin-right:10px;
 border-radius:5px;
 word-break: break-all;
}

.msg-right{
 background:#d4e7fa;
 padding:5px;
 min-height:15px;
 margin-bottom:5px;
 position:relative;
 margin-left:10px;
 border-radius:5px;
 word-break: break-all;
}
/**** Slider Layout Popup *********/

 #chat-sidebar {
     width: 250px;
     position: fixed;
     height: 100%;
     right: 0px;
     top: 0px;
     padding-top: 10px;
     padding-bottom: 10px;
     border: 1px solid #b2b2b2;
}
 #sidebar-user-box {
     padding: 4px;
     margin-bottom: 4px;
     font-size: 15px;
     font-family: Calibri;
     font-weight:bold;
     cursor:pointer;
}
 #sidebar-user-box:hover {
     background-color:#999999 ;
}
 #sidebar-user-box:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 img{
     width:35px;
     height:35px;
     border-radius:50%;
     float:left;
}
 #slider-username{
     float:left;
     line-height:30px;
     margin-left:5px;
}

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20Style%20Chat%20Application%20with%20jQuery%20and%20PHP

Demo Link :
https://skptricks.github.io/learncoding/facebook%20like%20chat%20application%20example/Chat-Application.html

This is all about building a chat application like Facebook style. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.




4 comments:

  1. hello could you make more better when screen size small it show like fb chat bar

    ReplyDelete
  2. Facebook is like a dope..once you get attached from facebook you can never leave it..buy shares for Facebook for more fame..

    ReplyDelete
  3. My curiosity to learn more and more on this blog.. text chat

    ReplyDelete
  4. Hello, It's awesome plugin thanks for sharing to us. But I've one query, I want the latest to appear right most and after 4 I need the chat box to minimize. Can you please help me out?

    ReplyDelete