Today we are going to discuss how to create facebook style chat box popup box using HTML and CSS. Here we have implemented and provided simple example for facebook style chat box popup and layout design for the chat box is way more easier and simple. You can easily use and integrate this example in your websites.
We have used Fixed position property of css to display the chat box one after another, by this way it will not effect the other css layout design.
Feature for this chat box popup :
index.html
This consists of HTML layout design.
style.css
Lets check out the complete style-sheet example below :
script.js
This is a most integral part of the chat application, with help of this you can perform below operation:
1. You can close the chat box by clicking on "X" symbol.
2. You can minimize the chat box by clicking on chat box head.
3. You can send the new chat message to desired user, by entering the text in textarea box.
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20Style%20Chat%20Box%20Popup%20Layout%20Design
Demo Link :
https://skptricks.github.io/learncoding/facebook%20like%20chat%20box%20popup/index.html
This is all about facebook style chat box popup box layout design. Hope you like this simple example. 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.
We have used Fixed position property of css to display the chat box one after another, by this way it will not effect the other css layout design.
Feature for this chat box popup :
- With the help of this you can perform multi user chat in single web page.
- You can close the chat session whenever required.
- You can minimize the chat pop-up box.
- The Latest chat box, should be displayed at right most corner.
Facebook Style Chat Box Popup Example :
Lets see the complete and simple example to create chat box layout :index.html
This consists of HTML layout design.
<!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 class="msg_box" style="right:50px" rel="skp"> <div class="msg_head">Sumit Kumar Pradhan <div class="close">x</div> </div> <div class="msg_wrap"> <div class="msg_body"> <div class="msg-left">What is up ? </div> <div class="msg-right">Playing video game, you say</div> <div class="msg-left">can i join you ? </div> <div class="msg_push"></div> </div> <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div> <div class="msg_box" style="right:310px;" rel="skp1" > <div class="msg_head">Amit Kumar Singh <div class="close">x</div> </div> <div class="msg_wrap"> <div class="msg_body"> <div class="msg-left">What is up ? </div> <div class="msg-right">Playing video game, you say</div> <div class="msg-left">can i join you ? </div> <div class="msg_push"></div> </div> <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div> <div class="msg_box" style="right:570px;" rel="skp2"> <div class="msg_head">Neeraj Tiwari <div class="close">x</div> </div> <div class="msg_wrap"> <div class="msg_body"> <div class="msg-left">What is up ? </div> <div class="msg-right">Playing video game, you say</div> <div class="msg-left">can i join you ? </div> <div class="msg_push"></div> </div> <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div> <div class="msg_box" style="right:830px;" rel="skp3"> <div class="msg_head">Sourav singh <div class="close">x</div> </div> <div class="msg_wrap"> <div class="msg_body"> <div class="msg-left">What is up ? </div> <div class="msg-right">Playing video game, you say</div> <div class="msg-left">can i join you ? </div> <div class="msg_push"></div> </div> <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div> <div class="msg_box" style="right:1090px;" rel="skp4"> <div class="msg_head">Albert rod <div class="close">x</div> </div> <div class="msg_wrap"> <div class="msg_body"> <div class="msg-left">What is up ? </div> <div class="msg-right">Playing video game, you say</div> <div class="msg-left">can i join you ? </div> <div class="msg_push"></div> </div> <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div> </body> </html>
style.css
Lets check out the complete style-sheet example below :
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; }
script.js
This is a most integral part of the chat application, with help of this you can perform below operation:
1. You can close the chat box by clicking on "X" symbol.
2. You can minimize the chat box by clicking on chat box head.
3. You can send the new chat message to desired user, by entering the text in textarea box.
$(document).ready(function(){ var arr = ["skp","skp1","skp2","skp3","skp4"]; // List of users $('.msg_head').click(function(){ var chatbox = $(this).parents().attr("rel") ; $('[rel="'+chatbox+'"] .msg_wrap').slideToggle('slow'); return false; }); $('.close').click(function(){ var chatbox = $(this).parents().parents().attr("rel") ; $('[rel="'+chatbox+'"]').hide(); //update require arr.splice($.inArray(chatbox, arr),1); i = 50 ; // start position j = 260; //next position $.each( arr, function( index, value ) { $('[rel="'+value+'"]').css("right",i); i = i+j; }); return false; }); $('textarea').keypress( 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); } } }); });
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20Style%20Chat%20Box%20Popup%20Layout%20Design
Demo Link :
https://skptricks.github.io/learncoding/facebook%20like%20chat%20box%20popup/index.html
This is all about facebook style chat box popup box layout design. Hope you like this simple example. 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.
No comments:
Post a Comment