what I’m trying to do is develop an interaction I have designed. It is when the user pinches ( out or in, with two fingers ) on an html element. the height shrinks to reflect the distance between the two fingers. When the item is pinched in to 50% of the original height, right now it will fire an alert, but later it will animate to a height of 0 with a jquery animation. If the scale is greater than 1.0, it will get the class of focused and the styling associated with that class. During the pinch if the fingers are lifted, it snaps back to the original scale of 1.0.
What I need help with is getting this to work on no containers surrounding it and on the element itself and on multiple instances of the element via a class.
Why I need pinch to zoom disabled is because pinching to zoom interferes with this. This is why I can not use jsFiddle or code-pen, because in order to disable pinch-to-zoom, I need to use the meta-tag in the head and I can’t do that jsFiddle or code-pen.
Currently this multi-touch gesture script works with and html element in two containers.
Can someone help me get it working so that it works with no containers and so that the element itself has a class and this gesture is applied to everything in that class. It is okay if you use jquery.
But so that the styling only applies to the member of the class the gesture is taking place on currently.
Here is the script so far:
var hammertime = Hammer(document.getElementById('pinch1'), { transform_always_block: true, transform_min_scale: 1, drag_block_horizontal: true, drag_block_vertical: true, drag_min_distance: 0 });
var posX=0, posY=0, lastPosX=0, lastPosY=0, bufferX=0, bufferY=0, scale=1, last_scale, rotation= 1, last_rotation, dragReady=0;
hammertime.on('touch drag dragend transform transformend', function(ev) { elemRect = document.getElementById('pinch2'); manageMultitouch(ev); });
function manageMultitouch(ev){
switch(ev.type) {
case 'touch':
last_scale = scale;
last_rotation = rotation;
break;
case 'drag':
posX = ev.gesture.deltaX + lastPosX;
posY = ev.gesture.deltaY + lastPosY;
break;
case 'transform':
rotation = last_rotation + ev.gesture.rotation;
scale = Math.max(0.5, Math.min(last_scale * ev.gesture.scale, 10));
break;
case 'dragend':
lastPosX = posX;
lastPosY = posY;
break;
case 'transformend':
scale = 1.0;
break;
}
if(scale <= 0.5) alert('scale is less than 0.5');
if(scale > 1.0) alert('scale larger than 1.0');
var transform =
"translate3d(0px,0px, 0) " +
"scale3d(1,"+scale+", 0) " +
"rotate(0deg) ";
elemRect.style.transform = transform;
elemRect.style.oTransform = transform;
elemRect.style.msTransform = transform;
elemRect.style.mozTransform = transform;
elemRect.style.webkitTransform = transform;
}