Is there an implementation in javascript/css3 that works in the webkit browser?
Sencha Touch has this feature and it works in Webkit. http://www.sencha.com/
But I guess it might be overkill to use that framework just for that single feature...
Related
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 need to make our ExtJs powered web application work in mobile Safari on the iPad.
Most things are working, but the "zoom" event on the ipad messes up the layouts, I think I just need to fire a resize on the ExtJS viewport but I don't know how to catch the zoom on the ipad in safari, is it even possible?
Note:
I know that ExtJs is not recommended for tablet PC's, and at some point in the future I'm hoping to look into building an alternative UI based around Secha Touch or similar, but for now I need to have it functional. You know what it's like :)
I have been dealing with a similar situation while using EXT-GWT. I have not had much luck, but see if this post helps you: http://adactio.com/journal/4470/
I was wondering if html5 is supporting touch functionality on a mobile device native? So we don't have to make an native app for iOS/Android/WP7 but can make an html5 page which loads in the mobile browser.
EDIT
I mean the JavaScript support for touch native in the browser so you can do you own thing with the touch in html5.
Depends on the type of touch event. For your standard browser click/mouse events these are emulated by the browser. As mentioned by Halst, just make your clickable elements big enough to work in a mobile environment.
If you want to use multitouch/gestures, it gets a little more interesting.
Webkit provides touchstart, touchmove, touchend, touchcancel. For single touch events support should be the same in both IOS Safari and Android Webkit. You could roll your own or use a library like jqTouch.
You can read more on how IOS Safari handles touch events. Events for Android don't seem to be as well documented, but you can read more on quirksmode touch support.
Just make liks and buttons big enough, and that's it.
Somewhat.
It's possible to write a webpage that looks almost as a native app for iPad (including multi-touch) but I had to give up with using "high level" events and had to handle instead the touches array explicitly to get a reasonable zoom/pan. The results are IMO quite good (people I've shown that vector graphics editor toy thought it was a native app).
For Android however things are a little trickier because on my Nexus one apparently there is no way to get anything close to full-screen (and for a phone losing the address bar space means losing a LOT of space) and also multitouch is disabled in the default browser :-(
Both problems (fullscreen and multitouch) are however solved for example in Opera and this is in my opinion sad because (may be) this means they don't WANT good web apps on the phone...
So technically it's possible to write a single html5/js program that runs in both desktop and phone, but this doesn't of course mean that the best UI for a desktop app is also the best for a phone.
I have made a multitouch surface ad it is pretty awesome. However, I am wondering if there is any desktop browser that supports multitouch as input and then exposes it either via an API or already smoothscrolls in a fashion similar to the iPhone.
Firefox 4/5 is the best option.
It also adds elastic scrolling to anything with a scrollbar as long as you use touch input.
Very cool!
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