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.