Facebook Style Chat Box Popup using JavaScript and CSS

In this article I will show you the logic and code behind facebook chat box popups. Many other websites like freelancer.com are using this kind of similar popups for implementing chat design. Therefore if you are planning to have a chatting functionality in your website then this article provide you the best help for designing it.

CSS Implementation

We need enough room for chat boxes and sidebar therefore we only display those if viewport width is greater than 540px. Even facebook does the same. Popup boxes and sidebar are fixed to the viewport.

Here is the CSS code:

@media only screen and (max-width:540px){.chat-sidebar{display:none !important;}

//calculate the total number of popups suitable and then populate the toatal_popups variable.function calculate_popups(){var width = window.innerWidth;if(width <540){ total_popups =0;}else{ width = width -200;//320 is width of a single popup box total_popups = parseInt(width/320);}

display_popups();

}

//recalculate when window is loaded and also when window is resized. window.addEventListener("resize", calculate_popups); window.addEventListener("load", calculate_popups);

thank you for your wonderful work. but plz how can i use this code to show up messages from database , i can’t use javascript variable “id” to get data from database in every popup . if any one know how to do that plz help

Hi , first of all thank you for your wonderful work. I built upon this example to make a full chat application with php and jquery, although the javascript functions you made remained unmodified. On some occasions the popup close button does not close the popup, I also tried calling the close function from console, it returns “undefined”. I have no idea why this error occurs, I will be very grateful if you provided some hint on how I can resolve this issue. Thanks in advance.

but i have some doubt where i place typing message and display and how to i store date in my database .please tell me and replay me as soon possible plz or another format is their. plz replay me i'm waiting for ur answer.plz

I used the popup window of facebook chat and its amazing.I put in textarea for chat. Now the problem is i cannot make it as richtextbox (using texteditor) for emotes purposes.The texteditor gets integrated but the texteditor functionality is not shown. i tried calling the javascript and css files…during popup window creation..still the same.. console of browser shows no error. The texteditor working in webforms but not in chat window…

I am using your script and its working fine for me in my project. But i am also using angular JS in my project. When i use this code to open chat box after that my angular JS code stops working until i refresh the complete page. I am unable to get why is it not working. If you can help me with this, it would be great.

i have a challenge; any time am chatting with two or more people, only one session of the chat works. example, suppose am chatting with Steve, it works well, but if am chatting with more than one user on the site one works.. (stephen.aryee69@gmail.com)

hello sir i have been dealing with this problem for the last 3 days my problem is that in the popup message i want to display message from database but the ” ID” (register popup function)is in javascript variable so i tried to call it with ajax and return the variable data to php variable which i can Query the result to the popup message box but it didnt work out..Is there any way that i can excess to the database from the JS variable with ajax and return data to the popup message box …i tried every thing please help i cant fix this problem

hai sir i’m using your script for chatting application but im face a problem in that script there is no message sending box please help to share the code or guide me please help im started career just know but im not solve this problem please help me

Hi there, great script. I have a few questions as I’d like to add a few things to this already wonderful chat/pop-up script but need your input. How can I minimize each pop by clicking on the pop-up head and it scrolls down to the pop-up head title…much like facebook’s functionality? It’s not as useful if you can only close it. Also, is there a way that you can create a tab simillar to that of facebook when you open a certain amount of pop you can scroll through the chat users in that tab button?

Any help with code samples is very much appreciated as I am new to javascript/jQuery. Thank you.

hello yor scripts are really great… but i would like to know how i can make this script such that as i move from page to page..the chat window stays put…what you have now..as i move from one page to another i need to start opening current cahts all over again and thats not nice.. thanks

To create code blocks or other preformatted text, indent by four spaces:

This will be displayed in a monospaced font. The first four
spaces will be stripped off, but all other whitespace
will be preserved.
Markdown is turned off in code blocks:
[This is not a link](http://example.com)