Fixed that bar at the bottom like Facebook! « Bicolano Express by Ryan Yonzon

Fixed that bar at the bottom like Facebook!

February 15th, 2009

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.

Share this Post

Tags: CSS, facebook, fixed-bar, How-To, XHTML

This entry was posted on Sunday, February 15th, 2009 at 10:56 am and is filed under CSS, HTML, How-To. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

pervert says:

March 25, 2010 at 10:14 pm

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

really appreciated.

thank you.

zoel says:

March 29, 2010 at 12:05 am

thanx, this is very cute nav bar.

David says:

May 17, 2010 at 4:53 am

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']);
});
}