Pinch & Allow Scrolling of DIV

May 10, 2012 at 8:46 PM

Hi!

First - great library!  I am able to get the left and right swiping to work on the iPad without issues.  The 2 finger scrolling of my DIV content works. 

 

I am having trouble with the pinch.  My code for the pinch works (zoom the DIV with css), but at times, the whole screen moves.  I tried to disable the touchmove on the body, but that prevents the 2 finger scrolling. 

 

Any suggestions on how to prevent the screen movement during the pinch?  It's like the pinch is bubbling up and handled in addition to my event handler.

Thanks in advance!

 

Craig

May 23, 2012 at 1:19 AM

Craig,

 

I'm planning to use this plugin for this exact application. (almost - I will be re-scaling an html5 canvas.)

Have you found a solution to this problem yet? If not, I would be happy to collaborate with you... 

 

How have you implemented pinch-to-zoom? are you using jquery's .css()?

 

-Adam

May 23, 2012 at 1:19 AM
Edited May 23, 2012 at 1:21 AM

Accidental re-post. There's no way to delete errant comments on this forum.

Coordinator
May 25, 2012 at 1:57 PM

Hey Craig,

you're right: the event bubbles and your are seeing the default behaviour.

There's more than one solution:

- try to prevent the default behaviour

- use the jgesture control events

  • jGestures.touchstart
  • jGestures.touchend;start
  • jGestures.touchend;processed
  • jGestures.gesturestart
  • jGestures.gestureend;start
  • jGestures.gestureend;processed

to disable the touchmove on the body event during a pinch motion

- use the meta-tag and disable user-scaling ("<meta name="viewport" content="width=device-width, user-scalable=0">")

 

Cheers,

Martin

May 29, 2012 at 1:41 PM

@anarnold,

Yes, I am using jQuery to change the CSS zoom value as the pinch adjusts.  I use the scale value of the jGesture and adjust the current zoom with that value.  It works really well.

 

@Martin,

I will try what you suggested and post the results.  Thank you getting back!  Is there any sample code that shows me how to get the x,y position of each finger during a swipe event?  Since I have the pinch working, I was thinking of using the 2 finger scroll to move the DIV area myself.  Thanks!

 

Craig

May 29, 2012 at 5:51 PM

Martin,

 

No luck.  The code already had the meta-tag with the user-scalable=0... done for the iPad.  If I set the body to prevent the default behavior, I don't get the move event for my inner DIV.  I am not sure what you mean by handling the events to prevent the bubble up.  Could you explain?

 

Here is what I would like:  Inside the body, I have a DIV area that shows a report.  The report is bigger than the DIV, so the user will need to scroll to any area.  I use the left and right swipe to navigate between pages.  They work great.  I can get the zoom to work, but only if I prevent the default behavior for the move event on the body element, but this prevents the move event on the inner DIV.  I am very close to getting this to work.  Thank you for your help!

 

Craig

May 29, 2012 at 8:19 PM

I have it down to where I prevent the Body from being affected with the zoom of the inner DIV by binding the body to the gesturestart and gestureend events (they return false).  Doing this, I also get the swipemove event on the DIV within the body.  Here's where I am stuck.  I will have to handle my own scrolling of the DIV's inner content.  I am not clear on what value(s) I should use to scroll the inner DIV's content with (adjust the left and top).  I would like to use the jQuery .css( { "left": ... method, but I don't know what values of the object parameter to use.  If someone could help me with this - the pinch and scroll will work!  Sample code would be great.

 

Thanks in advance!

Jul 24, 2012 at 6:21 PM
Edited Jul 24, 2012 at 6:21 PM
cbuck12000 wrote:

I will try what you suggested and post the results.  Thank you getting back!  Is there any sample code that shows me how to get the x,y position of each finger during a swipe event?  Since I have the pinch working, I was thinking of using the 2 finger scroll to move the DIV area myself.  Thanks!

 

Craig

I'm also trying to get the XY position of each finger during the pinch. I was able to get one of them (http://stackoverflow.com/questions/10028500/how-to-get-the-x-y-on-pinchopen-and-pinclose-events-in-jgesture-jquery-library) but not both. If you watch the touchstart events, you can see the same finger being fired twice, instead of the location of both fingers. Any example or solution would be extremely helpful!

shekhar