Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch

27May/1037

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.


//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"); 
};

Filed under: Apple, iPod, Javascript, jQuery, Web Leave a comment

Pingback: Tweets that mention Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch | Lazycoder -- Topsy.com
Pingback: Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad … | Yoobz.com
Pingback: Dew Drop – May 28, 2010 | Alvin Ashcraft's Morning Dew
Pingback: www.Richard-Weaving.com » Research and Markets: Egypt Telecom Country Profile – 2010 – At the End of 2009, Egypt Had 10.31 Million Fixed …
Pingback: Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad … » KHMER855.COM
Pingback: How to add a watermark to a foto or picture » Blog Archive » Absolute Vs Relative positioning in CSS
http://fixedrateisa.org Fixed Rate ISA

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.
Yumiko

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.
anon

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.
- RLN
  
  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!
- http://www.precis-project.com Tiffany
  
  The times is is not abused are the times you don’t even realize it’s being used.
- chris
  
  Bear in mind that client is usually more to blame for fixed elements than the “narrow minded web designer”
http://www.lazycoder.com Scott

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?
Peter

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!
Pingback: Diseño web para iPad, Consideraciones en el CSS « Jon Garza
http://www.jersey-usa.com/sitemap.html NHL Jerseys

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/
- SpamSpotter
  
  blatant seo spam!
Big Brother

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.
- http://twitter.com/oscargodson Oscar Godson
  
  Actually, they are following web standards. Maybe if you knew how the iPhone’s DOM was configured you’d know instead of going off into a rant. If they did position:fixed on their iphone the way people are guessing it to work that would NOT be a fixed position.
Pingback: Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch | Lazycoder | IPhone
http://www.arrannorth.co.uk Arran North

thanks a lot my friend! A quick google and I found this… also gained another subscriber!

appreciated a lot
Alessandro Santos

I want to kwow if is the ‘$’ a function like above?

$ = function (elementId) {
return document.getElementById(elementId);
}

And if do I have to use the ‘#’ in element id?
- Alessandro Santos
  
  *below
  - laslo
    
    $(“#’+elementId) this selector takes from CSS
http://www.monclerstoreonsale.com/ moncler

Bear in mind that client is usually more to blame for fixed elements than the “narrow minded web designer”
yesIsaid

Hi there

I’m not that fluent in javascript/jquery stuff.

If I put this code in a tag in the header of a page, will it work?

Thanks for your help.
- yesIsaid
  
  Uh, that is, pretending the parentheses are tag brackets:
  
  “If I put this code in a
  (style type=”text/javascript”)(/style)
  tag in the header of a page, will it work?”
Jessie

How do you implement this? I tried putting it in a js file, but that didn’t work for me – where do you paste this code?
- Caleb
  
  Jessie,
  Just put the script at the bottom of your code, before your closing tag.
Mike

How would I code this if my #footer is defined in an external style sheet?
James

I put the following before my closing body tag and it messes up the page on my iphone. Am I doing something wrong?

//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”);
};

Thanks
http://twitter.com/djphilism phillip taare

thanks was kind of surprised to see my fixed image background and footer react differently in an ipad upon testing a new site found this work around just in time
James

To test this out I changed my CSS to “position” “static” without javascript, but it didnt look right in an ipad. Is there something else I need to do aswell? Thanks
Matth

Super helpful. Worked right out of the box and fixed my nagging iPad issue.

For those of you who can’t get it working, Lazycoder is (being Lazy?) assuming you know how to use JQuery. If you don’t, here’s a spell out for you lazy bastards who can’t be bothered to learn JQ. (just kidding.)

Put it in your header. Change #floating-bar-container to the name of your own fixed div.

———

jQuery(document).ready(function($) {
if(navigator.platform == ‘iPad’ || navigator.platform == ‘iPhone’ || navigator.platform == ‘iPod’)
{
$(“#floating-bar-container”).css(“position”, “static”);
};
});
Matth

Super helpful. Worked right out of the box and fixed my nagging iPad issue.

For those of you who can’t get it working, Lazycoder is (being Lazy?) assuming you know how to use JQuery. If you don’t, here’s a spell out for you lazy bastards who can’t be bothered to learn JQ. (just kidding.)

Put it in your header. Change #floating-bar-container to the name of your own fixed div.

———

jQuery(document).ready(function($) {
if(navigator.platform == ‘iPad’ || navigator.platform == ‘iPhone’ || navigator.platform == ‘iPod’)
{
$(“#floating-bar-container”).css(“position”, “static”);
};
});
- Adam
  
  On behalf of all lazy bastards out there, I thank you.
Privacy

Great fix! Saved me hours. I owe you a beer.
gdanger

Hi
This works great – is it the same fix for android devices?
Lubenivanchev

i have a div inside a div…and this lazy-ass code doesnt work!! it generally doesnt seem to work at all wherever i shove my divs! any other bright ideas?
- Matth
  
  Try changing #floating-bar-container in the code above to the ID of your outer container.
  
  So if your DIV ID=”fork-hat”, the line would look like this:
  
  $(“#fork-hat”).css(“position”, “static”);
- Matth
  
  Try changing #floating-bar-container in the code above to the ID of your outer container.
  
  So if your DIV ID=”fork-hat”, the line would look like this:
  
  $(“#fork-hat”).css(“position”, “static”);
  - Lubenivanchev
    
    thanks but no..neither outer no inner works…?
Hello

Im doing exactly as Matth suggested however its still not working and my footer is still in the middle of the page on iphone where there is a lot of content and the user needs to scroll down the page… Please help!

:-/
Hello

Just in case this helps, my css loaded from an external file:

#footer{ height:30px;Position:fixed; left:0; bottom:0;width:100%; z-index:3; font-size:10px; background-color:#000000;}

and the jquery…

jQuery(document).ready(function($) {if(navigator.platform == ‘iPad’ || navigator.platform == ‘iPhone’ || navigator.platform == ‘iPod’){$(“#footer”).css(“position”, “static”);};});
Greg Adams

position:fixed seems to be “fixed” in iOS5.. Yet there will still be a lot of iOS3 or iOS4 users the next 2 years or so…
But I am very excited to be able to build webapps without a lot of js or jQuery….
btw. I just get the browser and OS etc per script so my tag is displayed as or

this way I can just use

.MYCLASS {
position:fixed;
}

.iphone .MYCLASS {
position:static;
}
This extends for ALL browsers and OS.

….
AND NOW FOR SOME OFF TOPIC
This is very useful if you are using a lot of 3d-transformations which do not work on windows. (that’s what I am doing)

so here I would also use something like

.MYCLASS { -webkit-transform: skew(0deg, -5deg);}
.mac .MYCLASS { -webkit-transform: perspective(290px) rotateY(30deg) rotateX(5deg);}
this way we are able to create really nice fallbacks for ALL browsers…
I hope this is useful for any of you guys..

OH AND SORRY FOR THE OFF TOPIC

Herding Code 82: Cory Foy and Will Green Compare .NET and Ruby Development » « Herding Code 81: Simplicity, balance, and focus in teaching software development

Subscribe to Blog via Email

.NET HTTP Abstractions group

Subscribe to .NET HTTP Abstractions

Email:

Visit this group

Lazycoder

Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch

Ad

Subscribe to Blog via Email

.NET HTTP Abstractions group

Tags

O’Reilly Blogger Review Program

Books I’ve worked on

Contributors

Links

Herding Code Podcast

Lazycoder

Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch

Share this:

Ad

Subscribe to Blog via Email

.NET HTTP Abstractions group

Tags

O’Reilly Blogger Review Program

Books I’ve worked on

Contributors

Links

Herding Code Podcast