Skip to content

interactive-pioneers/iptools-jquery-offcanvas

Repository files navigation

iptools-jquery-offcanvas Build Status npm version Bower version

Simple CSS3 animated offcanvas.

Related

legacy

Features

  • Displays content inside an offcanvas from the top, right, bottom or left.
  • Multiple instances at once.
  • Static, instance is open on page load.
  • CSS3 transitions and animations.

Options

All options are optional.

Name type default value values description
baseClass string offcanvas valid css class string base css class
type string left top, right, bottom, left canvas position
single boolean true single mode, closes all other canvases
closeOnClickOutside boolean false close canvas on click outside
static boolean false open after initialization
staticCloseCondition function function() { return true; } a function returning either true or false close condition for static canvas

Methods

Method Parameter Return Description
getSettings object retrieve settings
isActive boolean returns if canvas is active (open)
toggle boolean not required. open (true), close (false) or toggle (leave empty)
destroy destroy offcanvas

Events

Event pattern: {eventName}.{elementId}@iptOffCanvas

Event Element Description
initialized.custom@iptOffCanvas this.$element Emitted when canvas is ready to use.
opened.custom@iptOffCanvas this.$element Emitted when the canvas opens.
closed.custom@iptOffCanvas this.$element Emitted when the canvas closes.

Requirements

  • jQuery >=1.11.3 <4

Example

<button data-offcanvas-open="custom">open</button>
<button data-offcanvas-close="custom">close</button>
<button data-offcanvas-toggle="custom">toggle</button>

<section id="custom" class="offcanvas" style="padding:50px;background-color:rgba(0,0,0,0.5);">
  <p>content</p>
  <button data-offcanvas-close="custom">X</button>
</section>

<link rel="stylesheet" href="dist/iptools-jquery-offcanvas.css" type="text/css">
<script src="dist/iptools-jquery-offcanvas.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    // bind
    $('#custom').iptOffCanvas({
      baseClass: 'offcanvas',
      closeOnClickOutside: false,
      single: true,
      static: false,
      staticCloseCondition: function() { return true; },
      type: 'right'
    });

    // retrieve settings
    var settings = $('#custom').data(pluginName).getSettings();

    // check if active (open)
    var isActive = $('#custom').data(pluginName).isActive();

    // open, close or toggle
    $('#custom').data(pluginName).toggle(true); // true for open, false to close, leave empty to toggle

    // destroy canvas
    $('#custom').data(pluginName).destroy();

    // example event listener
    $('#custom').on('opened.custom@iptOffCanvas', function() {
      console.log('canvas opened');
    });

  });
</script>

Licence

Copyright © 2015-2017 Interactive Pioneers GmbH. Licenced under GPL-3.