iptools-jquery-offcanvas

Simple CSS3 animated offcanvas.

Related

• native js version

legacy

• 0.0.2 documentation

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 Interactive Pioneers GmbH. Licenced under GPLv3.