Fixed issue #288

.gitignore

@@ -5,3 +5,4 @@
 /node_modules/
 TODO
 *.zip
+test.html

dist/js/app.js

@@ -125,6 +125,9 @@ $(function () {
   //Easy access to options
   var o = $.AdminLTE.options;
 
+  //Set up the object
+  _init();
+
   //Activate the layout maker
   $.AdminLTE.layout.activate();
 
@@ -183,218 +186,220 @@ $(function () {
   });
 });
 
-/* ----------------------
- * - AdminLTE Functions -
- * ----------------------
+/* ----------------------------------
+ * - Initialize the AdminLTE Object -
+ * ----------------------------------
  * All AdminLTE functions are implemented below.
  */
-
-/* prepareLayout
- * =============
- * Fixes the layout height in case min-height fails.
- *
- * @type Object
- * @usage $.AdminLTE.layout.activate()
- *        $.AdminLTE.layout.fix()
- *        $.AdminLTE.layout.fixSidebar()
- */
-$.AdminLTE.layout = {
-  activate: function () {
-    var _this = this;
-    _this.fix();
-    _this.fixSidebar();
-    $(window, ".wrapper").resize(function () {
+function _init() {
+
+  /* Layout
+   * ======
+   * Fixes the layout height in case min-height fails.
+   *
+   * @type Object
+   * @usage $.AdminLTE.layout.activate()
+   *        $.AdminLTE.layout.fix()
+   *        $.AdminLTE.layout.fixSidebar()
+   */
+  $.AdminLTE.layout = {
+    activate: function () {
+      var _this = this;
       _this.fix();
       _this.fixSidebar();
-    });
-  },
-  fix: function () {
-    //Get window height and the wrapper height
-    var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
-    var window_height = $(window).height();
-    var sidebar_height = $(".sidebar").height();
-    //Set the min-height of the content and sidebar based on the
-    //the height of the document.
-    if ($("body").hasClass("fixed")) {
-      $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
-    } else {
-      if (window_height >= sidebar_height) {
-        $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+      $(window, ".wrapper").resize(function () {
+        _this.fix();
+        _this.fixSidebar();
+      });
+    },
+    fix: function () {
+      //Get window height and the wrapper height
+      var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
+      var window_height = $(window).height();
+      var sidebar_height = $(".sidebar").height();
+      //Set the min-height of the content and sidebar based on the
+      //the height of the document.
+      if ($("body").hasClass("fixed")) {
+        $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
       } else {
-        $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+        if (window_height >= sidebar_height) {
+          $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+        } else {
+          $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+        }
       }
-    }
-  },
-  fixSidebar: function () {
-    //Make sure the body tag has the .fixed class
-    if (!$("body").hasClass("fixed")) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
+    },
+    fixSidebar: function () {
+      //Make sure the body tag has the .fixed class
+      if (!$("body").hasClass("fixed")) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+        }
+        return;
+      } else if (typeof $.fn.slimScroll == 'undefined' && console) {
+        console.error("Error: the fixed layout requires the slimscroll plugin!");
       }
-      return;
-    } else if (typeof $.fn.slimScroll == 'undefined' && console) {
-      console.error("Error: the fixed layout requires the slimscroll plugin!");
-    }
-    //Enable slimscroll for fixed layout
-    if ($.AdminLTE.options.sidebarSlimScroll) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        //Distroy if it exists
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
-        //Add slimscroll
-        $(".sidebar").slimscroll({
-          height: ($(window).height() - $(".main-header").height()) + "px",
-          color: "rgba(0,0,0,0.2)",
-          size: "3px"
-        });
+      //Enable slimscroll for fixed layout
+      if ($.AdminLTE.options.sidebarSlimScroll) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          //Distroy if it exists
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+          //Add slimscroll
+          $(".sidebar").slimscroll({
+            height: ($(window).height() - $(".main-header").height()) + "px",
+            color: "rgba(0,0,0,0.2)",
+            size: "3px"
+          });
+        }
       }
     }
-  }
-};
+  };
 
