Fixed that bar at the bottom like Facebook!

Since I’ve started an account on Facebook, I was always fascinated with the bottom fixed application bar. And now I got a chance to hack one for my own and share it, with you guys.

Check out the sample I’ve made: http://ryan.rawswift.com/sandbox/fixed-bottom-bar/

I’ve put some comments on the HTML and CSS code. So, I hope you’ll understand it clearly.

Save and modify it, to fit your need!

Hope this helps!

Update!

Bug Fix:
1. Overlapping scrollbar (vertical and horizontal) on IE7.
2. Page wouldn’t scroll down when the mouse pointer is in a white/blank space on IE7.

The sample page are optimized for 960×600 and higher resolutions. Tested on FF3, IE6, IE7, and IE8.

Download: http://ryan.rawswift.com/sandbox/fixed-bottom-bar/fixed-bar-0.2.tgz

UPDATE – Dec. 15, 2009

Thanks guys! For all the comments and suggestions. Sorry if I couldn’t reply to each and every comments below. Been busy for the past couple of months.

Anyway, I’ve just recently created a new project called jixedbar. It’s a jQuery plugin and has the same effect as seen in the above demo but with some added features like mouse hover effect, rounded corners, text tooltip, and customizable style (partly). It is still under development and currently in beta stage.

You can download the beta version at http://code.google.com/p/jixedbar/downloads/list.

Please try it and send me your comments or suggestions.

*** Compatible in IE6, IE7, IE8, Firefox, and Chrome. (Haven’t yet tested on a Safari browser)

Demo page: http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/

UPDATE – June 24, 2010

Here’s the latest update:

Demo page: http://ryan.rawswift.com/sandbox/jixedbar-0.0.3/demo/

*** Development version 0.0.3

Cheers!

Donation

Support the jixedbar project by donating any amount through PayPal or by simply linking back to jixedbar‘s page over Google Code.

65 thoughts on “Fixed that bar at the bottom like Facebook!”

I haven’t tried it on my site yet, but the demos are great.

For Hussain, ramzi, and anyone else who posted comments about how Facebook’s bar doesn’t change when pages change, Facebook uses Javascript to change most of the content on their site, meaning the whole page doesn’t change or refresh, only the content section. So, if you want your bar to stay fixed even between pages, you need to load all your page content using AJAX.

Bravo Great work!!
but it seems not working with IE6 is it the case or i m missing something???
Dex

Pingback: Bookmarks for March 5th from 16:57 to 16:57 | Buddy's Blog

anyone please willing to spend 2 words to help us newbies on adding this into our webpages?

really appreciated.

thank you.

thanx, this is very cute nav bar.

Pingback: Einfacher Sticky Footer - XHTMLforum

I strongly recommend you add stop() to the fadein/out effect.

if (defaults.hoverOpaque) {
$(this).fadeTo(defaults.hoverOpaqueEffect['leave']['speed'], defaults.hoverOpaqueEffect['leave']['opacity']);
$(this).bind(“mouseenter”, function(e){
$(this).stop().fadeTo(defaults.hoverOpaqueEffect['enter']['speed'], defaults.hoverOpaqueEffect['enter']['opacity']);
});
$(this).bind(“mouseleave”, function(e){
$(this).stop().fadeTo(defaults.hoverOpaqueEffect['leave']['speed'], defaults.hoverOpaqueEffect['leave']['opacity']);
});
} if (defaults.hoverOpaque) {
$(this).fadeTo(defaults.hoverOpaqueEffect['leave']['speed'], defaults.hoverOpaqueEffect['leave']['opacity']);
$(this).bind(“mouseenter”, function(e){
$(this).stop().fadeTo(defaults.hoverOpaqueEffect['enter']['speed'], defaults.hoverOpaqueEffect['enter']['opacity']);
});
$(this).bind(“mouseleave”, function(e){
$(this).stop().fadeTo(defaults.hoverOpaqueEffect['leave']['speed'], defaults.hoverOpaqueEffect['leave']['opacity']);
});
}