www.webdeveloper.com
Results 1 to 7 of 7

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

Hybrid View

  1. #1
    Join Date
    Jul 2006
    Posts
    373

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

    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.

  2. #2
    Join Date
    Mar 2009
    Posts
    452


    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

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    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
    Code:
    <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
    Code:
    <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
    Code:
    <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.

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    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.

  5. #5
    Join Date
    Jul 2006
    Posts
    373
    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?

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    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.

  7. #7
    Join Date
    Jul 2006
    Posts
    373
    My site is an Invision Power Board. I will send you the link by PM for security reasons.

    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles