npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-offcanvas

v3.4.7

Published

Easy to use jQuery offcanvas plugin.

Downloads

279

Readme

jQuery.offcanvas

Travis David Dev npm

An easy to use jQuery offcanvas plugin.

This plugin provides an easy way to put content outside of the canvas and reveal it with a click on a button or any desired element. This is a useful pattern for mobile navigations and more.

Demo | Download

Dependencies

As this is a jQuery plugin it depends on the jQuery library v1.7+. For smooth animations Velocity.js is used. Both dependencies are required.

Usage

You can install this module either with npm or download it manually. Include jQuery, Velocity.js and the plugin before the closing body tag:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/velocity-animate/velocity.min.js"></script>
<script src="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.js"></script>

Include the CSS file:

<link rel="stylesheet" href="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.css">

If you are not using npm just adjust the paths to match the file locations.

It's not required to have any specific markup. The plugin handles any positioning itself. The only requirement is a wrapping element around the offcanvas contents.

Initialization

var $el = $("#element").offcanvas();

$(".offcanvas-trigger").on("click", function() {
    $el.offcanvas("toggle");
});

Clicks on the trigger element will toggle the offcanvas element.

Do not try to initialize more than one instance of jQuery.offcanvas on one page!

Options

Options can be set on initialization:

$("#element").offcanvas({
    origin: "right",
    duration: 400
});

You can also set options via data-Attributes, which will overwrite the default value and the value specified on initialization:

<div id="element" data-offcanvas-duration="200" data-offcanvas-easing="ease">
    ...
</div>

classes

Type: object
Default:

{
    container: "offcanvas",
    element: "offcanvas-element",
    inner: "offcanvas-inner",
    open: "offcanvas-open",
    outer: "offcanvas-outer",
    overlay: "offcanvas-overlay"
}

Classes which will be applied to the elements.

If you change class names make sure to update them in the CSS file accordingly.

container

Type: String
Default: body

Page container, which will be animated. Expects a jQuery selector.

coverage

Type: String
Default: 220px

Width of the offcanvas element which will be revealed.

Tip: For better performance avoid using % values.

duration

Type: number
Default: 300

Duration of the animation.

easing

Type: String
Default: ease-in-out

Easing type for show and hide animations. You can use:

For more easing options check the Velocity.js documentation.

effect

Type: String
Default: push

Effect used to transition the offcanvas element into the viewport. Possible values are push and slide-in-over. Check the demos for an impression of the effects.

origin

Type: String
Default: left

Direction the offcanvas element is revealed from. Possible values are left and right.

overlay

Type: boolean
Default: false

Adds an overlay to cover the content of the page. A click anywhere on the overlay will hide the offcanvas.

overlayColor

Type: String
Default: rgba(0, 0, 0, 0.7)

Color of the overlay element. Best suited are rgba values to add a decent looking transparency. You can use rgba(0, 0, 0, 0.7) as starting point to play around. The overlay will be smoothly transitioned into the view.

API

The offcanvas API offers a couple of methods to control the offcanvas element. The methods are called like this:

$("#element").offcanvas("show");

show

Shows the offcanvas element.

hide

Hides the offcanvas element.

toggle

Toggles the offcanvas element.

destroy

Destroys the jQuery.offcanvas instance and reverts all DOM changes.

Events

jQuery.offcanvas fires several events. Simply listen for them with the jQuery.on function. All events are namespaced with offcanvas.

$("#element").on("shown.offcanvas", function() {
    // do stuff when offcanvas is revealed and animation is finished
});

init

Fired once the Plugin is initialized.

show

Fired when the show method is called.

shown

Fired when the show animation finished.

hide

Fired when the hide method is called.

toggle

Fired when the offcanvas gets toggled. Gets fired on both, show and hide methods. The second function argument contains the offcanvas state as boolean.

$("#element").on("toggle.offcanvas", function(event, visible) {
    console.log(visible) // outputs offcanvas state (true or false)
});

hidden

Fired when the hide animation finished.