CODEWITHSUNDEEP
javascriptajaxnavigation
AbstractVoid
AbstractVoid

Reputation: 4000

How to refresh the page and keep some elements non-refreshed (persistent)?

Hey. I need to create a chat that will stay on the page while user navigates through the website - like on the facebook or gmail. So, I'm looking for the way of how to keep some parts of the page persistent on the user's screen, while refreshing the page and navigating through the site.

And yes, I know how the FB and GM are doing this - they're refreshing everything via ajax, and updating hash in the url accordingly. Maybe, there is another approach of doing this, or I'm forced to refactor all my site's navigation?

Thanks.

Upvotes: 1

Views: 1042

Answers (1)

Andbdrew
Andbdrew

Reputation: 11895

You can do this by using iframes. Create a wrapper div that will contain your navigation, main content (id="main_content") (the part you want to change), and the area that you want to remain unchanged by navigation (your chat window <iframe id="chat_window" blah blah />).

You need to assign a position: relative attribute to the wrapper div to be able to position #chat_window inside it, and position: absolute to the chat iframe. Then you can position the the chat iframe where you want it to appear and use a jQuery function like:

$(function() {
  $("#chat_button").click(function() {
    $("#chat_window").css("z-index", "5")
  });
});

to make the chat window appear over the main content area. Then just make sure your navigation links use main_content as their target.

Upvotes: 1

Related Questions