Skip to content

Instantly share code, notes, and snippets.

@jcemer
Created August 6, 2012 00:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jcemer/3268409 to your computer and use it in GitHub Desktop.
Save jcemer/3268409 to your computer and use it in GitHub Desktop.
Simple CSS prefixator, transform detection and translateX
// thanks to http://www.mobify.com/
var CSS = {
cache: {},
prefixes: ['Webkit', 'Moz', 'O', 'ms', ''],
getProperty: function(name) {
var div, property;
if (typeof CSS.cache[name] !== 'undefined') {
return CSS.cache[name];
}
div = document.createElement('div').style;
for (var i = 0; i < CSS.prefixes.length; ++i) {
if (div[CSS.prefixes[i] + name] != undefined) {
return CSS.cache[name] = CSS.prefixes[i] + name;
}
}
}
};
CSS.has = {
'transform': !! (CSS.getProperty('Transform')),
'transform3d': !! (window.WebKitCSSMatrix && 'm11' in new WebKitCSSMatrix())
};
CSS.translateX = function(element, delta) {
var property = CSS.getProperty('Transform');
if (typeof delta === 'number') {
delta = delta + 'px';
}
if (CSS.has.transform3d) {
element.style[property] = 'translate3d(' + delta + ', 0, 0)';
} else if (CSS.has.transform) {
element.style[property] = 'translate(' + delta + ', 0)';
} else {
element.style.left = delta;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment