JQuery sidebar not working in this jsfiddle

Question

The sidebar (from http://jillix.github.io/jQuery-sidebar/) in this jsfiddle isn't working correctly. The div that's supposed to be the sidebar is simply displayed on the page (it's supposed to be hidden by default). So, the sidebar widget doesn't appear to be hooked up correctly to the div, however I've checked and the sidebar is present on the element i.e. $(".sidebar.right").sidebar().length = 1. The 'close' method of the sidebar is even being called, however the div that represents the sidebar isn't hidden.

In my actual code I'm using Jquery 2.1.4

https://jsfiddle.net/qLcwjn4g/

/*!
 *  jQuery sidebar plugin
 *  ---------------------
 *  A stupid simple sidebar jQuery plugin.
 *
 *  Developed with <3 and JavaScript by the jillix developers.
 *  Copyright (c) 2013-15 jillix
 * */
(function($) {

  /**
   * sidebar
   * Initialize sidebar on selected elements.
   *
   * ```js
   * $(".my-sidebar").sidebar({...});
   * ```
   *
   * After the call above, you can programatically open/close/toggle the sidebar using:
   *
   * ```js
   * $(".my-sidebar").trigger("sidebar:open");
   * $(".my-sidebar").trigger("sidebar:close");
   * $(".my-sidebar").trigger("sidebar:toggle");
   * $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
   * ```
   *
   * After the sidebar is opened/closed, `sidebar:opened`/`sidebar:closed` event is emitted.
   *
   * ```js
   * $(".my-sidebar").on("sidebar:opened", function () {
   *    // Do something on open
   * });
   *
   * $(".my-sidebar").on("sidebar:closed", function () {
   *    // Do something on close
   * });
   * ```
   *
   * @name sidebar
   * @function
   * @param {Object} options An object that will be merged with the default options.
   *
   *  - `speed` (Number): animation speed (default: `200`)
   *  - `side` (String): left|right|top|bottom (default: `"left"`)
   *  - `isClosed` (Boolean): A boolean value indicating if the sidebar is closed or not (default: `false`).
   *  - `close` (Boolean): If `true`, the sidebar will be closed by default.
   *
   * @return {jQuery} The jQuery elements that were selected.
   */
  $.fn.sidebar = function(options) {

    var self = this;
    if (self.length > 1) {
      return self.each(function() {
        $(this).sidebar(options);
      });
    }

    // Width, height
    var width = self.outerWidth();
    var height = self.outerHeight();

    // Defaults
    var settings = $.extend({

      // Animation speed
      speed: 200,

      // Side: left|right|top|bottom
      side: "left",

      // Is closed
      isClosed: false,

      // Should I close the sidebar?
      close: true

    }, options);

    /*!
     *  Opens the sidebar
     *  $([jQuery selector]).trigger("sidebar:open");
     * */
    self.on("sidebar:open", function(ev, data) {
      var properties = {};
      properties[settings.side] = 0;
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = false;
        self.trigger("sidebar:opened");
      });
    });


    /*!
     *  Closes the sidebar
     *  $("[jQuery selector]).trigger("sidebar:close");
     * */
    self.on("sidebar:close", function(ev, data) {
      var properties = {};
      if (settings.side === "left" || settings.side === "right") {
        properties[settings.side] = -self.outerWidth();
      } else {
        properties[settings.side] = -self.outerHeight();
      }
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = true;
        self.trigger("sidebar:closed");
      });
    });

    /*!
     *  Toggles the sidebar
     *  $("[jQuery selector]).trigger("sidebar:toggle");
     * */
    self.on("sidebar:toggle", function(ev, data) {
      if (settings.isClosed) {
        self.trigger("sidebar:open", [data]);
      } else {
        self.trigger("sidebar:close", [data]);
      }
    });

    function closeWithNoAnimation() {
      self.trigger("sidebar:close", [{
        speed: 0
      }]);
    }

    // Close the sidebar
    if (!settings.isClosed && settings.close) {
      closeWithNoAnimation();
    }

    $(window).on("resize", function() {
      if (!settings.isClosed) {
        return;
      }
      closeWithNoAnimation();
    });

    self.data("sidebar", settings);

    return self;
  };

  // Version
  $.fn.sidebar.version = "3.3.2";
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

  <div class="sidebar right">I am on right!</div>
  <script>
    $(function() {
      $(".sidebar.right").sidebar({
        side: "right"
      });
    });
  </script>
</body>

</html>

What am I missing?

Answer 1

In the demo on the github page they have a handlers.js file that the demo links to. This handles the initiation and opening of the sidebar. You just need to add this to your page or demo. You will also need to add a little css.

Here is an updated demo JSFiddle

The following is the handlers.js. Just place this after your sidebar.js file

