iOS Web App touch gestures

Question

I've searched all across the web to find a simple way of adding touch gestures to a simple button. Basically I'm trying to find a simple way of getting the back button (which you usually see on the task-bar at the top of an iOS device) to change CSS classes from 'normal' state to 'pressed' state when pressed.

Although I'm very new to Javascript, I would prefer to use standard DOM methods rather than jQuery (or any other library). Would anyone have some complete code and explain how the JavaScript code reads an ontouchstart and ontouchend event and how these functions could be used to change CSS classes?

Any help would be greatly appreciated!

TC

Solution 1

ontouchstart, ontouchmove and ontouchend are managed the same as onclick, onmousemove and so.

You can apply the listeners in a <script> tag or directly in the html element.

Using JavaScript only

var back = document.getElementById("back-button-id");

back.ontouchstart = function( event ) {
 // using the target property of the event
 // you can reach the hitted html element
 event.target.className = 'css-href-selected-class-name';
}

back.ontouchend = function( event ) {
 event.target.className = 'css-href-normal-class-name';
}

Using HTML tag and callbacks

1) Declare your Javascript callbacks to swap a css class for any state

function onclickCallback( event ) {
 // do something
}

function ontouchstartCallback( event ) {
 event.target.className = 'selected';
}

function ontouchendCallback( event ) {
 event.target.className = 'normal';
}

2) Put the callbacks into the anchor tag (I suggest to use DIV instead of A)

<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>

Edit 1: to prevent hilight freezing during scrolling

Try to add the ontouchmove handler

ontouchmove="ontouchmoveCallback( event );"

Then declare the handler function that swap the css class

function ontouchmoveCallback( event ) {
    event.target.className = 'normal';
}

Hope this helps! Ciao.

Solution 2

This should get you started:

HTML:

 <input type="button" id="thebutton" value="Do Stuff!" />

Javascript:

 var thebutton = document.getElementById("thebutton");

 thebutton.ontouchstart = function(e)
 {
     this.setAttribute('class', 'pressed');

     var touches = e.touches; // array of all touch data

     var target = touches[0].target; // what DOM element was touched
     var pageX = touches[0].pageX; // coords relative to site
     var pageY = touches[0].pageY;
     var clientX = touches[0].clientX; // coords relative to screen
     var clientY = touches[0].clientY;
 };

 thebutton.ontouchmove = function(e)
 {
     var touches = e.touches; // same fields as above
     var changedTouches = e.changedTouches; // only touches which have changed
 };

 thebutton.ontouchend = function(e)
 {
     this.setAttribute('class', '');

     // cleanup, if needed
 };

For more details, see: http://sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

It's worth noting that MobileSafari sometimes does wonky things with touch events and form elements (input boxes in particular). You may find it's better to use a styled div than an actual input button.

EDIT: For what you're trying to do, I think you might be better served with simple click events, which generally work fine for things like button presses. Touch events are more for drag and drop, precise finger tracking etc. Try this:

thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };

EDIT2: Now I see what you're asking for. Easiest way is this:

thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend   = function(e) { this.setAttribute('class', ''); };

Solution 3

There are a couple of libraries already for jQuery

http://plugins.jquery.com/project/multiswipe

And you also can check this demo from

http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/

And you can fork the example and start working with it.

There are some options but everything its quite new.

Comments

[TronCraze]

Hey Luke, thanks for your comment! I've tried your example but I can't seem to get it working, especially the .onclick function - doesn't seem to change the styling of the button :S

[TronCraze]

Thanks, works very well! Just one quick question, if you were to scroll on the page and your finger is accidentally over a div the CSS styling still changes, is there any way to set in the Javascript code a rule that the CSS only changes when you tap and not scroll?

[TronCraze]

Hey lomanf, tried your suggestion but still no luck. I was thinking, is there a way to combine functions, maybe if ontouch and onmove -> don't change css?

[lomanf]

Hi, I wrote an answer on your other question about this issue. The problem is related to the scrolling that freeze the rendering stuff during the dragging phase. In jQTouch they solved the issue by delaying the "pressed" status with a short delay. Could you try with it?

[SuperUberDuper]

how would you implement tap detection?