Search code examples
javascriptjqueryhtmliostouch

Homepage with multitouch login

I'd like to create a homepage based on touch. So, for example, if the user touches the screen with 5 fingers, like in the image (the green circles, see below) it will redirect the user to a specific homepage but if he touches in other pattern(the red circles) it will show an 'Login Failed, Try Again' alert. It doesn't matter where the user touches as long as it is inside the square.

The main idea is to determine the user's finger locations and redirect him to another page, the login idea is just an example.

Is there a way to do this using HTML and JavaScript, because I want it to be an iOS homepage?

example layout

Solution

  • You will need to bind to the touch events for the element you wish the user to touch in. These events are touchstart, touchmove and touchend (well and touchcancel). On the event the co-ordinates of finger positions are given in an array (well actually three - see link at bottom for which array or arrays to access for which events/scenarios). You can then use these co-ordinates to calculate the shape.

    Here is an example for a two fingers using jquery (not essential).

    #JQuery
$('#myID').bind("touchstart", function(event) {
  var finger1PosX = event.originalEvent.targetTouches[0].pageX;
  var finger2PosX = event.originalEvent.targetTouches[1].pageX;
});

    This assumes at least two fingers are pressed, which is a bad assumption.

    Here is a good tutorial/discussion: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

    You might also want to prevent scrolling and other gestures in this div using event.preventDefault.

    Also note support for multi touch events on android differs between versions (I know you were asking about ios).