CODEWITHSUNDEEP
javascriptmobilewebkit
user463112
user463112

Reputation:

Fixed Position Toolbar iOS Web Application

I'm developing an HTML5 Web App and am in dire need of a javascript replacement for the css 'position:fixed' for < 5 iOS devices.

I stumbled upon an article from Google explaining their approach for their GMail mobile web app here: http://code.google.com/mobile/articles/webapp_fixed_ui.html

Like many similar javascript libraries, this supposedly, utilizes touch events and webkit transforms to move a div within a container giving the illusion of native scrolling and leaving room for fixed (actually absolute) toolbars.

I have attempted to implement this javascript class with little to no success...

Current, I am stuck with this error:

"TypeError: 'undefined' is not an object (evaluating 'this.element.style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)'')"

I through in a console.log to make sure that at this point, 'this.element' is in fact, an element and it is. I am passing the scroller div through correctly.

I have been testing on the iOS Simulator as well as the Mac OS X Safari and have also checked GMail's mobile site on both to make sure they work properly as well - they do (even though I can't guarantee this is indeed, the same methods they use).

Am I missing something obvious? Something subtle? Any clues would be appreciated.

Upvotes: 1

Views: 1316

Answers (4)

nelsonic
nelsonic

Reputation: 33154

JUery Mobile goes a long way to "solving" this problem.

But forces your users/visitors to load 414kb of CSS+JS!

For many people on slow 3G/Edge Connections your page/app will take 10sec+ to load. :-(

Try this in your CSS:

body { -webkit-overflow-scrolling: auto; }

Read more at: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

Upvotes: 0

hallodom
hallodom

Reputation: 6549

JQmobi does a great job: http://jqmobi.com/testdrive/

Upvotes: 0

Scott Sword
Scott Sword

Reputation: 4718

jQuery Mobile doesn't support true fixed headers/footers; they disappear when you scroll and reappear when you are finished scrolling.

Upvotes: 1

gf3
gf3

Reputation: 480

jQuery Mobile not only provides a set of beautiful and cross-browser widgets, but it also provides a mechanism for fixed positioned toolbars.

Upvotes: 0

Related Questions