-/* PushMenu()
- * ==========
- * Adds the push menu functionality to the sidebar.
- *
- * @type Function
- * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
- */
-$.AdminLTE.pushMenu = function (toggleBtn) {
-  //Get the screen sizes
-  var screenSizes = this.options.screenSizes;
+  /* PushMenu()
+   * ==========
+   * Adds the push menu functionality to the sidebar.
+   *
+   * @type Function
+   * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
+   */
+  $.AdminLTE.pushMenu = function (toggleBtn) {
+    //Get the screen sizes
+    var screenSizes = this.options.screenSizes;
 
-  //Enable sidebar toggle
-  $(toggleBtn).click(function (e) {
-    e.preventDefault();
+    //Enable sidebar toggle
+    $(toggleBtn).click(function (e) {
+      e.preventDefault();
 
-    //Enable sidebar push menu
-    if ($(window).width() > (screenSizes.sm - 1)) {
-      $("body").toggleClass('sidebar-collapse');
-    }
-    //Handle sidebar push menu for small screens
-    else {
-      if ($("body").hasClass('sidebar-open')) {
-        $("body").removeClass('sidebar-open');
-        $("body").removeClass('sidebar-collapse')
-      } else {
-        $("body").addClass('sidebar-open');
+      //Enable sidebar push menu
+      if ($(window).width() > (screenSizes.sm - 1)) {
+        $("body").toggleClass('sidebar-collapse');
       }
-    }
-  });
-
-  $(".content-wrapper").click(function () {
-    //Enable hide menu when clicking on the content-wrapper on small screens
-    if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
-      $("body").removeClass('sidebar-open');
-    }
-  });
+      //Handle sidebar push menu for small screens
+      else {
+        if ($("body").hasClass('sidebar-open')) {
+          $("body").removeClass('sidebar-open');
+          $("body").removeClass('sidebar-collapse')
+        } else {
+          $("body").addClass('sidebar-open');
+        }
+      }
+    });
 
-};
+    $(".content-wrapper").click(function () {
+      //Enable hide menu when clicking on the content-wrapper on small screens
+      if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
+        $("body").removeClass('sidebar-open');
+      }
+    });
 
-/* Tree()
- * ======
- * Converts the sidebar into a multilevel
- * tree view menu.
- *
- * @type Function
- * @Usage: $.AdminLTE.tree('.sidebar')
- */
-$.AdminLTE.tree = function (menu) {
-  var _this = this;
-
-  $("li a", $(menu)).click(function (e) {
-    //Get the clicked link and the next element
-    var $this = $(this);
-    var checkElement = $this.next();
-
-    //Check if the next element is a menu and is visible
-    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
-      //Close the menu
-      checkElement.slideUp('normal', function () {
-        checkElement.removeClass('menu-open');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        //_this.layout.fix();
-      });
-      checkElement.parent("li").removeClass("active");
-    }
-    //If the menu is not visible
-    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
-      //Get the parent menu
-      var parent = $this.parents('ul').first();
-      //Close all open menus within the parent
-      var ul = parent.find('ul:visible').slideUp('normal');
-      //Remove the menu-open class from the parent
-      ul.removeClass('menu-open');
-      //Get the parent li
-      var parent_li = $this.parent("li");
-
-      //Open the target menu and add the menu-open class
-      checkElement.slideDown('normal', function () {
-        //Add the class active to the parent li
-        checkElement.addClass('menu-open');
-        parent.find('li.active').removeClass('active');
-        parent_li.addClass('active');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        _this.layout.fix();
-      });
-    }
-    //if this isn't a link, prevent the page from being redirected
-    if (checkElement.is('.treeview-menu')) {
-      e.preventDefault();
-    }
-  });
-};
+  };
 
