Cross-browser element position

get-transform-prefix.js

/**
 * Returns transform preperty for this browser
 */

var getTransformPrefix = function () {
  if (getTransformPrefix.prefix === undefined) {
    var prefixes = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'];
    var testNode = document.createElement('div');
    for (var i = 0; i < prefixes.length; i++) {
      if (testNode.style[prefixes[i]] !== undefined) {
        getTransformPrefix.prefix = prefixes[i];
        testNode = null;
        return prefixes[i];
      }
    }
    testNode = null;
    return null;
  } else {
    return getTransformPrefix.prefix;
  }
};

/**
 * @param type {String} Direction: 'vertical' or 'horizontal'. @TODO: add type 'both'
 * @param offset {Number} Offset in pixels
 * @param haccel {Boolean} Set true to force hardware acceleration (not implemented yet)
 */

var getOffsetRule = function (type, offset, haccel) {
  var transformPrefix = getTransformPrefix();
  var rule;
  if (transformPrefix) {
    // todo: check translate3d support and haccel parameter
    rule = {
      prop: transformPrefix,
      value: type === 'vertical' ? 'translate(0,' + offset + 'px)' : 'translate(' + offset + 'px, 0)'
    }
  } else {
    rule = {
      prop: type === 'vertical' ? 'top' : 'left',
      value: offset + 'px'
    }
  }
  return rule;
};

// Usage:
var offsetRule = getOffsetRule('vertical', 50);
var elem = document.createElement('div');
elem.style[offsetRule.prop] = offsetRule.value;