27May/109
Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch
This is just a quick fix if your postion:fixed elements end up in weird places when your site is viewed on the iPhone, iPad, or iPod Touch.
Say you have a div with an id of "#footer" that you want to stay at the bottom of the page. If you set it's position to "fixed" and set the bottom to "0px". When viewed on an iPad, iPhone or iPod Touch, the footer may end up in the middle of your content if you have a long page.
CODE:
-
//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
-
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
-
{
-
$("#footer").css("position", "static");
-
};
Comments (9)
Trackbacks (7)
( subscribe to comments on this post )

June 12th, 2010 - 00:52
This is right a intelligent fix if your postion:rigid elements end up in uncanny places when your place is viewed on the iPhone, iPad, or iPod Stir.
This post is really very appreciable. I think some new things if you add to your post like current affairs will increase It is popularity. your post is very advantageous for me and very good. Thanks a lot.
June 15th, 2010 - 02:47
I have tried that but it is not working. It is possible to set the top bar as well using this method? Fix the top bar always on top.
June 21st, 2010 - 08:33
Position:fixed, after adverts, is singly the most annoying thing on any web site, and anyone who considers using it needs to be drowned.
When I scroll a page, I expect it all to scroll, not for something pointless (to me, usually not the narrow minded web designer) to stay sitting in my face.
position:fixed is only ever abused. It is used to stick social network advertisement things in people’s faces. It is used to keep navigation menus in people’s faces, to try and stop them leaving a site. Bollocks, I’m not standing for crap like this. You want to make sucky media? Go make a TV programme.
Well, I am working on dealing with fixed elements, with privoxy. I am currently going through position: fixed tutorials and making sure no examples of how to do it fails to be caught by my regexp.
The irony is, that whilst I am here, I am also making filters to remove Google’s advertising junk and analytics. So due to the lack of respect web designers have for their guests, I have been driven to remove the annoyances. But their financial livelihood is just as easy to remove as the annoyances, with the added bonus that my privacy is protected.
If the contempt for visitors wasn’t there in the first place, the line of finance wouldn’t be threatened.
August 10th, 2010 - 08:26
Although I totally agree fixed positioning should be used sparingly (and sometimes overused) It has it’s place on web design. And I’m a 100% sure you are not a designer, you are a coder!
June 23rd, 2010 - 09:57
I almost understood most of that anon.
So while position:fixed is abused in a lot of way, it’s just a tool. It’s an element. Consider how well it’s used at cnet. http://www.cnet.com/ The bar at the bottom doesn’t cover up any content, provides some value, and looks great.
Perhaps you’d be better off using Lynx?
July 30th, 2010 - 19:26
The Dos and Mistaken Ideas of totes bags
August 8th, 2010 - 12:21
Anon is a narrow-minded idiot.
I’m customized a client web app to work with all their shiny new ipads, and it requires a very long list of items that the user selects from.
Having a fixed-position “continue” button and a fixed-position index saves them from having to scroll miles and miles to the top or bottom of the page to click the continue button, or to find the section they’re looking for. Without this, it could take dozens of flicks to get to either end of the list. No, it can’t be paginated, due to the nature of the data.
What “anon” aspires to do is make applications like this more difficult to use from a user experience point of view.
Stick to your day job, dorkface.
I for one, applaud you for providing this work-around. Thanks, lazycoder!
August 23rd, 2010 - 00:17
If I speak in the Cheap Authentic NFL Jerseys tongues of men and of angels, but have not love, I am only a resounding gong or a clanging cymbal. If I have the gift of prophecy and can fathom all mysteries and all Official NFL Jerseys knowledge, and if I have a faith that can move mountains, but have not love, I am nothing. If I give all I possess to the poor and surrender my USA Jerseys Shop body to the flames,but have not love, I gain nothing.Love is patient, NFL Jerseys love is kind. It does not envy, it does not boast, it is not proud. It is not rude, it is not self-seeking, it is not easily angered, it NHL Jerseys keeps no record of wrongs. Love does not delight in evil but rejoices with the truth. It always protects, always trusts, always MLB Jerseys hopes, always perseveres.Love never NHL Hockey Jerseys fails. But where there are prophecies, they will cease; where there are tongues, they will be stilled; where there is knowledge, it will pass away. For we know in part and we prophesy in MLB Baseball Jerseys part, but when perfection comes, the imperfect disappea. When I was a child, I talked like a child, I thought like a child, I reasoned like a child. When I became NBA Basketball Jerseys man, I put childish ways behind me. Now we see but a poor reflection as in a mirror; then we shall see face to face. Now I know in part; then I shall know fully, even as I am fully known.And now these three remain: faith, hope and NFL Football Jerseys love. But the greatest of these is love. http://www.jersey-usa.com/
September 3rd, 2010 - 18:51
Web standards were created for a reason. Browsers need to render a page the way the designers intended it to be rendered.
Anon… If you don’t like Position:Fixed, send a letter to the W3C. But don’t try to excuse Apple’s decision to break everybody else’s code. They could have handled this better. Under no circumstances should an element that is supposed to be fixed to the bottom of the screen instead float in the middle of the page, obscuring content in the process.
Position:Fixed has been in the official standard since 1998. IE6 didn’t support it, which is just one of many reasons that I gleefully relish in IE6′s demise.