-/* BoxWidget
- * =========
- * BoxWidget is plugin to handle collapsing and
- * removing boxes from the screen.
- *
- * @type Object
- * @usage $.AdminLTE.boxWidget.activate()
- *        Set all of your option in the main $.AdminLTE.options object
- */
-$.AdminLTE.boxWidget = {
-  activate: function () {
-    var o = $.AdminLTE.options;
+  /* Tree()
+   * ======
+   * Converts the sidebar into a multilevel
+   * tree view menu.
+   *
+   * @type Function
+   * @Usage: $.AdminLTE.tree('.sidebar')
+   */
+  $.AdminLTE.tree = function (menu) {
     var _this = this;
-    //Listen for collapse event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
-      e.preventDefault();
-      _this.collapse($(this));
-    });
 
-    //Listen for remove event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
-      e.preventDefault();
-      _this.remove($(this));
+    $("li a", $(menu)).click(function (e) {
+      //Get the clicked link and the next element
+      var $this = $(this);
+      var checkElement = $this.next();
+
+      //Check if the next element is a menu and is visible
+      if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
+        //Close the menu
+        checkElement.slideUp('normal', function () {
+          checkElement.removeClass('menu-open');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          //_this.layout.fix();
+        });
+        checkElement.parent("li").removeClass("active");
+      }
+      //If the menu is not visible
+      else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+        //Get the parent menu
+        var parent = $this.parents('ul').first();
+        //Close all open menus within the parent
+        var ul = parent.find('ul:visible').slideUp('normal');
+        //Remove the menu-open class from the parent
+        ul.removeClass('menu-open');
+        //Get the parent li
+        var parent_li = $this.parent("li");
+
+        //Open the target menu and add the menu-open class
+        checkElement.slideDown('normal', function () {
+          //Add the class active to the parent li
+          checkElement.addClass('menu-open');
+          parent.find('li.active').removeClass('active');
+          parent_li.addClass('active');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          _this.layout.fix();
+        });
+      }
+      //if this isn't a link, prevent the page from being redirected
+      if (checkElement.is('.treeview-menu')) {
+        e.preventDefault();
+      }
     });
-  },
-  collapse: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    //Find the body and the footer
-    var bf = box.find(".box-body, .box-footer");
-    if (!box.hasClass("collapsed-box")) {
-      //Convert minus into plus
-      element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
-      bf.slideUp(300, function () {
-        box.addClass("collapsed-box");
+  };
+
+  /* BoxWidget
+   * =========
+   * BoxWidget is plugin to handle collapsing and
+   * removing boxes from the screen.
+   *
+   * @type Object
+   * @usage $.AdminLTE.boxWidget.activate()
+   *        Set all of your option in the main $.AdminLTE.options object
+   */
+  $.AdminLTE.boxWidget = {
+    activate: function () {
+      var o = $.AdminLTE.options;
+      var _this = this;
+      //Listen for collapse event triggers
+      $(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
+        e.preventDefault();
+        _this.collapse($(this));
       });
-    } else {
-      //Convert plus into minus
-      element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
-      bf.slideDown(300, function () {
-        box.removeClass("collapsed-box");
+
+      //Listen for remove event triggers
+      $(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
+        e.preventDefault();
+        _this.remove($(this));
       });
-    }
-  },
-  remove: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    box.slideUp();
-  },
-  options: $.AdminLTE.options.boxWidgetOptions
-};
+    },
+    collapse: function (element) {
+      //Find the box parent
+      var box = element.parents(".box").first();
+      //Find the body and the footer
+      var bf = box.find(".box-body, .box-footer");
+      if (!box.hasClass("collapsed-box")) {
+        //Convert minus into plus
+        element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
+        bf.slideUp(300, function () {
+          box.addClass("collapsed-box");
+        });
+      } else {
+        //Convert plus into minus
+        element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
+        bf.slideDown(300, function () {
+          box.removeClass("collapsed-box");
+        });
+      }
+    },
+    remove: function (element) {
+      //Find the box parent
+      var box = element.parents(".box").first();
+      box.slideUp();
+    },
+    options: $.AdminLTE.options.boxWidgetOptions
+  };
+}
 
 /* ------------------
  * - Custom Plugins -

documentation/style.css

@@ -6,6 +6,10 @@
   font-size: 16px;
 }
 
+.content {
+  z-index: 500;
+}
+
 #components > h3 {
   font-size: 25px;  
   color: #000;
@@ -20,7 +24,7 @@ ul {
 }
 .page-header {
   /*border-bottom: 1px solid #ddd;        */
-  margin: 20px 0 20px 0;
+  margin: 20px 0 10px 0!important;
   position: relative;
   z-index: 1;
   font-size: 30px;
@@ -46,6 +50,7 @@ ul {
   margin-top: -60px; 
   height: 60px; 
   visibility: hidden; 
+  z-index: -10;
 }
 
 .lead {