Skip to content

Instantly share code, notes, and snippets.

@mig
Created April 29, 2010 20:53
Show Gist options
  • Save mig/384228 to your computer and use it in GitHub Desktop.
Save mig/384228 to your computer and use it in GitHub Desktop.
(function ($) {
// Monkey patch jQuery 1.3.1+ css() method to support CSS 'transform'
// property uniformly across Webkit/Safari/Chrome and Firefox 3.5.
// 2009 Zachary Johnson www.zachstronaut.com
function getTransformProperty(element)
{
// Try transform first for forward compatibility
var properties = ['transform', 'WebkitTransform', 'MozTransform'];
var p;
while (p = properties.shift())
{
if (typeof element.style[p] != 'undefined')
{
return p;
}
}
// Default to transform also
return 'transform';
}
var proxied = $.fn.css;
$.fn.css = function (arg)
{
// Find the correct browser specific property and setup the mapping using
// $.props which is used internally by jQuery.attr() when setting CSS
// properties via either the css(name, value) or css(properties) method.
// The problem with doing this once outside of css() method is that you
// need a DOM node to find the right CSS property, and there is some risk
// that somebody would call the css() method before body has loaded or any
// DOM-is-ready events have fired.
if
(
typeof $.props['transform'] == 'undefined'
&&
(
arg == 'transform'
||
(
typeof arg == 'object'
&& typeof arg['transform'] != 'undefined'
)
)
)
{
$.props['transform'] = getTransformProperty(this.get(0));
}
// We force the property mapping here because jQuery.attr() does
// property mapping with jQuery.props when setting a CSS property,
// but curCSS() does *not* do property mapping when *getting* a
// CSS property. (It probably should since it manually does it
// for 'float' now anyway... but that'd require more testing.)
if (arg == 'transform')
{
arg = $.props['transform'];
}
return proxied.apply(this, arguments);
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment