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
This should get you started:
HTML:
Javascript:
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:
EDIT2: Now I see what you're asking for. Easiest way is this:
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.
ontouchstart
,ontouchmove
andontouchend
are managed the same asonclick
,onmousemove
and so.You can apply the listeners in a
<script>
tag or directly in thehtml
element.Using JavaScript only
Using HTML tag and callbacks
1) Declare your Javascript callbacks to swap a css class for any state
2) Put the callbacks into the anchor tag (I suggest to use
DIV
instead ofA
)Edit 1: to prevent hilight freezing during scrolling
Try to add the ontouchmove handler
Then declare the handler function that swap the css class
Hope this helps! Ciao.