$(document).ready(function () {
    // All sides
    var sides = ["left", "top", "right", "bottom"];

    // Initialize sidebars
    for (var i = 0; i < sides.length; ++i) {
        var cSide = sides[i];
        $(".sidebar." + cSide).sidebar({side: cSide});
    }

    // Click handlers
    $("button[data-action]").on("click", function () {
        var $this = $(this);
        var action = $this.attr("data-action");
        var side = $this.attr("data-side");
        $(".sidebar." + side).trigger("sidebar:" + action);
        return false;
    });
});

Answer 2

You are missing style on sidebar:

.sidebar{
position:fixed;
}

Full example below:

/*!
 *  jQuery sidebar plugin
 *  ---------------------
 *  A stupid simple sidebar jQuery plugin.
 *
 *  Developed with <3 and JavaScript by the jillix developers.
 *  Copyright (c) 2013-15 jillix
 * */
(function($) {

  /**
   * sidebar
   * Initialize sidebar on selected elements.
   *
   * ```js
   * $(".my-sidebar").sidebar({...});
   * ```
   *
   * After the call above, you can programatically open/close/toggle the sidebar using:
   *
   * ```js
   * $(".my-sidebar").trigger("sidebar:open");
   * $(".my-sidebar").trigger("sidebar:close");
   * $(".my-sidebar").trigger("sidebar:toggle");
   * $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
   * ```
   *
   * After the sidebar is opened/closed, `sidebar:opened`/`sidebar:closed` event is emitted.
   *
   * ```js
   * $(".my-sidebar").on("sidebar:opened", function () {
   *    // Do something on open
   * });
   *
   * $(".my-sidebar").on("sidebar:closed", function () {
   *    // Do something on close
   * });
   * ```
   *
   * @name sidebar
   * @function
   * @param {Object} options An object that will be merged with the default options.
   *
   *  - `speed` (Number): animation speed (default: `200`)
   *  - `side` (String): left|right|top|bottom (default: `"left"`)
   *  - `isClosed` (Boolean): A boolean value indicating if the sidebar is closed or not (default: `false`).
   *  - `close` (Boolean): If `true`, the sidebar will be closed by default.
   *
   * @return {jQuery} The jQuery elements that were selected.
   */
  $.fn.sidebar = function(options) {

    var self = this;
    if (self.length > 1) {
      return self.each(function() {
        $(this).sidebar(options);
      });
    }

    // Width, height
    var width = self.outerWidth();
    var height = self.outerHeight();

    // Defaults
    var settings = $.extend({

      // Animation speed
      speed: 200,

      // Side: left|right|top|bottom
      side: "left",

      // Is closed
      isClosed: false,

      // Should I close the sidebar?
      close: true

    }, options);

    /*!
     *  Opens the sidebar
     *  $([jQuery selector]).trigger("sidebar:open");
     * */
    self.on("sidebar:open", function(ev, data) {
      var properties = {};
      properties[settings.side] = 0;
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = false;
        self.trigger("sidebar:opened");
      });
    });


    /*!
     *  Closes the sidebar
     *  $("[jQuery selector]).trigger("sidebar:close");
     * */
    self.on("sidebar:close", function(ev, data) {
      var properties = {};
      if (settings.side === "left" || settings.side === "right") {
        properties[settings.side] = -self.outerWidth();
      } else {
        properties[settings.side] = -self.outerHeight();
      }
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = true;
        self.trigger("sidebar:closed");
      });
    });

    /*!
     *  Toggles the sidebar
     *  $("[jQuery selector]).trigger("sidebar:toggle");
     * */
    self.on("sidebar:toggle", function(ev, data) {
      if (settings.isClosed) {
        self.trigger("sidebar:open", [data]);
      } else {
        self.trigger("sidebar:close", [data]);
      }
    });

    function closeWithNoAnimation() {
      self.trigger("sidebar:close", [{
        speed: 0
      }]);
    }

    // Close the sidebar
    if (!settings.isClosed && settings.close) {
      closeWithNoAnimation();
    }

    $(window).on("resize", function() {
      if (!settings.isClosed) {
        return;
      }
      closeWithNoAnimation();
    });

    self.data("sidebar", settings);

    return self;
  };

  // Version
  $.fn.sidebar.version = "3.3.2";
})(jQuery);

.sidebar{
  position:fixed;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
<button type="button" class="open">
  open/close sidebar
</button>
  <div class="sidebar right">I am on right!</div>
  <script>
    $(function() {
      $(".sidebar.right").sidebar({
        side: "right"
      });
        $('.open').on('click', function() {
      $(".sidebar").trigger("sidebar:toggle");
    })
    });
  </script>
</body>

</html>

Answer 3

1. include jquery
2. include css

3. jsfiddle run script in window.onload, so the js code in html will run before it. You should delay to run it.

   setTimeout(function(){  
       $(".sidebar.right").sidebar({ side: "right" }).trigger("sidebar:open");  
   },2000);
   

Fixed version: https://jsfiddle.net/qLcwjn4g/2/ (setTimeout is not a good way, just a demo)