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.

Eduardo says:

February 18, 2009 at 5:48 pm

I kinda like your example, but in IE7 I see a couple of extra scrollbars (both horizontal and vertical), how come?

Ryan says:

February 19, 2009 at 8:12 am

Fixed!

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

Thanks!

Samir says:

March 7, 2009 at 3:55 pm

So how do you get little windows to pop up in those corresponding menu positions when they are clicked similar to facebook?
Is there an API that can be used to achieve this effect?
Great script btw, i am thinking of incorporating it in http://www.theillbeat.com
Thanks.

Hussain says:

March 11, 2009 at 12:03 pm

the bar is a div, which means with page refresh the state is lost.

turkhacking says:

March 17, 2009 at 12:08 am

Thanks my friend =) The sample very good

Frank says:

March 22, 2009 at 9:59 pm

Very nice little sample, however it seems to overlap the page scroll bars (when they are visible due to content length), the live version on this page itself (in firefox 3) as you reduce the width of the browser pushes the vertical scroll bar off the page completely and the horizontal scroll bar doesn’t appear.

ramzi says:

March 31, 2009 at 2:07 am

Hi Very nice work , but have you an idea how to make this bar without reload like facebook when you click to a link the bar will not dispear
thanks

April 24, 2009 at 5:51 pm

Hello dear i was finding this stuff but it contains a prob here at my pc when i open your sample in Microsoft internet explorer the there is no right scroll bar to scroll the page mean the page appear as fix i can see the bar but cant navigate down please guide me how to fix this issue.
Regards.
Hussain

mr.zer0 says:

June 15, 2009 at 11:53 pm

hey, thx, nice app
but one question, where do i have to put this folder into?

zer0

PS: sry if you didnt understand me, i’m swiss… ;D

Gafoloji says:

July 3, 2009 at 11:51 am

please wordpress plugin bottom bar

james moralde says:

July 18, 2009 at 2:29 pm

Been looking for this for a long time. Was about to buy a commercial one which I believe is not as flexible as this one.

Thanks

July 18, 2009 at 2:45 pm

Darn, it doesn’t work the way its expected to be on my wordpress blog.

CC says:

August 8, 2009 at 9:58 pm

Can youb have the submenus popup like in facebook? Thanks!

Jules Verne says:

August 12, 2009 at 6:07 pm

Thanks for the great share.. all people are looking….

DanJames says:

August 14, 2009 at 1:49 am

Hi, I copied the html code from the page and pasted it in to MS Frontpage, and started deleting the writing on there and it worked. Lately I’ve tried again and the writing is there but the bar is not and it just shows the list of links. Is it possible for someone to send me the html just for the bar so I can copy and paste it or email me even. Thanks alot, Dan.

Govind says:

August 20, 2009 at 5:09 pm

good …but it will not work in IE6

Joel Perez says:

August 24, 2009 at 10:31 pm

Hey, it’s exactly I was looking for… that fixed bar at bottom.

Thanks!!

Greetings

Joel #

nour says:

August 25, 2009 at 6:33 pm

hi…
i’ve downloaded the .tgz file but when i extracted it , it seems empty
please can anyone reupload it.. i really need it as soon as possible.
thanx

divman says:

August 25, 2009 at 7:54 pm

Hi
I saw similar bar at bottom of a blog but in that bar. But there was an arrow button kind of facility on that bar at the right side of the bar, when you click on that arrow bar gets expanded or collapsed a little. When expanded mode it shows all the links or icons. When collapsed only arrow is shown and bar height gets halved (thinner bar).

I don’t remember that site and searching hard to find it.

If you have any idea how to create this hide and seek functionality also in the bottom bar please let me know.

Best Regards
divman

tuzcuoğlu nakliyat says:

August 26, 2009 at 11:23 pm

Nick says:

August 28, 2009 at 7:30 am

At first it didn’t work on my site. Then I changed the “position: absolute” to fixed and it worked beautifully.

Thanks for the file!

Nick

Raj Parmar says:

September 2, 2009 at 12:19 pm

There is a problem with this in that if you resize your window so that you reduce the width to less than the width of the bar, your vertical scrollbar disappears.
This happens with both Firefox v3.5 and IE8. The Facebook bar doesn’t cause this. Nice work however, obviously just needs a small tweak.

paul says:

September 8, 2009 at 2:38 am

how to put it in a wordpress theme?

can u tell sir?

meramez says:

September 11, 2009 at 3:13 am

Thanks. a simple piece of prototype.
For ambitious developers,”Try to do the rest of the work yourself ;)”

Taza says:

September 26, 2009 at 6:45 am

I finally got this running. couple changes
For nav_menu_wrapper,
1.Include position:fixed so that the position always floats.
2. add left:100px or whatever that suits you (for IE7)

Also comment the body,html if you observe scroll bar missing.Good luck!

