Bottom toolbar like Facebook

Hi,

Is it possible to create a toolbar in php just like the one facebook has that moves on the screen as you scroll?

Thanks.

 

This is not done with PHP. It's done with CSS and javascript

 

use wibiya.com
its great. im also using it my site

 

Here's the code I use for a very simple and functional fixed footer... No javascript required.

HTML part...

<div id="fixed-footer">
    <div id="footer-inner">
        <ul class="footer-navigation">
            <li><a href="">Footer Links</a></li>
         </ul>
    </div>
</div>

Code (markup):

CSS PART:

#fixed-footer {
    background:#eee;
    border-top:1px solid #ccc;
    position:absolute;
    bottom:0;
    width:100%;
    height:32px;
}

 /* for moz/opera and others*/
html>body #fixed-footer{position:fixed}

#footer-inner {
    border-top:1px solid #fff;
    background:#eee;
    height: 31px;
}

#content {
    margin-bottom: 31px;
}

ul.footer-navigation,
ul.footer-navigation * { margin:0;padding:0;}
ul.footer-navigation {
    position:relative;
    font-size:1.1em;
    max-width:100%;
    height:2.5em;
}
ul.footer-navigation li {
    border-left:1px solid #fff;
    border-right:1px solid #ccc;
    cursor:pointer;
    float:left;
    text-align:center;
    list-style-type:none;
    font-weight:normal;
    padding-left:6px;
}
ul.footer-navigation li a {
    color:#333;
    text-decoration:none;
    display:block;
    float:left;
    padding:0 1em 0 24px;
    height:2.4em;
    line-height:2.5em;
}
ul.footer-navigation li:hover a,
ul.footer-navigation li a:hover,
ul.footer-navigation li a.selected,
ul.footer-navigation li a:focus {color:#333; background:#fff;}

Code (markup):

You can really do whatever you want but this should get you going in the right direction.

 

can you it in action?

 

Thanks jestep, it works great in Safari, Opera, Firefox and Chrome etc however in IE8 the toolbar just stays in the middle of the page.

 

It's working fine in mine IE7 and IE8. Let me see if I missed some CSS somewhere.

I did forget this for IE6 compatibility.

#footer-inner {
		margin-right:17px;
}

Code (markup):

 

I've added the extra for IE6, and it still seems to have the same problem.



I've edited the content off the page with paint, but you can still see the grey bar near enough in the middle of the browser.