last update to sidebar before kaputz

Former-commit-id: c124d13d4a
Former-commit-id: 8d0c78c23b

build/minified/modules/sidebar.js

@@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) {
         show: function() {
           module.debug('Showing sidebar');
           if(module.is.closed()) {
-            module.set.active();
             if(!settings.overlay) {
-              module.add.bodyCSS();
-              module.set.pushed();
+              module.pushPage();
             }
+            module.set.active();
           }
           else {
             module.debug('Sidebar is already visible');
@@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) {
 
         hide: function() {
           if(module.is.open()) {
-            module.remove.active();
             if(!settings.overlay) {
-              module.remove.bodyCSS();
+              module.pullPage();
               module.remove.pushed();
             }
+            module.remove.active();
           }
         },
 
@@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        pushPage: function() {
+          var
+            direction = module.get.direction(),
+            distance  = (module.is.vertical())
+              ? $module.outerHeight()
+              : $module.outerWidth()
+          ;
+          if(settings.useCSS) {
+            module.debug('Using CSS to animate body');
+            module.add.bodyCSS(direction, distance);
+            module.set.pushed();
+          }
+          else {
+            module.animatePage(direction, distance, module.set.pushed);
+          }
+        },
+
+        pullPage: function() {
+          var
+            direction = module.get.direction()
+          ;
+          if(settings.useCSS) {
+            module.debug('Resetting body position css');
+            module.remove.bodyCSS();
+          }
+          else {
+            module.debug('Resetting body position using javascript');
+            module.animatePage(direction, 0);
+          }
+          module.remove.pushed();
+        },
+
+        animatePage: function(direction, distance) {
+          var
+            animateSettings = {}
+          ;
+          animateSettings['padding-' + direction] = distance;
+          module.debug('Using javascript to animate body', animateSettings);
+          $body
+            .animate(animateSettings, settings.duration, module.set.pushed)
+          ;
+        },
+
         add: {
-          bodyCSS: function() {
+          bodyCSS: function(direction, distance) {
             var
-              style     = '',
-              direction = module.get.direction(),
-              distance  = (module.is.vertical())
-                ? $module.outerHeight()
-                : $module.outerWidth()
+              style
             ;
             if(direction !== className.bottom) {
               style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'html {'
-                + '  background-color: #3E3E3E'
-                + '}'
-                + 'body {'
-                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+                + '<style title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  margin-' + direction + ': ' + distance + 'px !important;'
                 + '}'
+                + '</style>'
               ;
-              if(settings.useTransform) {
-                style += ''
-                  + 'body.pushed {'
-                  + module.get.transform(direction, distance)
-                  + '}'
-                  + '</style>'
-                ;
-              }
-              else {
-                style += ''
-                  + 'body.pushed {'
-                  + '  margin-' + direction + ': ' + distance + 'px !important;'
-                  + '}'
-                  + '</style>'
-                ;
-              }
             }
             $head.append(style);
-            module.refresh();
             module.debug('Adding body css to head', $style);
-            $style[0].disabled = false;
           }
         },
 
         remove: {
           bodyCSS: function() {
             module.debug('Removing body css styles', $style);
+            module.refresh();
             $style.remove();
           },
           active: function() {
@@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
-          transform: function(direction, distance) {
-            if(direction && distance) {
-              if(direction == className.left) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
-                  + 'margin-right: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.right) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
-                  + 'margin-left: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.top) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
-                ;
-              }
-              if(direction == className.bottom) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
-                ;
-              }
-            }
-          },
-          transformProperty: function() {
-            var
-              element    = document.createElement('element'),
-              properties = {
-                'transform'       :'transform',
-                'msTransform'     :'-ms-transform',
-                'MozTransform'    :'-moz-transform',
-                'WebkitTransform' :'-webkit-transform'
-              },
-              property
-            ;
-            for(property in properties){
-              if( element.style[property] !== undefined ){
-                return properties[property];
-              }
-            }
-          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -477,16 +453,15 @@ $.fn.sidebar.settings = {
   moduleName   : 'Sidebar',
   namespace    : 'sidebar',
 
-  useTransform : true,
-
   verbose      : true,
   debug        : true,
   performance  : true,
 
+  useCSS       : true,
   overlay      : false,
+  duration     : 300,
 
   side         : 'left',
-  duration     : 500,
 
   onChange     : function(){},
   onShow       : function(){},

build/packaged/modules/sidebar.js

@@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) {
         show: function() {
           module.debug('Showing sidebar');
           if(module.is.closed()) {
-            module.set.active();
             if(!settings.overlay) {
-              module.add.bodyCSS();
-              module.set.pushed();
+              module.pushPage();
             }
+            module.set.active();
           }
           else {
             module.debug('Sidebar is already visible');
@@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) {
 
         hide: function() {
           if(module.is.open()) {
-            module.remove.active();
             if(!settings.overlay) {
-              module.remove.bodyCSS();
+              module.pullPage();
               module.remove.pushed();
             }
+            module.remove.active();
           }
         },
 
@@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        pushPage: function() {
+          var
+            direction = module.get.direction(),
+            distance  = (module.is.vertical())
+              ? $module.outerHeight()
+              : $module.outerWidth()
+          ;
+          if(settings.useCSS) {
+            module.debug('Using CSS to animate body');
+            module.add.bodyCSS(direction, distance);
+            module.set.pushed();
+          }
+          else {
+            module.animatePage(direction, distance, module.set.pushed);
+          }
+        },
+
+        pullPage: function() {
+          var
+            direction = module.get.direction()
+          ;
+          if(settings.useCSS) {
+            module.debug('Resetting body position css');
+            module.remove.bodyCSS();
+          }
+          else {
+            module.debug('Resetting body position using javascript');
+            module.animatePage(direction, 0);
+          }
+          module.remove.pushed();
+        },
+
+        animatePage: function(direction, distance) {
+          var
+            animateSettings = {}
+          ;
+          animateSettings['padding-' + direction] = distance;
+          module.debug('Using javascript to animate body', animateSettings);
+          $body
+            .animate(animateSettings, settings.duration, module.set.pushed)
+          ;
+        },
+
         add: {
-          bodyCSS: function() {
+          bodyCSS: function(direction, distance) {
             var
-              style     = '',
-              direction = module.get.direction(),
-              distance  = (module.is.vertical())
-                ? $module.outerHeight()
-                : $module.outerWidth()
+              style
             ;
             if(direction !== className.bottom) {
               style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'html {'
-                + '  background-color: #3E3E3E'
-                + '}'
-                + 'body {'
-                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+                + '<style title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  margin-' + direction + ': ' + distance + 'px !important;'
                 + '}'
+                + '</style>'
               ;
-              if(settings.useTransform) {
-                style += ''
-                  + 'body.pushed {'
-                  + module.get.transform(direction, distance)
-                  + '}'
-                  + '</style>'
-                ;
-              }
-              else {
-                style += ''
-                  + 'body.pushed {'
-                  + '  margin-' + direction + ': ' + distance + 'px !important;'
-                  + '}'
-                  + '</style>'
-                ;
-              }
             }
             $head.append(style);
-            module.refresh();
             module.debug('Adding body css to head', $style);
-            $style[0].disabled = false;
           }
         },
 
         remove: {
           bodyCSS: function() {
             module.debug('Removing body css styles', $style);
+            module.refresh();
             $style.remove();
           },
           active: function() {
@@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
-          transform: function(direction, distance) {
-            if(direction && distance) {
-              if(direction == className.left) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
-                  + 'margin-right: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.right) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
-                  + 'margin-left: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.top) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
-                ;
-              }
-              if(direction == className.bottom) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
-                ;
-              }
-            }
-          },
-          transformProperty: function() {
-            var
-              element    = document.createElement('element'),
-              properties = {
-                'transform'       :'transform',
-                'msTransform'     :'-ms-transform',
-                'MozTransform'    :'-moz-transform',
-                'WebkitTransform' :'-webkit-transform'
-              },
-              property
-            ;
-            for(property in properties){
-              if( element.style[property] !== undefined ){
-                return properties[property];
-              }
-            }
-          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -477,16 +453,15 @@ $.fn.sidebar.settings = {
   moduleName   : 'Sidebar',
   namespace    : 'sidebar',
 
-  useTransform : true,
-
   verbose      : true,
   debug        : true,
   performance  : true,
 
+  useCSS       : true,
   overlay      : false,
+  duration     : 300,
 
   side         : 'left',
-  duration     : 500,
 
   onChange     : function(){},
   onShow       : function(){},

build/uncompressed/modules/sidebar.css

@@ -22,11 +22,6 @@ body {
 }
 .ui.sidebar {
   position: fixed;
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
   margin: 0 !important;
   width: 275px !important;
   height: 100% !important;
@@ -38,71 +33,47 @@ body {
   top: 0px;
   left: 0px;
   z-index: 999;
-  -webkit-transition: -webkit-transform 0.3s ease;
-  -moz-transition: -moz-transform 0.3s ease;
-  transition: transform 0.3s ease;
+  -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -o-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  transition: margin-left 0.3s ease, margin-top 0.3s ease;
 }
 /*******************************
             Types
 *******************************/
+.ui.sidebar {
+  margin-left: -275px !important;
+}
 .ui.right.sidebar {
   left: 100%;
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin: 0px !important;
 }
 .ui.top.sidebar {
+  margin: -40px 0px 0px 0px !important;
   width: 100% !important;
   height: 40px !important;
-  overflow: hidden;
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
 }
 .ui.bottom.sidebar {
   width: 100% !important;
   height: 40px !important;
   top: 100%;
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin: 0px !important;
 }
 /*******************************
             States
 *******************************/
 .ui.active.sidebar {
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin-left: 0px !important;
 }
 .ui.active.right.sidebar {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
+  margin-left: -275px !important;
 }
 .ui.active.top.sidebar {
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin-top: 0px !important;
 }
 .ui.active.bottom.sidebar {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
+  margin-top: -40px !important;
 }
 /*******************************
            Variations

build/uncompressed/modules/sidebar.js

@@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) {
         show: function() {
           module.debug('Showing sidebar');
           if(module.is.closed()) {
-            module.set.active();
             if(!settings.overlay) {
-              module.add.bodyCSS();
-              module.set.pushed();
+              module.pushPage();
             }
+            module.set.active();
           }
           else {
             module.debug('Sidebar is already visible');
@@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) {
 
         hide: function() {
           if(module.is.open()) {
-            module.remove.active();
             if(!settings.overlay) {
-              module.remove.bodyCSS();
+              module.pullPage();
               module.remove.pushed();
             }
+            module.remove.active();
           }
         },
 
@@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        pushPage: function() {
+          var
+            direction = module.get.direction(),
+            distance  = (module.is.vertical())
+              ? $module.outerHeight()
+              : $module.outerWidth()
+          ;
+          if(settings.useCSS) {
+            module.debug('Using CSS to animate body');
+            module.add.bodyCSS(direction, distance);
+            module.set.pushed();
+          }
+          else {
+            module.animatePage(direction, distance, module.set.pushed);
+          }
+        },
+
+        pullPage: function() {
+          var
+            direction = module.get.direction()
+          ;
+          if(settings.useCSS) {
+            module.debug('Resetting body position css');
+            module.remove.bodyCSS();
+          }
+          else {
+            module.debug('Resetting body position using javascript');
+            module.animatePage(direction, 0);
+          }
+          module.remove.pushed();
+        },
+
+        animatePage: function(direction, distance) {
+          var
+            animateSettings = {}
+          ;
+          animateSettings['padding-' + direction] = distance;
+          module.debug('Using javascript to animate body', animateSettings);
+          $body
+            .animate(animateSettings, settings.duration, module.set.pushed)
+          ;
+        },
+
         add: {
-          bodyCSS: function() {
+          bodyCSS: function(direction, distance) {
             var
-              style     = '',
-              direction = module.get.direction(),
-              distance  = (module.is.vertical())
-                ? $module.outerHeight()
-                : $module.outerWidth()
+              style
             ;
             if(direction !== className.bottom) {
               style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'html {'
-                + '  background-color: #3E3E3E'
-                + '}'
-                + 'body {'
-                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+                + '<style title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  margin-' + direction + ': ' + distance + 'px !important;'
                 + '}'
+                + '</style>'
               ;
-              if(settings.useTransform) {
-                style += ''
-                  + 'body.pushed {'
-                  + module.get.transform(direction, distance)
-                  + '}'
-                  + '</style>'
-                ;
-              }
-              else {
-                style += ''
-                  + 'body.pushed {'
-                  + '  margin-' + direction + ': ' + distance + 'px !important;'
-                  + '}'
-                  + '</style>'
-                ;
-              }
             }
             $head.append(style);
-            module.refresh();
             module.debug('Adding body css to head', $style);
-            $style[0].disabled = false;
           }
         },
 
         remove: {
           bodyCSS: function() {
             module.debug('Removing body css styles', $style);
+            module.refresh();
             $style.remove();
           },
           active: function() {
@@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
-          transform: function(direction, distance) {
-            if(direction && distance) {
-              if(direction == className.left) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
-                  + 'margin-right: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.right) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
-                  + 'margin-left: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.top) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
-                ;
-              }
-              if(direction == className.bottom) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
-                ;
-              }
-            }
-          },
-          transformProperty: function() {
-            var
-              element    = document.createElement('element'),
-              properties = {
-                'transform'       :'transform',
-                'msTransform'     :'-ms-transform',
-                'MozTransform'    :'-moz-transform',
-                'WebkitTransform' :'-webkit-transform'
-              },
-              property
-            ;
-            for(property in properties){
-              if( element.style[property] !== undefined ){
-                return properties[property];
-              }
-            }
-          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -477,16 +453,15 @@ $.fn.sidebar.settings = {
   moduleName   : 'Sidebar',
   namespace    : 'sidebar',
 
-  useTransform : true,
-
   verbose      : true,
   debug        : true,
   performance  : true,
 
+  useCSS       : true,
   overlay      : false,
+  duration     : 300,
 
   side         : 'left',
-  duration     : 500,
 
   onChange     : function(){},
   onShow       : function(){},

node/src/documents/modules/sidebar.html

@@ -66,7 +66,7 @@ type   : 'UI Module'
   </div>
   <h2 class="ui dividing header">Initializing</h2>
   <p>Any content can be used as a sidebar by adding the class <code>ui sidebar</code> and initializing the menu in javascript.</p>
-  <div class="ignored warning message">
+  <div class="ui ignored warning message">
     <div class="header">Fixed Position Snafoos</div>
     Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
     <ul class="list">

node/src/files/components/semantic/modules/sidebar.css

@@ -22,11 +22,6 @@ body {
 }
 .ui.sidebar {
   position: fixed;
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
   margin: 0 !important;
   width: 275px !important;
   height: 100% !important;
@@ -38,71 +33,47 @@ body {
   top: 0px;
   left: 0px;
   z-index: 999;
-  -webkit-transition: -webkit-transform 0.3s ease;
-  -moz-transition: -moz-transform 0.3s ease;
-  transition: transform 0.3s ease;
+  -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -o-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease;
+  transition: margin-left 0.3s ease, margin-top 0.3s ease;
 }
 /*******************************
             Types
 *******************************/
+.ui.sidebar {
+  margin-left: -275px !important;
+}
 .ui.right.sidebar {
   left: 100%;
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin: 0px !important;
 }
 .ui.top.sidebar {
+  margin: -40px 0px 0px 0px !important;
   width: 100% !important;
   height: 40px !important;
-  overflow: hidden;
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
 }
 .ui.bottom.sidebar {
   width: 100% !important;
   height: 40px !important;
   top: 100%;
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin: 0px !important;
 }
 /*******************************
             States
 *******************************/
 .ui.active.sidebar {
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin-left: 0px !important;
 }
 .ui.active.right.sidebar {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
+  margin-left: -275px !important;
 }
 .ui.active.top.sidebar {
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin-top: 0px !important;
 }
 .ui.active.bottom.sidebar {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
+  margin-top: -40px !important;
 }
 /*******************************
            Variations

node/src/files/components/semantic/modules/sidebar.js

@@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) {
         show: function() {
           module.debug('Showing sidebar');
           if(module.is.closed()) {
-            module.set.active();
             if(!settings.overlay) {
-              module.add.bodyCSS();
-              module.set.pushed();
+              module.pushPage();
             }
+            module.set.active();
           }
           else {
             module.debug('Sidebar is already visible');
@@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) {
 
         hide: function() {
           if(module.is.open()) {
-            module.remove.active();
             if(!settings.overlay) {
-              module.remove.bodyCSS();
+              module.pullPage();
               module.remove.pushed();
             }
+            module.remove.active();
           }
         },
 
@@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        pushPage: function() {
+          var
+            direction = module.get.direction(),
+            distance  = (module.is.vertical())
+              ? $module.outerHeight()
+              : $module.outerWidth()
+          ;
+          if(settings.useCSS) {
+            module.debug('Using CSS to animate body');
+            module.add.bodyCSS(direction, distance);
+            module.set.pushed();
+          }
+          else {
+            module.animatePage(direction, distance, module.set.pushed);
+          }
+        },
+
+        pullPage: function() {
+          var
+            direction = module.get.direction()
+          ;
+          if(settings.useCSS) {
+            module.debug('Resetting body position css');
+            module.remove.bodyCSS();
+          }
+          else {
+            module.debug('Resetting body position using javascript');
+            module.animatePage(direction, 0);
+          }
+          module.remove.pushed();
+        },
+
+        animatePage: function(direction, distance) {
+          var
+            animateSettings = {}
+          ;
+          animateSettings['padding-' + direction] = distance;
+          module.debug('Using javascript to animate body', animateSettings);
+          $body
+            .animate(animateSettings, settings.duration, module.set.pushed)
+          ;
+        },
+
         add: {
-          bodyCSS: function() {
+          bodyCSS: function(direction, distance) {
             var
-              style     = '',
-              direction = module.get.direction(),
-              distance  = (module.is.vertical())
-                ? $module.outerHeight()
-                : $module.outerWidth()
+              style
             ;
             if(direction !== className.bottom) {
               style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'html {'
-                + '  background-color: #3E3E3E'
-                + '}'
-                + 'body {'
-                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+                + '<style title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  margin-' + direction + ': ' + distance + 'px !important;'
                 + '}'
+                + '</style>'
               ;
-              if(settings.useTransform) {
-                style += ''
-                  + 'body.pushed {'
-                  + module.get.transform(direction, distance)
-                  + '}'
-                  + '</style>'
-                ;
-              }
-              else {
-                style += ''
-                  + 'body.pushed {'
-                  + '  margin-' + direction + ': ' + distance + 'px !important;'
-                  + '}'
-                  + '</style>'
-                ;
-              }
             }
             $head.append(style);
-            module.refresh();
             module.debug('Adding body css to head', $style);
-            $style[0].disabled = false;
           }
         },
 
         remove: {
           bodyCSS: function() {
             module.debug('Removing body css styles', $style);
+            module.refresh();
             $style.remove();
           },
           active: function() {
@@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
-          transform: function(direction, distance) {
-            if(direction && distance) {
-              if(direction == className.left) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
-                  + 'margin-right: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.right) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
-                  + 'margin-left: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.top) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
-                ;
-              }
-              if(direction == className.bottom) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
-                ;
-              }
-            }
-          },
-          transformProperty: function() {
-            var
-              element    = document.createElement('element'),
-              properties = {
-                'transform'       :'transform',
-                'msTransform'     :'-ms-transform',
-                'MozTransform'    :'-moz-transform',
-                'WebkitTransform' :'-webkit-transform'
-              },
-              property
-            ;
-            for(property in properties){
-              if( element.style[property] !== undefined ){
-                return properties[property];
-              }
-            }
-          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -477,16 +453,15 @@ $.fn.sidebar.settings = {
   moduleName   : 'Sidebar',
   namespace    : 'sidebar',
 
-  useTransform : true,
-
   verbose      : true,
   debug        : true,
   performance  : true,
 
+  useCSS       : true,
   overlay      : false,
+  duration     : 300,
 
   side         : 'left',
-  duration     : 500,
 
   onChange     : function(){},
   onShow       : function(){},

node/src/files/javascript/semantic.js

@@ -460,7 +460,6 @@ semantic.ready = function() {
   $menu
     .sidebar('attach events', '.launch.button, .launch.item')
   ;
-
   $waypoints
     .waypoint({
       continuous : false,
@@ -504,6 +503,7 @@ semantic.ready = function() {
       stuckClass : 'stuck'
     })
   ;
+
   $peekItem
     .on('click', handler.peek)
   ;

node/src/files/stylesheets/semantic.css

@@ -260,11 +260,11 @@ a:hover {
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-transition: margin 0.3s ease-out;
-  -moz-transition: margin 0.3s ease-out;
-  -o-transition: margin 0.3s ease-out;
-  -ms-transition: margin 0.3s ease-out;
-  transition: margin 0.3s ease-out;
+  -webkit-transition: margin 0.3s ease;
+  -moz-transition: margin 0.3s ease;
+  -o-transition: margin 0.3s ease;
+  -ms-transition: margin 0.3s ease;
+  transition: margin 0.3s ease;
 }
 #example .main.menu .count {
   font-family: "Hevletica Neue", Arial, sans-serif;
@@ -463,11 +463,11 @@ a:hover {
   left: -230px;
   width: 180px;
 
-  -webkit-transition: padding 0.3s ease-out;
-  -moz-transition: padding 0.3s ease-out;
-  -o-transition: padding 0.3s ease-out;
-  -ms-transition: padding 0.3s ease-out;
-  transition: padding 0.3s ease-out;
+  -webkit-transition: padding 0.3s ease;
+  -moz-transition: padding 0.3s ease;
+  -o-transition: padding 0.3s ease;
+  -ms-transition: padding 0.3s ease;
+  transition: padding 0.3s ease;
 }
 
 #example .main.ui.grid {
@@ -630,7 +630,13 @@ a:hover {
   left: 50%;
   margin-left: -685px;
 }
+#example.left.pushed .sticky-wrapper .peek {
+  margin-left: -132.5px;
+  padding-left: 132.5px;
+}
+
 #example.left.pushed .sticky-wrapper.stuck .peek {
+  margin-left: -817.5px;
   padding-left: 132.5px;
 }
 
@@ -1031,6 +1037,10 @@ body.progress .ui.progress .bar {
     margin-left: 0px;
     left: 95px;
   }
+  #example.left.pushed .sticky-wrapper .peek {
+    padding-left: 275px;
+    margin-left: -275px;
+  }
   #example.left.pushed .sticky-wrapper.stuck .peek {
     padding-left: 275px;
   }

src/modules/sidebar.js

@@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) {
         show: function() {
           module.debug('Showing sidebar');
           if(module.is.closed()) {
-            module.set.active();
             if(!settings.overlay) {
-              module.add.bodyCSS();
-              module.set.pushed();
+              module.pushPage();
             }
+            module.set.active();
           }
           else {
             module.debug('Sidebar is already visible');
@@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) {
 
         hide: function() {
           if(module.is.open()) {
-            module.remove.active();
             if(!settings.overlay) {
-              module.remove.bodyCSS();
+              module.pullPage();
               module.remove.pushed();
             }
+            module.remove.active();
           }
         },
 
@@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        pushPage: function() {
+          var
+            direction = module.get.direction(),
+            distance  = (module.is.vertical())
+              ? $module.outerHeight()
+              : $module.outerWidth()
+          ;
+          if(settings.useCSS) {
+            module.debug('Using CSS to animate body');
+            module.add.bodyCSS(direction, distance);
+            module.set.pushed();
+          }
+          else {
+            module.animatePage(direction, distance, module.set.pushed);
+          }
+        },
+
+        pullPage: function() {
+          var
+            direction = module.get.direction()
+          ;
+          if(settings.useCSS) {
+            module.debug('Resetting body position css');
+            module.remove.bodyCSS();
+          }
+          else {
+            module.debug('Resetting body position using javascript');
+            module.animatePage(direction, 0);
+          }
+          module.remove.pushed();
+        },
+
+        animatePage: function(direction, distance) {
+          var
+            animateSettings = {}
+          ;
+          animateSettings['padding-' + direction] = distance;
+          module.debug('Using javascript to animate body', animateSettings);
+          $body
+            .animate(animateSettings, settings.duration, module.set.pushed)
+          ;
+        },
+
         add: {
-          bodyCSS: function() {
+          bodyCSS: function(direction, distance) {
             var
-              style     = '',
-              direction = module.get.direction(),
-              distance  = (module.is.vertical())
-                ? $module.outerHeight()
-                : $module.outerWidth()
+              style
             ;
             if(direction !== className.bottom) {
               style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'html {'
-                + '  background-color: #3E3E3E'
-                + '}'
-                + 'body {'
-                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
+                + '<style title="' + namespace + '">'
+                + 'body.pushed {'
+                + '  margin-' + direction + ': ' + distance + 'px !important;'
                 + '}'
+                + '</style>'
               ;
-              if(settings.useTransform) {
-                style += ''
-                  + 'body.pushed {'
-                  + module.get.transform(direction, distance)
-                  + '}'
-                  + '</style>'
-                ;
-              }
-              else {
-                style += ''
-                  + 'body.pushed {'
-                  + '  margin-' + direction + ': ' + distance + 'px !important;'
-                  + '}'
-                  + '</style>'
-                ;
-              }
             }
             $head.append(style);
-            module.refresh();
             module.debug('Adding body css to head', $style);
-            $style[0].disabled = false;
           }
         },
 
         remove: {
           bodyCSS: function() {
             module.debug('Removing body css styles', $style);
+            module.refresh();
             $style.remove();
           },
           active: function() {
@@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
-          transform: function(direction, distance) {
-            if(direction && distance) {
-              if(direction == className.left) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
-                  + 'margin-right: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.right) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
-                  + 'margin-left: ' + distance + 'px !important;'
-                ;
-              }
-              if(direction == className.top) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
-                ;
-              }
-              if(direction == className.bottom) {
-                return ''
-                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
-                ;
-              }
-            }
-          },
-          transformProperty: function() {
-            var
-              element    = document.createElement('element'),
-              properties = {
-                'transform'       :'transform',
-                'msTransform'     :'-ms-transform',
-                'MozTransform'    :'-moz-transform',
-                'WebkitTransform' :'-webkit-transform'
-              },
-              property
-            ;
-            for(property in properties){
-              if( element.style[property] !== undefined ){
-                return properties[property];
-              }
-            }
-          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -477,16 +453,15 @@ $.fn.sidebar.settings = {
   moduleName   : 'Sidebar',
   namespace    : 'sidebar',
 
-  useTransform : true,
-
   verbose      : true,
   debug        : true,
   performance  : true,
 
+  useCSS       : true,
   overlay      : false,
+  duration     : 300,
 
   side         : 'left',
-  duration     : 500,
 
   onChange     : function(){},
   onShow       : function(){},

src/modules/sidebar.less

@@ -35,13 +35,8 @@ body {
 .ui.sidebar {
   position: fixed;
 
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
-
   margin: 0 !important;
+
   width: 275px !important;
   height: 100% !important;
 
@@ -55,9 +50,26 @@ body {
   left: 0px;
   z-index: 999;
 
-  -webkit-transition: -webkit-transform 0.3s ease;
-  -moz-transition: -moz-transform 0.3s ease;
-  transition: transform 0.3s ease;
+  -webkit-transition:
+    margin-left 0.3s ease,
+    margin-top 0.3s ease
+  ;
+  -moz-transition:
+    margin-left 0.3s ease,
+    margin-top 0.3s ease
+  ;
+  -o-transition:
+    margin-left 0.3s ease,
+    margin-top 0.3s ease
+  ;
+  -ms-transition:
+    margin-left 0.3s ease,
+    margin-top 0.3s ease
+  ;
+  transition:
+    margin-left 0.3s ease,
+    margin-top 0.3s ease
+  ;
 }
 
 
@@ -65,36 +77,26 @@ body {
             Types
 *******************************/
 
+.ui.sidebar {
+  margin-left: -275px !important;
+}
+
 .ui.right.sidebar {
   left: 100%;
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin: 0px !important;
 }
 
 .ui.top.sidebar {
+  margin: -40px 0px 0px 0px !important;
   width: 100% !important;
   height: 40px !important;
-  overflow: hidden;
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
 }
 
 .ui.bottom.sidebar {
   width: 100% !important;
   height: 40px !important;
   top: 100%;
-
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin: 0px !important;
 }
 
 
@@ -103,33 +105,17 @@ body {
 *******************************/
 
 .ui.active.sidebar {
-  -webkit-transform: translateX(0%);
-  -moz-transform: translateX(0%);
-  -o-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  transform: translateX(0%);
+  margin-left: 0px !important;
 }
 .ui.active.right.sidebar {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
+  margin-left: -275px !important;
 }
 
 .ui.active.top.sidebar {
-  -webkit-transform: translateY(0%);
-  -moz-transform: translateY(0%);
-  -o-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  transform: translateY(0%);
+  margin-top: 0px !important;
 }
 .ui.active.bottom.sidebar {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  transform: translateY(-100%);
+  margin-top: -40px !important;
 }
 
 /*******************************