Touch Screen Gestures for iOS Web Applications

Question

I searched all over the internet to find an easy way to add touch gestures to a simple button. Basically, I am trying to find an easy way to get the back button (which you usually see on the taskbar at the top of the iOS device) in order to change CSS classes from the “normal” state to the “click” state when clicked.

Although I am very new to Javascript, I would prefer to use standard DOM methods rather than jQuery (or any other library). Will anyone have the full code and explain how JavaScript code reads the ontouchstart and ontouchend and how can these functions be used to change CSS classes?

Any help would be greatly appreciated!

Tf

Answer 1

ontouchstart , ontouchmove and ontouchend controlled in the same way as onclick , onmousemove , etc.

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

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 the HTML tag and callbacks

1) Declare your Javascript callbacks to replace the 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 callbacks in the anchor tag (I suggest using a DIV instead of A )

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

Edit 1: to prevent hilight from freezing while scrolling

Try adding the ontouchmove handler

 ontouchmove="ontouchmoveCallback( event );" 

Then declare a handler function that changes the css class

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

Hope this helps! Ciao.

Answer 2

This should help you:

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 is worth noting that MobileSafari sometimes does elusive things with touch events and form elements (in particular, input fields). You might be better off using a stylized div than the actual enter button.

EDIT: For what you're trying to do, I think you might be better off serving simple click events, which are usually great for things like button clicks. Tap events more for drag and drop, precise finger tracking, etc. Try the following:

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

EDIT2: Now I see what you are asking. The easiest way:

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

Answer 3

There are several libraries already for jQuery

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

And you can also check out this demo from

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

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

There are several options, but its all brand new.