Question

I need to detect if the CSS transform property has changed using jQuery. In firebug the CSS property i’m looking to detect changes on is rendered like this:

-moz-transform: translate(-0px, 0px)

I need to detect whether this has changed to another pixel property. For example:

-moz-transform: translate(-100px, 0px)

More details:

Ultimately I’m trying to detect between a click and a drag on the following demo.

http://cubiq.org/dropbox/iscroll4/examples/carousel/

I figured that I could query mouseup on the current transform property and if it remained the same that it was a click or if the transform property changed it would be a drag.

Answer 1

You can use Modernizr to create the vender prefix and then you can use .split() to break apart the output from .css() and get the desired values.

Here is a method of getting the properly prefixed property:

if (Modernizr.csstransforms3d) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

} else if (Modernizr.csstransforms) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}

Source: http://www.modernizr.com/docs/#prefixed

Then you can use .css() to get the -vender-transform property:

var matrix = $('#element-id').css(trans_key);//output = matrix(1, 0, 0, 1, 100px, 0px)

Then finally you can .split() the matrix value into something useable:

var data = matrix.replace(')', '').split(',');//data[4]='100px', data[5]='0px'

Here is a demo: http://jsfiddle.net/7Yz8B/