Make everything work in all browsers (hopefully).

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[transformProperty].match(/translate3d\(([^,]*)/);
-      var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
+    var ret = translate3d ? translate3d[1] : 0;
-      var ret = translate3d ? translate3d[1] : 0;
+    return parseInt(ret, 10);
-      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[transformPrefix + 'transition-duration'] = '.2s';
-    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+    slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
 
     e = new CustomEvent('slide', {
       detail: { slideNumber: Math.abs(slideNumber) },

js/toggles.js

@@ -15,6 +15,21 @@
   var distanceX = false;
   var toggle    = false;
 
+  // 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 {
+      transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
+    };
+  })();
+
+  var transformProperty = getBrowserCapabilities.transform;
+
   var findToggle = function (target) {
     var i;
     var toggles = document.querySelectorAll('.toggle');
@@ -73,13 +88,13 @@
     e.preventDefault();
 
     if (distanceX < 0) {
-      return (handle.style.webkitTransform = 'translate3d(0,0,0)');
+      return (handle.style[transformProperty] = 'translate3d(0,0,0)');
     }
     if (distanceX > offset) {
-      return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
+      return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)');
     }
 
-    handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
+    handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)';
 
     toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
   });
@@ -96,9 +111,9 @@
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
 
     if (slideOn) {
-      handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+      handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
     } else {
-      handle.style.webkitTransform = 'translate3d(0,0,0)';
+      handle.style[transformProperty] = 'translate3d(0,0,0)';
     }
 
     toggle.classList[slideOn ? 'add' : 'remove']('active');