1

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.

1 Answer 1

1

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.

1
  • Thanks for your reply, I was looking on the iframes also, but couldn't come up with descent idea like yours. But still thinking about pros and cons of using iframes... Commented Mar 21, 2011 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.