StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POplugin affecting all members of class instead of one element event is taking place on
text
Body
copied!<p>I wrote a jQuery plugin to scale an object down on pinch down of that object.</p> <p>I have multiple objects that need this interaction of the page so I gave them all a class and applied the plugin to the class.</p> <p>However, when I pinch in on one, all of the members of the class are scaled.</p> <p>How can I change the plugin so that only the one I am pinching in on is scaled?</p> <p>Here is a live example of the page: <a href="http://goo.gl/OW5PKc" rel="nofollow">http://goo.gl/OW5PKc</a></p> <p>Here is the plugin:</p> <pre><code>function collapse(container, element){ container = $(container).hammer({ prevent_default: true, scale_treshold: 0 }); element = $(element); var displayWidth = container.width(); var displayHeight = container.height(); var MIN_ZOOM = 0; var MAX_ZOOM = 1; var scaleFactor = 1; var previousScaleFactor = 1; var startX = 0; var startY = 0; var translateX = 0; var translateY = 0; var previousTranslateX = 0; var previousTranslateY = 0; var time = 1; var tch1 = 0, tch2 = 0, tcX = 0, tcY = 0, toX = 0, toY = 0, cssOrigin = ""; container.bind("transformstart", function(event){ e = event tch1 = [e.touches[0].x, e.touches[0].y], tch2 = [e.touches[1].x, e.touches[1].y] tcX = (tch1[0]+tch2[0])/2, tcY = (tch1[1]+tch2[1])/2 toX = tcX toY = tcY var left = $(element).offset().left; var top = $(element).offset().top; cssOrigin = (-(left) + toX)/scaleFactor +"px "+ (-(top) + toY)/scaleFactor +"px"; }); container.bind("transform", function(event){ scaleFactor = previousScaleFactor * event.scale; scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM)); transform(event); }); container.bind("transformend", function(event){ previousScaleFactor = scaleFactor; if(scaleFactor > 0.42){ $(element).css('-webkit-transform', 'scaleY(1.0)').css('transform', 'scaleY(1.0)'); } }); function transform(e){ var cssScale = "scaleY("+ scaleFactor +")"; element.css({ webkitTransform: cssScale, webkitTransformOrigin: cssOrigin, transform: cssScale, transformOrigin: cssOrigin, }); if(scaleFactor <= 0.42){ $(element).animate({height:0}, function(){ $(this).remove(); }); } } } $.fn.collapse = function(filter) { return this.each(function(){ collapse(this,filter); }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload