I like how Facebook keeps that toolbar on the bottom of the page.
Does that require cross-browser ninja skills?
Their JavaScript/CSS files are huge so I am having a hard time narrowing down the implementation (for learning purposes).
I like how Facebook keeps that toolbar on the bottom of the page.
Does that require cross-browser ninja skills?
Their JavaScript/CSS files are huge so I am having a hard time narrowing down the implementation (for learning purposes).
Share Improve this question edited Dec 29, 2009 at 9:38 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Jul 31, 2009 at 21:14 mrblahmrblah 104k142 gold badges317 silver badges423 bronze badges 3- You mean, how do they position it to the bottom of the window, or how do they make it stay there through multiple page requests? – Peter Bailey Commented Jul 31, 2009 at 21:19
- how do they position it on the bottom of the page. I didn't realize it doesn't reload when you go to another page? – mrblah Commented Jul 31, 2009 at 21:29
- It doesn't, for the most part. They use ajax trickery for that part of it. – Peter Bailey Commented Jul 31, 2009 at 21:33
4 Answers
Reset to default 8You can achieve the effect with CSS.
Here's a basic example. No, it doesn't require cross-browser ninja skillz. =)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>
The best is to install Firebug and see how they did it. When I see interesting things on the web, Firebug is the best way to analyze it's HTML structure, attached CSS and you can even directly modify the CSS/HTML structure to see how it changes. Everything you see on a website can be simply read. Remember, the source (HTML, CSS, JavaScript) gets delivered with it :)
That solution doesn't work well for pages that have content extending beyond the bottom of the browser window.
Try something like this instead:
<div style="display: block;
position: fixed;
text-align: center;
z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>