Make everything work in all browsers (hopefully).

1 files changed, 24 insertions, 9 deletions

diff --git a/js/sliders.js b/js/sliders.js
index a42b13b..be9cc98 100644
--- a/js/sliders.js
+++ b/js/sliders.js
@@ -25,6 +25,23 @@
   var scrollableArea;
   var startedMoving;
 
+  // Original script from http://davidwalsh.name/vendor-prefix
+  var getBrowserCapabilities = (function () {
+    var styles = window.getComputedStyle(document.documentElement, '');
+    var pre = (Array.prototype.slice
+        .call(styles)
+        .join('')
+        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
+      )[1];
+    return {
+      prefix: '-' + pre + '-',
+      transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
+    };
+  })();
+
+  var transformPrefix   = getBrowserCapabilities.prefix;
+  var transformProperty = getBrowserCapabilities.transform;
+
   var getSlider = function (target) {
     var i;
     var sliders = document.querySelectorAll('.slider > .slide-group');
@@ -39,11 +56,9 @@
   };
 
   var getScroll = function () {
-    if ('webkitTransform' in slider.style) {
-      var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
-      var ret = translate3d ? translate3d[1] : 0;
-      return parseInt(ret, 10);
-    }
+    var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
+    var ret = translate3d ? translate3d[1] : 0;
+    return parseInt(ret, 10);
   };
 
   var setSlideNumber = function (offset) {
@@ -76,7 +91,7 @@
 
     setSlideNumber(0);
 
-    slider.style['-webkit-transition-duration'] = 0;
+    slider.style[transformPrefix + 'transition-duration'] = 0;
   };
 
   var onTouchMove = function (e) {
@@ -109,7 +124,7 @@
     resistance = slideNumber === 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
                  slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
 
-    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+    slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
 
     // started moving
     startedMoving = true;
@@ -127,8 +142,8 @@
 
     offsetX = slideNumber * sliderWidth;
 
-    slider.style['-webkit-transition-duration'] = '.2s';
-    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+    slider.style[transformPrefix + 'transition-duration'] = '.2s';
+    slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
 
     e = new CustomEvent('slide', {
       detail: { slideNumber: Math.abs(slideNumber) },