positioning my navbar at the bottom of the viewport (ala facebook)

[elduderino]

Hi,

I've been working on some javsscript at work to keep a menu centered in a page no matter what the screen-res is...it's hard to explain but css is not viable in this case.

I've been looking at the newish chat bar at the bottom facebook pages tonight and am thinking it does a similar thing using javascript to look at the screen height and calculate the position of the chat bar.

Do you think they're using javascript to do this and if so how do they get it adjusting it's size real time....my code for my navbar doesn't do that you re-size and it jumps afer you've finsihed re-sizing....do i need a timeout or something

[JimmyP]

They're probably using a CSS technique.

Could you go into a little more detail on this "chat bar"?

I don't have facebook (GASP!) so I cannot see what ur talking about...

[bluestartech]

yes, CSS is used for this type of display and not javascript, use absolute positioning

[elduderino]

Ah yes sorry, being dense....i've covered this ground before aswell!

http://limpid.nl/lab/css/fixed/footer

[Taler]

Can this be done in javascript? You can't dynamically change the footer size if you use css. What's the javascript for the same functionality?

[elduderino]

Yeah you could do it with javascript although it would be kinda pointless when the css solutuion is there. In javascript you would be using some code like this (for height though) to detect how big the viewport was:
[javascript]
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth;
}[/javascript]

[Pepejeria]

I've been working on some javsscript at work to keep a menu centered in a page no matter what the screen-res is...it's hard to explain but css is not viable in this case.

<div style="position:fixed; border:1px solid orange; left:50%; top:50%;">centered</div>

bottom aligned no matter what height the page has

<div style="position:fixed; border:1px solid orange; left:50%; bottom:0;">centered at the bottom</div>

[Taler]

I thought that position:fixed does not work in IE?

[Pepejeria]

It works in IE 7+