Search jQuery

jQuery Forum

Touch Actions

in jQuery Mobile • 1 year ago

Very excited to read your announcement about the JQuery Mobile UI. Is there support in there for touch/swipe actions? I couldn't find any documentation so far.

Replies(14)

fg.todd

Re: Touch Actions

1 year ago

We will be including touch gestures like swipe into the framework but don't have a detailed list we can share at this stage. Cheers, Todd

dalmaer

We have a rich set of gestures in our Mojo SDK on webOS. flicks and holds and swipes and pinches and spreads. Would love to see if we can help in this area when the time comes.... we have the JS code already written for a lot of this :)

grezvany13

Re: Touch Actions

1 year ago

At the moment there's only touch/swipe support for iPod/iPhone/iPad by a plugin (jQTouch).

Personally I would like to see touch/swipe support on Android browsers, although this isn't working since the browser doesn't send/recieve(?) the proper events. And my guess is that other devices/OS's/mobile browsers have the same problem.

So I fear that there won't be any (native) support for touch/swipe on most devices and we'll have to work with a coded workaround like (please note this example is NOT valid):

if(event.keydown) {
var pos = event.position; // store the position on keydown
}
if(event.keyup) {
if(pos && event.position != pos) { // check previous position with current
// act as swipe
} else {
// act as regular click
}
pos = null;
}

knad.jque..

Re: Touch Actions

1 year ago

Android does implement the same touch events as iOS, except for multiple finger support ('guesture' events etc).

So if you are only looking for single finger actions, then the same code will work for both Android and iOS.

Note: I am not sure about the Android version required, I have tested it on 1.6 up.

timo888

Re: Touch Actions

1 year ago

For your consideration...

Look at what happens on the iPad's virtual keyboard when you hold your finger down (i.e. allow it to linger) for about ~500ms on one of the vowel keys, e.g. [a] on the US keyboard: you get a tooltip-like interactive menu from which you can select a variant form of the letter -a- (umlauted -a-, accented -a-, etc). If you lift your finger from the [a] key that little interactive tooltip disappears; you have to slide onto it to use it.

I'm no ninja javascript coder by any means, and I've got this behavior working on the iPad as a little plug-in that also detects swipe direction and velocity. I don't have an Android tablet to test it out on. I'm sure the guru coders at jquery could do a lot if they tried to exploit this aspect of the touch metaphor. This finger-linger behavior is the touch counterpart to mouse 'hover'.

I would like to see this behavior more widely exploited, if only so my own apps won't seem unconventional :-) With this finger-linger behavior you can have both linger (hover) and tap events attached to the same element, e.g.an image-map AREA. You could display a tooltip when the user lingers on the element and execute other behavior when the user actually taps on it. Lingering on an element would mean "just tell me something about this element -- what it is or what it does". You could also use this behavior to create context-menus.

With the tablet form-factor, applications can be and will be richer than phone-form-factor apps; having this linger behavior at your disposal will allow you to create toolbar buttons that invoke more complex behavior, not just simple navigation, buttons whose functionality may not be self-evident but which the application can explain with a tooltip/balloon help.

Regards

Tim Romano

Swarthmore PA

fg.todd

Re: Touch Actions

1 year ago

@Tim - If you post links to demos, I can test the behavior on a few versions of Android and the rest of the devices in our lab and report back. I like the idea of an extended press trigger for some interactions, wonder how easy it will be to make that work in a lot of places.

Cheers,

Todd

timo888

Re: Touch Actions

1 year ago

Todd,

Here's a proof-of-concept I've been working on. It's still rough. The linger is fairly straightforward.

http://www.aimsdata.com/tim/linger/index.HTML

I haven't found very detailed documentation on the touch event model, such as whether it's possible to invoke preventDefault and stopPropagation in touchend, and so it's been a quick-and-dirty reverse-engineering effort using console.log() to see what is happening.

I appreciate your trying it out on Android. Do Android devices have on-board step-through debuggers for javascript, BTW?

Regards

Tim Romano

P.S. added an image-map this A.M (Aug18). Single-finger swipe direction / velocity also working.

fredmay

Re: Touch Actions

1 year ago

Todd, Tim

Been reading your replies with interest. We would be interested in contributing the code to handle swipe actions like this if it has not been done. As we need to get this work done quite soon, we are looking to get some involvement from anyone who wants to help steer such an effort.

We are a few weeks away from announcing the public beta of a product that allows very complex UIs and Apps to be created for desktop and mobile using a completely wywiwyg designer. We are all done with desktop and we were planning to use JQTouch to handle the mobile side of things but we are much keener on JQuery Mobile.

Our app is rather like Sencha ExtJS designer, but does more. We also want to Open Source this designer, which is built on JQuery. I am trying to find JQuery aficionados who might be interested in this and advising on how to contribute. There is quite a lot here that we feel would benefit JQuery. I have had a discussion or two with Richard Worth who has been very helpful and indicated that there could be a lot of interest.

If you, Todd and Tim and anyone else is interested in discussing this further, please email me at fmay@applicationcraft.com.

Thx

austegard

Re: Touch Actions

1 year ago

For web apps to truly take off on iOS/Android, etc, it is imperative that these applications behave as natively as possible. For instance, from our own (minimal) usability testing, when a new user tries our web app prototype on an iPad, the first thing they try to do is pinch and flick.

This presents a challenge for a framework such as jQuery Mobile, which presumably seeks to standardize the UX which might lead to a lowest common denominator approach. Multitouch works well on iOS, less so on Android (no idea about Torch, webOS, etc) - does that mean multitouch should be excluded from a generic touch event framework?

Will it be possible to develop the Mobile framework so that some touch events are recognized on some browsers, and not on others? Personally I favor the kind of coded approach that grezvany13 hints at above, or possibly something more along the lines of Modernizr's approach?

morfunk

Re: Touch Actions

1 year ago

I tend to agree, while jQuery Mobile looks great for backwards-compatible sites, I think targeting Mobile WebKit specifically for Android/iOS apps will provide the best user experience.

fredmay

Re: Touch Actions

1 year ago

Having spoken to Todd Parker, the goal for this seems, quite rightly, to be total platform independence for touch/swipe/gesture. However, there may be some mileage in taking a pragmatic approach and basing JQueryMobile support for this initially on Webkit's support for all 3 options (http://miniapps.co.uk/blog/post/multi-touch-gestures-using-webkit/)

As other browsers update themselves, I would imagine that they will also provide proper Javascript gesture interfaces. So could JQuery simply sit on top of Webkit where applicable and modify behavior (i.e. "do nothing") for those that cannot support gestures. It think it is pretty easy to get x-platform support for all touch and swipe actions on any platforms isn't it?

So - this way a developer who wants to build support for iOS and Android can still do this and accepts that other browsers will not be fully supported until those browsers catch up. I think it is important to allow the developer to decide that he absolutely needs gesture support but accepts that it will not run on every platform until the others catch up.

Hope this makes sense.

Freddy

shmerl

Re: Touch Actions

1 year ago

Upcoming Fennec 2 supports multitouch (alpha 1 is coming soon), but touch events model there is significantly different from WebKit based browsers. I'm curious how jQuery Mobile is planning to support these differences in generic fashion.

timo888