CODEWITHSUNDEEP
javascriptcssfooter
Cyberomin
Cyberomin

Reputation: 523

Fixed position on a mobile browser for footer

Good day, i have a meta like this

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabale=no, width=device-width, height=device-height" />

Now i can get the height view port with js i want to use it to modify my footer so it stays always at the bottom of the screen using either a fixed positioning. here is the footer css

#footer
{
height:30px;
background-color:#D9D9D9;
background-image:url(../images/footer.png);
background-repeat:repeat-x;
margin-top:20px;
width:100%;
/*bottom:0;
position:fixed;*/
}

how do i modify this footer using JS to get the right thing. Thank you. @cyberomin.

Upvotes: 3

Views: 10628

Answers (4)

WinkSl
WinkSl

Reputation: 26

The position:fixed is available since Android 2.2.

However for other devices like IPhone, you must have a solution that simulates the native scroller : this type of solution is available through the JavaScript toolkit Wink. This toolkit allows to make WebApps easily while remaining simple to use (no need to learn an API). Look at the examples on the Scroller component.

Upvotes: 0

Alex Nolasco
Alex Nolasco

Reputation: 19446

See also Google's solution to this http://code.google.com/mobile/articles/webapp_fixed_ui.html

Upvotes: 1

Daniel
Daniel

Reputation: 5024

If you by mobile browser mean "mobile safari", you're out of luck, it does not support position fixed.

Related answer: Fixed positioning in Mobile Safari

Edit: This project might be helpful for you -> http://cubiq.org/iscroll

Upvotes: 0

Greg
Greg

Reputation: 21899

document.getElementById("footer").style.position = "fixed";

Upvotes: 0

Related Questions