jhon says:

October 17, 2009 at 5:55 am

Thank you so much for this, it works perfectly, i just needed to turn
position to fixed in #nav_menu_wrapper
for people who see that the bar is not in the bottom, just put position:fixed instead of position:absolute; in the first #nav_menu_wrapper.

But it works perfectly thank you.

dyurchuk says:

October 22, 2009 at 4:35 pm

Very cool, thanks for sharing. I’ve been wanting to do a similar, basic variation myself for my portfolio.

I did notice that the scroll wheel is disabled on your site and in your example. I’m just going the through the code now, but didn’t notice it addressed. Does the scroll wheel need to be disabled for this code to work?

Thx,
Dave

October 22, 2009 at 4:39 pm

Excuse me, I meant the scroll wheel “button” is disabled. Not a huge deal but I do use the auto-scroll function occasionally. I guess it’s a PC thing.

Massimiliano says:

October 25, 2009 at 5:52 pm

Hello I put your bottom bar in my site http://www.cartemagictorino.com. Initially it seems to work fine but after few test I noticed that the bar overlap the horizontal scroll bar. So unfortunately is unusable. Is it possibile to compute dinamically the position in order to place the bottom bar on the top of the horizzontal scroll bar ?
Thank you!

Teddy says:

November 12, 2009 at 1:18 am

just use

position:fixed;
bottom:0px;

DarkZ says:

November 13, 2009 at 9:19 am

sweet as, thanks dude!

Ozl says:

November 21, 2009 at 10:29 am

Hi, is there a way i can modify this to use on blogger?
Thanks!

Rishi says:

November 21, 2009 at 10:32 pm

Thanks for this contribution!

manit says:

November 25, 2009 at 1:51 am

works great, thanks!

Narazana says:

November 25, 2009 at 3:17 pm

Hi,

Thanks Ryan for the sample. I’m still pulling my hair out trying to figure out how make it with drop down menu (like the Application in Facebook menu). The drop down CSS menu always drop-down, I can’t get it to drop-upwards. Is there anyway you can show us some light?

Please, any suggestion.

Gocmenim says:

November 25, 2009 at 9:12 pm

Thanks for this contribution

issaconan says:

December 7, 2009 at 12:35 am

hi,
it’s good work, but my probleme is the scroolbar not appear in all the navigateur.!!
wath’s i can do?
tnx

CRxTR says:

December 10, 2009 at 7:18 pm

Hello. Thank you for the code! I’ve been looking for this source and I want to use it on my website. Can I use this for free?

Rico Zuñiga says:

December 16, 2009 at 10:38 am

Padi maurag ka talaga! Dakulaon na tabang ining tutorial mo salamat! Sikaton na baga ining post mo

December 17, 2009 at 2:15 am

Thanks padi! Pero mas maurag ka man giraray, ta su code mo na-isabay sa Flex 3 Cookbook. Yan ang maurag na achievement! Props to you bro! Keep up the good work.

Milli says:

December 20, 2009 at 8:30 am

I’m new to HTML and CSS, I can’t find where to edit the links, for example, if I want to add a google link, how would I do it?

Torn says:

December 28, 2009 at 6:42 pm

Just what i want. thanks alot

Arya Sumant says:

January 1, 2010 at 1:12 am

can you please make it into a plugin which can be used in wordpress or a step by Step guide explaining how we can get it to work in Wordpress

Ole Marius Løset says:

January 15, 2010 at 3:38 pm

This has some usability issues. Page Up / Page Down buttons as well as the spacebar buttons doesnt work..

Kristofo says:

January 21, 2010 at 6:56 pm

How does it reacte to youtube videos ? does the bar stay on top of the videos ?

BgSohbet says:

January 26, 2010 at 8:35 am

Thanks For fixed

Ole Marius says:

January 28, 2010 at 7:11 pm

Only one thing that prevents me from using this solution;

When loading a page with this bar, there’s some accessibility issues. You cant scroll down using spacebar, page down/up or by using the mouse wheel. This is because these keys are relative to the viewport that normally has the scroll bar.

However, once you click inside the div that actually has the scroll bar, it works. Any way to add focus to the scrolling div trough jQuery?

Chris Abel says:

February 2, 2010 at 1:53 am

Thanks for the great fixed footer. it was just what i was looking for. I like it, but the only thing is when I put it on my page, anything that had a css property of absolute becomes fixed on the page. This ruins my template. When I remove the footer, everything becomes absolute again.

Michael J says:

February 3, 2010 at 1:30 am

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.

Dex says:

February 15, 2010 at 8:30 pm

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

Fixed that bar at the bottom like Facebook!

59 Responses to “Fixed that bar at the bottom like Facebook!”

Trackbacks/Pingbacks

Leave a Reply

Pages

Categories

Archives