Touch events ios positioning issue zoom and pan horizontal? about panzoom

[timmywil]

Sorry I didn't have time to look at this issue yet. Did you get it working?

[nicolasvdv]

Yes thanks I removed "draggable" on #panzoom, used "contain: invert" instead of my own "reposition()", and removed one div under #panzoom that for some reason was causing a problem.

Now I only have your code handling the pan and zoom on my puzzle background and it works great ( www.puzzstory.com/world-history-puzzle.html ), last things I need to figure out is (1) how to set focus in the middle of #panzoom's parent when users click on browser's buttons and (2) how to set the focus in the middle of pinch gesture (these are issues #4 and #5). I have a big image and for some reasons it is going up and left on pinch zoom gesture...

[timmywil]

Have a look at the focal option on the zoom method and let me know if you have trouble. By the way, the focus should be the middle of a pinch gesture by default.

[nicolasvdv]

Yes the default focus looks good in all your demos without setting any focal option so I still have a problem with my html structure...

[nicolasvdv]

I tried

var centerPoint;
var zscale;
centerPoint.clientX = screenw/2;
centerPoint.clientY = screenh/2;
var fitScale = largestSide/backgroundSize;
$("#panzoom").panzoom(
{
$zoomIn: $("#zoomin").on("click"),
$zoomOut: $("#zoomout").on("click"),
maxScale: 1.2,
minScale: fitScale,
increment: 0.05,
contain: "invert",
onZoom: function( e, panzoom, scale )
{
zscale = scale;
}
}).panzoom("zoom",fitScale,{focal: centerPoint});

But it's not working, see code and everything on the page above. I even set focal to (0,0) but no change, seems like focal stays stuck in the middle of #panzoom? and I'm pretty sure this is also the problem of my pinch gesture...

Do you mind have a look at the page because I have been working on this for a while and I am running out of ideas.