Detect CSS transform change across browsers using jQuery

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.

The user would change it by dragging a container with a large overflow. — Chamilyan
– Chamilyan, Commented Dec 21, 2011 at 0:20
Sounds like you might have a bigger problem. Unless this is literally all you need to do, it would be to your benefit to explain what you're doing and why you need this - your solution may not be the only one, or might be too much work, or just isn't the right one. EDIT: Can't you just use a callback for after the user drags the container? — No Results Found
– No Results Found, Commented Dec 21, 2011 at 0:21
added more details about the issue. If there is an easier way to accomplish the ultimate goal, please let me know. — Chamilyan
– Chamilyan, Commented Dec 21, 2011 at 0:38

Jasper · Accepted Answer · 2011-12-21 00:28:36Z

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/

Collectives™ on Stack Overflow

Detect CSS transform change across browsers using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related