Facebook like Chat/Notifications Toolbar
Hi,
I am trying to build a facebook like chat/notifications toolbar which remains static regardless of how much you navigate through pages.
The only solution i found for this is (by studying facebook, gmail' html code) that for this you need to pull pages in a 100% height width iframe and toolbar has to be in a floating div which remains static on the page at the bottom of the browser.
The only problem I am facing in this is that because the main page remains same n the iframe source file url changes, the URL in the browser remains the same. In Facebook and Gmail, the url changes in the browser though they also use iframes for their main content.
Anybody who knows how can this be done?
I am attaching the code below!
I am trying to build a facebook like chat/notifications toolbar which remains static regardless of how much you navigate through pages.
The only solution i found for this is (by studying facebook, gmail' html code) that for this you need to pull pages in a 100% height width iframe and toolbar has to be in a floating div which remains static on the page at the bottom of the browser.
The only problem I am facing in this is that because the main page remains same n the iframe source file url changes, the URL in the browser remains the same. In Facebook and Gmail, the url changes in the browser though they also use iframes for their main content.
Anybody who knows how can this be done?
I am attaching the code below!
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I'm only guessing here but it looks like facebook does it by using the hash in the address, so it doesn't actually reload the page. The url looks like this
http://www.facebook.com/home.php#/friends/?ref=tn
so your still always on
http://www.facebook.com/home.php
but a click in the iframe will tell the parent frame (via javascript) to jump to the new hash address, which doesn't actually reload the parent page but causes the iframe content to reloaded.
http://www.facebook.com/home.php#/friends/?ref=tn
so your still always on
http://www.facebook.com/home.php
but a click in the iframe will tell the parent frame (via javascript) to jump to the new hash address, which doesn't actually reload the parent page but causes the iframe content to reloaded.
Here's an example page, click on one of the links at the bottom of the page to load a new page (without refreshing the parent page - note that the feedback doesn't say 'Loaded page'), then because it's loaded the new # url, if you refresh it will show you the same page again.
This doesn't need to be an iframe, you can load content into a div or whatever. The main point is your recording the new state using the # address in the browser without reloading the page and so without losing the chat session. This is all standard AJAX concepts.
This doesn't need to be an iframe, you can load content into a div or whatever. The main point is your recording the new state using the # address in the browser without reloading the page and so without losing the chat session. This is all standard AJAX concepts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
margin: 0;
padding: 0;
}
body #presence {
bottom:0;
color:#111111;
font-size:11px;
height:25px;
padding:0;
position:fixed;
right:0;
width:100%;
z-index:99;
}
#presence_ui {
background:transparent url(http://www.facebook.com/images/sprite/MegaSprite_5005_ltr.png) repeat-x scroll 0 -24px;
margin-left:15px;
margin-right:15px;
overflow:visible !important;
position:relative;
}
#presence_bar {
background:transparent url(/images/sprite/MegaSprite_5005_ltr.png) repeat-x scroll 0 -24px;
display:block;
background-position:left top;
background-repeat:repeat-x;
height:25px;
padding:0;
border-left:1px solid #B5B5B5;
border-right:1px solid #B5B5B5;
}
#presence_bar_left {
display:inline;
line-height: 25px;
padding-left: 10px;
}
#feedback {
display:inline;
line-height: 25px;
margin-left: 50px;
}
#channel_iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
frameborder: 0;
}
</style>
<script language="javascript" type="text/javascript">
//<!--
function navigateFrame(page)
{
if (page == "Google")
document.getElementById("channel_iframe").src = "http://www.google.com";
else if (page == "Facebook")
document.getElementById("channel_iframe").src = "http://www.facebook.com";
else if (page == "Twitter")
document.getElementById("channel_iframe").src = "http://www.twitter.com";
else
document.getElementById("channel_iframe").src = "about:blank";
document.getElementById("feedback").innerHTML = "Page: " + page;
}
function init()
{
var params = window.location.hash.substr(1).split("=");
if (params.length > 0 && params[0] == "content")
navigateFrame(params[1]);
document.getElementById("feedback").innerHTML = "Loaded page";
}
//-->
</script>
</head>
<body onload="init()">
<iframe id="channel_iframe" src="about:blank">
</iframe>
<div id="presence" class="">
<div id="presence_ui" class="clearfix">
<div id="presence_bar">
<div id="presence_bar_left">
<a href="#content=Google" onclick="navigateFrame('Google');">Google</a> |
<a href="#content=Facebook" onclick="navigateFrame('Facebook');">Facebook</a> |
<a href="#content=Twitter" onclick="navigateFrame('Twitter');">Twitter</a>
<div id="feedback">Default</div>
</div>
</div>
</div>
</div>
</body>
</html>
but for in this case i will have to call this onclick event on every link.. on the toolbar as well the iframe source pages.. is there a generalized way to handle this?
I have all the pages designed which are to be used in the iframes.. and they too have some links.. what about the url hashing when clicking on those links! can I handle all of them on the same default page(page which contains iframe)?
I have all the pages designed which are to be used in the iframes.. and they too have some links.. what about the url hashing when clicking on those links! can I handle all of them on the same default page(page which contains iframe)?
Here's a way to handle this, basically once the iframe content is loaded, we rewrite all the link href's to call the parent window's jump function which stores the new location in the hash and then redirects the iframe to the new url. You will need to create a new webpage with some links on it to test this script, I called mine links.htm.
Note:
- this will only work for a local page, it will not change the links for pages on another domain (thus the facebook and google links do not work)
- This only changes hrefs and wraps them in a function, any links on your iframe page that have javascript in the href will not work, nor will onclick handlers.
- I've only tested this in IE8.
A better solution would be to rewrite the links properly in the iframe pages, but if you don't want to do that then this script should work.
Note:
- this will only work for a local page, it will not change the links for pages on another domain (thus the facebook and google links do not work)
- This only changes hrefs and wraps them in a function, any links on your iframe page that have javascript in the href will not work, nor will onclick handlers.
- I've only tested this in IE8.
A better solution would be to rewrite the links properly in the iframe pages, but if you don't want to do that then this script should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
margin: 0;
padding: 0;
}
body #presence {
bottom:0;
color:#111111;
font-size:11px;
height:25px;
padding:0;
position:fixed;
right:0;
width:100%;
z-index:99;
}
#presence_ui {
background:transparent url(http://www.facebook.com/images/sprite/MegaSprite_5005_ltr.png) repeat-x scroll 0 -24px;
margin-left:15px;
margin-right:15px;
overflow:visible !important;
position:relative;
}
#presence_bar {
background:transparent url(/images/sprite/MegaSprite_5005_ltr.png) repeat-x scroll 0 -24px;
display:block;
background-position:left top;
background-repeat:repeat-x;
height:25px;
padding:0;
border-left:1px solid #B5B5B5;
border-right:1px solid #B5B5B5;
}
#presence_bar_left {
display:inline;
line-height: 25px;
padding-left: 10px;
}
#feedback {
display:inline;
line-height: 25px;
margin-left: 50px;
}
#channel_iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
frameborder: 0;
}
</style>
<script language="javascript" type="text/javascript">
//<!--
function jump(url)
{
alert(url);
loadIFrame(url);
window.location.hash = escape(url);
document.getElementById("feedback").innerHTML = "Page: " + url;
}
function loadIFrame(url)
{
var iframe = document.getElementById("channel_iframe");
iframe.src = url
iframe.onreadystatechange = function ()
{
if (this.readyState == "complete")
{
var links = this.contentWindow.document.getElementsByTagName("A");
for (var i = 0; i < links.length; i++)
links[i].href = "javascript: parent.jump('" + links[i].href + "')";
}
}
}
function init()
{
var url = window.location.hash.substr(1);
loadIFrame(unescape(url));
document.getElementById("feedback").innerHTML = "Loaded page";
}
//-->
</script>
</head>
<body onload="init()">
<iframe id="channel_iframe" src="about:blank" frameborder="0">
</iframe>
<div id="presence" class="">
<div id="presence_ui" class="clearfix">
<div id="presence_bar">
<div id="presence_bar_left">
<a href="facebook_chat_links.htm">Home</a> |
<a href="javascript: jump('http://www.google.com');">Google</a> |
<a href="javascript: jump('http://www.facebook.com');">Facebook</a> |
<a href="javascript: jump('links.htm');">Links</a>
<div id="feedback">Default</div>
</div>
</div>
</div>
</div>
</body>
</html>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial