When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.
As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's browser?
Ideas? Thoughts? Thanks.
In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.
Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit
Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/
I'm not super familiar with iOS web app development, but iScroll looks promising.
This is just a simple CSS style:
.className{
position:fixed;
}
You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.
Here is that script you were talking about to make it work in mobile Safari:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
Related
On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
How is scrolling implemented by PhoneGap? Is scrolling done by JavaScript plug-in like iScroll, is it done by a native scroll view, or in an other way?
The reason I ask, is because I am new to PhoneGap, and the biggest reason for chossing it is if it handles scrolling in a good way.
Since PhoneGap is a wrapper for deployment, not presentation, scrolling is dependent on the chrome from the browser on the platform you deploy to. If a device's native browser scrolling is an issue for you (like it sounds like it is on iOS), it will still be an issue in PhoneGap. Consider using a presentation library, like Sencha Touch, jQMobile or iScroll, to fix the issue on a specific deployment platform.
scrolling in phonegap wont ever come to the level of the native ones..
but iscroll brings it pretty close.
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.
jQuery Mobile doesn't support true fixed headers/footers; they disappear when you scroll and reappear when you are finished scrolling.
jQuery Mobile not only provides a set of beautiful and cross-browser widgets, but it also provides a mechanism for fixed positioned toolbars.
JQmobi does a great job: http://jqmobi.com/testdrive/
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/
I am looking for a simple way to use transitions you typically see in the native iPhone apps or Android native apps (such as the slider effect, ie. the whole page sliding to the left or the right).
I know those transistions between web pages on my web application are doable with the use of frameworks such as jQuery Mobile, Wink, iUi etc.
Also my application requires a fixed footer and a fixed header with scrollable content. I tried with jQuery Mobile but though the scrolling effect of the content is good, the rendering of the fixed header and footers are not that good.
So I use iScroll 4 instead but I cant use jQuery mobile to do only transistions as the jQuery mobile plays with the DOM etc. which causes some problems within the placement of the divs
Im giving a try with iUI but then again though it seems less 'wide' than jQ mobile, it still is a whole framework for web apps. But Im currently only looking for transitions..
Is there a way to achieve those "full web page" transisitons whitout the use of a javascript framework?
Also those framework such as iUI put all the pages inside one only( jQuery Mobile does not which is great ) separating them inside several divs.. this might be problematic with iScroll i guess?
The finest would be to be able to do those transitions between separate html pages, but I don't know if it's even possible ( I mean whitout the use of AJAX world techniques)
I only target modern devices using webkit (Android, iDevices..)
Thanks a lot for your help
You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.
forget iScroll for mobile applications. It works well but not for all webkit devices and you will have issues with a good chunk of Android devices. If you want something like a native app you need to go for a container model. A container model is basically having a header and a footer and a dynamic container in the middle. This is used by mobile sites like Twitter and Flikr. The dynamic container you can load either with an iframe or ajax (but personally I would stay away from iframes and mobile anything). Also before using any frameworks out there consider the benefits vs cost (size, future dependency and scalability, overhead parsing the JS... etc) because mobile is not desktop development and many developers seem to forget that fact. I currently work for a major social networking site and we have our own framework with is not a byte more then what we need. We used JQuery in the past but it turned out to be too much bloatwhere for the webkit devices we serve (size + parse time + dependency.. etc) and we ended up killing it.
On the mobile site I'm building, I need the top header to stay fixed positioned.
I am aware of the fixed position solution for Mobile Safari as seen here:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
I tried it and it works well. However, I was wondering if there's a single solution that works for all major smartphone's mobile browsers. Note: I don't need the footer to stay fixed, just the top header. So this should make it easier accommodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.
Thanks!
Important update
As of iOS 5, fixed positioning works fine on mobile. Similarly latest androids support it.
Old answer
I think iScroll is the most actively developed solution, it does support Android
But there are a few things to watch out for:
By enabling this hack you are disabling features people are used to like zoom.
It is adding a lot of complexity to your solution.
For these reasons JQtouch decided not to use it:
Not a problem. It is not currently
supported in jQTouch. Not sure how
familiar you are, but the main problem
here is that mobile Safari does not
support position: fixed. A few people
have worked on implementations of
this, most notably
Cubiq
and
Doctyper.
Both feel wrong to me,
hence why I don't do by default, but
you're free to try to make an
extension which supports it-
Personally when dealing with stuff that needs fixed positioning on an iPhone I prefer to go with static positioning and just autoscroll to the bottom/top when changing the content dynamically.
I was facing the same problem for more than two weeks . And this solution worked for me. Just include
-webkit-backface-visibility: hidden;
in the css of the element along with position:fixed .
It will work fine
Following on from the link that Sam Saffron posted, it seems that a new version of iScroll (version 4) has resolved some of the problems Sam listed.
iScroll-4
In addition to all previous iScroll features, version 4 introduces:
Pinch / Zoom
Pull up/down to refresh
Improved speed and momentum
Snap to element
Customizable scrollbars
I have only looked at the demos on their site, so I can't vouch for it, but it looks good!