iPad 2 does not work

Oct 18, 2011 at 9:25 AM

Hello,

I tried your plugin and was very pleased that it worked in Firefox, but I couldn't get it to work on Safari, in particular the iPad 2 and the iPhone 4.

I see the support for touchMove events, but when I apply the plugin to a div that is supposed to be swiped, the whole page is moved in the Safari for iPad, instead of the div. Is there any way I can fix that?

Cheers,

SurfMan

Oct 18, 2011 at 11:27 AM
Edited Oct 18, 2011 at 11:27 AM

To answer my own question: this doesn't work because the touches array is undefined. jQuery wraps the event from Safari in a custom jQuery event and normalises it so it contains the common cross-browser properties (pageX, pageY etc). However, the touches array that is required is *not* included. This array is only available in the original Safari event, which is conveniently included as property "originalEvent".

So, the code where the touches array is accessed should look like this:

var start = useMouseEvents || (e.originalEvent.touches && e.originalEvent.touches.length > 0);

...snip...

startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;

 

Now it works. Feel free to use this as a free bugfix :)

Cheers,

SurfMan

Feb 8, 2012 at 8:05 AM

SurfMan,

Could you please indicate where exactly in the code the snippet above should be placed?

I can see that

startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;

replaces :

startX = e.touches[0].pageX;
startY = e.touches[0].pageY;

but I don't get where you place :

var start = useMouseEvents || (e.originalEvent.touches && e.originalEvent.touches.length > 0);
neither do I get what it really does.
thanks.
Feb 8, 2012 at 8:33 AM
var start = useMouseEvents || (e.originalEvent.touches && e.originalEvent.touches.length > 0);


The line above goes on line 108 (of WipeTouch V1.2.0). It should look similar to this:

// Called when user touches the screen
function onTouchStart(e)
{ var start = useMouseEvents || (e.originalEvent.touches && e.originalEvent.touches.length > 0); if (!isMoving && start)
{

This checks if the e.originalEvent.touches array exists and if the length if the array is > 0. If that is the case (or if the useMouseEvents is true), the onTouchStart function can go ahead.

Reason is that the touches property does not exist in e. e is the jQuery created object that wraps the original event. To get to the touches array, you have to access the original event generated by Safari first, which conveniently is contained in property e.originalEvent.

Hope this helps.

Cheers,

SurfMan

Feb 8, 2012 at 8:39 AM
Edited Feb 8, 2012 at 8:42 AM

That was brilliantly fast, thanks - and also for pointing me to the latest release, I was mistakenly looking under source code rather than downloads, and only had v1.0.3

I have another question for you then ;)   how to I get to the element which triggered the touch, i.e. the elt that is being wiped (at start)  :

ex, where 'kit' is a class attached to a series of <img>

 $('.kit').wipetouch({

  wipeLeft: function() {

   // I need do something with the div or img where  the touch occured (ex. swap it with previous

 // below doesn't work

   var id=$(this).parent().attr('id');

  },

  // ....

 });

Feb 8, 2012 at 9:00 AM
Edited Feb 8, 2012 at 9:02 AM

I haven't used jQuery and WipeTouch for a while, so I had to work this out just now.

I have good news and bad news: the bad news is that this information is not known in the wipeLeft function. The good news is that you can hack your way around it :) here's how:

On line 273 in jquery.wipetouch.js you see the creation of a result object. This object is passed to all the wipe* functions. You have to add an extra property in that result object. It looks something like this:

var result = {
     speed: parseInt(s),
     x: ax,
     y: ay,
     source: e.target
};

Remember that e is the jQuery event. You can get all sorts of information out of it. (http://api.jquery.com/category/events/event-object/), which you can add to the result object. You can be brutal and put the entire event in the result object :))

Now, all that is left is using that result object in your function. In your example, you are using the parameterless variant, but in fact the result object is the one parameter given to wipe*:

$('.kit').wipetouch({

  wipeLeft: function(result) {

var source = result.source;

If e.target is not the right object, then you have to experiment a bit with jQuery event properties until you find the right one.

Hope this helps,

Surf

Feb 8, 2012 at 11:26 AM

ah ah, thanks. the e.target or $(e.target) works like a charm.

unfortunately I can only get the plugin do work on Safari Mac, not on iPad1 (iOS 4.3.3) even with your tweak above.

funny enough, it's the opposite with the touchwipe plugin upon which this is based, works on iOS, not on Mac !?