Window like facebook chat

Question

The Facebook chat window remains open, unchanged, to refresh the page or even when changing the page. How to reproduce something like that? I tried with a set of frames, but it did not work.

How to save a div to open a window similar to the inside, even after refreshing the page or clocar on the link to the website?

Answer 1

Like them, you can try -

• Data is shared between facebook pages. Perhaps HTML5 localStorage ? Cookies? I'm not sure.

• If you notice that they do not “refresh” the page, they ajax-refresh the content on the page for subsequent downloads. (unless of course you manually go to the same page).

• Finally, all of its CSS is basically some z-index used to use.

I hope these 3 are enough to get you started.

Answer 2

I don’t think the whole Facebook page is loaded. Each link has its own "target". Most of them bring a page (I think it's just AJAX) to show, others just change some parts of the screen. So let's say you have two divs. One div is chat-div. The positioning is fixed and everything, z-index at 100, it will always remain on top. The rest of the page is another div. Inside this div, you can load specific pages using AJAX, without refreshing the entire screen.

As with screen reloading: you can easily save (also with AJAX) whether the user closed the chat screen or opened it. Just create a table in the database called “chats” or something else, and then when the chat screen opens, you put an entry in this table with “person_1”, “person_2”, “lastmessage" and "active". When they close the chat, you can put the "active" field in false. Then, whenever someone downloads the entire site, you check the chats for active chats and show them when they are.

Answer 3

I would look at qjuery-qjax: https://github.com/defunkt/jquery-pjax

From your documents:

pjax works by grabbing html from your server using ajax and replacing the contents of the container on your page with ajax'd html. Then it updates the current browser URL using pushState without reloading the page layout or any resources (js, css), which makes it possible to quickly and completely load the page. But actually it is just ajax and pushState.