Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/interactive-pioneers/iptools-jquery-offcanvas
Simple CSS3 animated offcanvas.
https://github.com/interactive-pioneers/iptools-jquery-offcanvas
animation iptools-jquery-offcanvas jquery offcanvas
Last synced: 13 days ago
JSON representation
Simple CSS3 animated offcanvas.
- Host: GitHub
- URL: https://github.com/interactive-pioneers/iptools-jquery-offcanvas
- Owner: interactive-pioneers
- License: gpl-3.0
- Created: 2016-01-10T16:51:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-11T12:03:20.000Z (over 7 years ago)
- Last Synced: 2024-12-17T22:49:28.623Z (23 days ago)
- Topics: animation, iptools-jquery-offcanvas, jquery, offcanvas
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 2
- Watchers: 6
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# iptools-jquery-offcanvas [](https://travis-ci.org/interactive-pioneers/iptools-jquery-offcanvas) [](https://badge.fury.io/js/iptools-jquery-offcanvas) [](http://badge.fury.io/bo/iptools-jquery-offcanvas)
Simple CSS3 animated offcanvas.
## Related
- [native js version](https://github.com/interactive-pioneers/iptools-offcanvas)
## legacy
- 0.0.2 [documentation](https://github.com/interactive-pioneers/iptools-jquery-offcanvas/blob/master/doc/0.0.2/README.md)
## 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
```html
open
close
toggle
content
X
$(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');
});
});
```
## Licence
Copyright © 2015-2017 Interactive Pioneers GmbH. Licenced under [GPL-3](LICENSE).