popover window that remains open even if user navigates to another page?

This site is best viewed in a modern browser with JavaScript enabled.

popover window that remains open even if user navigates to another page?

supercain

Hi,

i need to put an iframe on every single page of my website, but i dont want the content of the iframe to reload everytime the user navigates to another page. I have seen that before on some pages like Facebook chat. There you can navigate to another page and the chat window stays open without reloading. I wonder how is that accomplished because i need it so much since i have a chat too and its annoying to have it reload and log you in every time you navigate it to other page. I hope you can help me.

Thank you.

ZABI

the dialog box you see in facebook or similar are not really a window they are built using standard html div/table/span elements. however back to your question. facebook uses AJAX to load the different content you refer to as pages. so you can too do that through AJAX

search update page content with AJAX on net and you will find alot of good tutorials, best of luck

supercain

Hi,

i figured out it was ajax, but i would like to know if i can apply it in this case. Lets say i have 3 pages on my website, all of them have an iframe where the chat is embedded.

Code for page 1

<html>
 <head>
  <title>Page 1</title>
 </head>
 <body>
  <h1>This is page 1</h1>
  <div id="chat">
   <iframe src="chat.php">
  </div>
  PAGE 1 CONTENT GOES HERE
  <a href="page2.html">Go to page 2</a>
 </body>
</html>

Code for page 2

<html>
 <head>
  <title>Page 2</title>
 </head>
 <body>
  <h1>This is page 2</h1>
  <div id="chat">
   <iframe src="chat.php">
  </div>
  PAGE 2 CONTENT GOES HERE
  <a href="page3.html">Go to page 2</a>
 </body>
</html>

Code for page 3

<html>
 <head>
  <title>Page 3</title>
 </head>
 <body>
  <h1>This is page 3</h1>
  <div id="chat">
   <iframe src="chat.php">
  </div>
  PAGE 3 CONTENT GOES HERE
  <a href="page1.html">Go back to page 1</a>
 </body>
</html>

So when you load page 1, the chat loads too, but if you click on "go to page 2" the chat div remains in place without reloading and only the rest of the page changes. Can i do that with ajax?

Thank you.

ZABI

hmmm,,

you can have chat and the rest of content in two different containers. lets say content and chat. so whenever you load data just update the content container and leave the chat as is.

supercain

I tried that once but it didnt work with my site, because its a board, very similar to this one. So people will complain if they have to navigate a board that is encapsulated inside a div or iframe. I cant definitively change the structure of my site. It has to stay as it is but with the div container below the header that contains the chat. Is it impossible then?

ZABI

if you are using vBulletin or any other popular BB system, there will be some plugin for chat surely. however you just have to separate the two parts you want to load and not load; it is as simple as that. you can move your chat div to the very beginning of your body or at the end then you can position it via css where you want it to be displayed.

it will be more helpful for me to understand if you provide the link if you have your site online.

supercain

My site is an Invision Power Board. I will send you the link by PM for security reasons.

Thank you.