/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Oct 10.2012

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.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZABIOct 10.2012 — ?

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 [B]update page content with AJAX[/B] on net and you will find alot of good tutorials, best of luck ?
Copy linkTweet thisAlerts:
@supercainauthorOct 10.2012 — 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.

[B]Code for page 1[/B]
[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]

[B]Code for page 2[/B]
[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]

[B]Code for page 3[/B]
[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>
[/CODE]

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.
Copy linkTweet thisAlerts:
@ZABIOct 10.2012 — 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.
Copy linkTweet thisAlerts:
@supercainauthorOct 10.2012 — 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?
Copy linkTweet thisAlerts:
@ZABIOct 10.2012 — 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.
Copy linkTweet thisAlerts:
@supercainauthorOct 11.2012 — My site is an Invision Power Board. I will send you the link by PM for security reasons.

Thank you.
×

Success!

Help @supercain spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...