ScotchPanels.js – Dead Simple Off Canvas JQuery Plugin

Nicholas Cerminara
👁️ 30,064 views
💬 comments

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project. Scotch Panels work from any container so you can put your side navigation on any element you want. It even provides excellent backwards-compatible browser support via a JavaScript fallback. Lastly, there's over 30 stripped down code samples to get you up and running in no time.

Getting Started

The Easy Way

jQuery all the way!

See the Pen Side Menu / Navigation - The Easy Way by Nicholas Cerminara (@ncerminara) on CodePen.

Table of Contents

    The Dev Way

    JavaScript objects for the win!

    See the Pen Side Menu / Navigation - The Dev Way by Nicholas Cerminara (@ncerminara) on CodePen.

    The HTML5 Way

    Using data attributes

    See the Pen Side Menu / Navigation - The HTML5 Way by Nicholas Cerminara (@ncerminara) on CodePen.

    Cool Demos

    Transitions - Different Styles

    See the Pen Transitions - Different Styles by Nicholas Cerminara (@ncerminara) on CodePen.

    Different Directions

    See the Pen Directions by Nicholas Cerminara (@ncerminara) on CodePen.

    Helper Classes (animation)

    See the Pen Helper Classes by Nicholas Cerminara (@ncerminara) on CodePen.

    Multiple Panels on the Same Container

    See the Pen Multiple Panels on the Same Container by Nicholas Cerminara (@ncerminara) on CodePen.

    Custom Off Canvas Slider

    See the Pen Build a Custom Slider by Nicholas Cerminara (@ncerminara) on CodePen.

    Callbacks API

    See the Pen ScotchPanels.js Callbacks API Example by Nicholas Cerminara (@ncerminara) on CodePen.

    Loading Buttons

    See the Pen Off Canvas Loading Buttons Demo by Nicholas Cerminara (@ncerminara) on CodePen.

    Nested Panels

    See the Pen Nested Off Canvas Menus by Nicholas Cerminara (@ncerminara) on CodePen.

    Features

    • Uses CSS3 with JavaScript Fallback
    • Fully Responsive
    • Custom transition styles
    • Completely Customizable with tons of optional settings
    • Lightweight, easy to use, and only one file
    • Cross Browser Support
    • Open Source
    • Choose either custom HTML, images, iframes, or video panels
    • Optionally use HTM5 Data Attributes
    • Off Canvas directions from top, Bottom, left, and right
    • Works from any container or div
    • Click, touch, hover, and keyboard helpers
    • CSS Class Helpers

    Getting Started The Easy Way

    jQuery for the Win!

    Step 1: Add scotchPanels.js

    After jQuery, add the scotchPanels.js file.

    <script src="http://example.com/js/scotchPanels.js">

    Step 2: Pick the Container

    Decide on the container that you want your Panel to come out of. Try to pick a container that doesn't have any padding in the direction of where the Panel will be coming out of.

    Step 3: Add Your Panel's Markup inside of that Container

    You'll want to add this markup inside of that container. If you are building a side navigation, put this directly below the opening body tag. If you want your panel inside of a custom div or wrapper, put it inside of that div.

    <div id="panel-example">
        <h2>Whatever you want in your panel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, blanditiis.</p>
    </div>

    Step 3: Add a button to toggle the Panel

    This demo is showing how to create a click event, but you can tie opening and closing toggles to whatever events you want.

    <a href="#" class="toggle-panel">Toggle Panel</a>

    Step 4: Initialize and Configure

    In either a JavaScript file or inline, initalize the Panel. This has to be below the scotchPanels.js file. Some of the following settings below are defaults, and are only added for demonstration purposes.

    $('#panel-example').scotchPanel({
        containerSelector: 'body', // As a jQuery Selector
        direction: 'left', // Make it toggle in from the left
        duration: 300, // Speed in ms how fast you want it to be
        transition: 'ease', // CSS3 transition type: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(P1x,P1y,P2x,P2y)
        clickSelector: '.toggle-panel', // Enables toggling when clicking elements of this class
        distanceX: '70%', // Size fo the toggle
        enableEscapeKey: true // Clicking Esc will close the panel
    });

    Getting Started The Dev Way

    It's all about JavaScript Objects

    Step 1: Add scotchPanels.js

    Feel free to use a front-end pakage manager like Bower.

    <script src="http://example.com/js/scotchPanels.js">

    Step 2: Add Your Panel's Markup

    Make sure this is inside of the container you want this to slide out of.

    <div id="panel-example">
        <h2>Whatever you want in your panel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, blanditiis.</p>
    </div>

    Step 3: Initialize, configure, and return

    This is very similar to the easy way, except you'll be returning the function as an object to be able to integrate into your front-end code and logic.

    var panelExample = $('#panel-example').scotchPanel({
        containerSelector: 'body', // Make this appear on the entire screen
        direction: 'left', // Make it toggle in from the left
        duration: 300, // Speed in ms how fast you want it to be
        transition: 'ease', // CSS3 transition type: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(P1x,P1y,P2x,P2y)
        clickSelector: '.toggle-panel', // Enables toggling when clicking elements of this class
        distanceX: '70%', // Size fo the toggle
        enableEscapeKey: true // Clicking Esc will close the panel
    });

    Step 4: Do dev things

    You can now open, close, and toggle the panel however you want. You have full control to tie it to whatever events you want.

    panelExample.open() // Opens the Panel
    panelExample.toggle() // Toggles the Panel
    panelExample.close() // Closes the Panel
    

    Getting Started the HTML5 Way

    It's all about Data Attributes

    Step 1: Add scotchPanels.js

    After jQuery, add the scotchPanels.js file.

    <script src="http://example.com/js/scotchPanels.js">

    Step 2: Add Your Panel's Markup with HTML5 Data Attribtues

    Add the configuration options as data-attributes to your markup

    <div id="lefty" class="panelize-meeeee" data-containerSelector="body" data-direction="left" data-clickSelector=".toggle-panel-1">
        <h2>Whatever you want in your panel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, blanditiis.</p>
    </div>
    
    <div id="righty" class="panelize-meeeee" data-containerSelector="body" data-direction="right" data-clickSelector=".toggle-panel-2">
        <h2>Whatever you want in your panel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, blanditiis.</p>
    </div>

    Step 3: Add Toggle Buttons

    Or other events to toggle the Scotch Panels.

    <a href="#" class="toggle-panel-1">Toggle Panel 1</a>
    <a href="#" class="toggle-panel-2">Toggle Panel 2</a>

    Step 4: Initialize and Configure

    // Minimum Required Initiation of Panel
    /* $('.panlize-meeeee').scotchPanel(); */
    
    // Combination of Data Attributes and Options
    $('.panelize-meeeee').scotchPanel({
        direction: 'top', // Will be overwritten by the Data Attributes
        duration: 150 // Will apply to both
    });
    
    

    Options

    General

    Setting Default Options HTML5 Data Attribute
    containerSelector body Any jQuery selector (e.g.: #some-id, .a-class, element). Selects the nearest parent. data-containerSelector="body"
    type html html, iframe, video, image data-type="html"

    Styles

    Setting Default Options HTML5 Data Attribute
    direction top top, left, right, bottom data-direction="top"
    duration 300 Any amount in ms data-duration="300"
    transition ease linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(P1x,P1y,P2x,P2y) data-transition="ease"

    Browser Support

    Setting Default Options HTML5 Data Attribute
    easingPluginTransition easeInCirc Must include jQuery Easing data-easingPluginTransition="easeInCirc"
    useCSS true false / true data-useCSS="true"
    useEasingPlugin false Must set this to true when using jQuery Easing data-useEasingPlugin="true"

    Image Options

    Setting Default Options HTML5 Data Attribute
    imageURL false Type must be set to "image": false / true data-imageURL="https://scotch.io/double-rainbow.jpeg"

    Iframe Options

    Setting Default Options HTML5 Data Attribute
    iframeLoadOnOpen true Type must be set to "iframe": false / true data-iframeLoadOnOpen="true"
    iframeURL false Type must be set to "iframe": http://example.com data-iframeURL="https://scotch.io"

    Video Options

    Setting Default Options HTML5 Data Attribute
    autoPlayVideo true Type must be set to "video": false / true data-autoPlayVideo="true"
    youtubeID false Type must be set to "video": YouTube Video ID data-youtubeID="ztxuxc1l0Lo"
    youTubeTheme light Type must be set to "video": light / dark data-youTubeTheme="light"

    TranslateX Options

    Setting Default Options HTML5 Data Attribute
    distanceX 70% Percentage or fixed width in pixels data-distanceX="70%"

    TranslateY Options

    Setting Default Options HTML5 Data Attribute
    forceMinHeight false false / true data-forceMinHeight="false"
    minHeight 200px Any height data-minHeight="200px"

    Triggers

    Setting Default Options HTML5 Data Attribute
    closeAfter 0 Any amount in ms data-closeAfter="0"
    startOpened false false / true data-startOpened="false"
    startOpenedDelay 0 Any amount in ms data-startOpenedDelay="0"

    Event Helpers

    Setting Default Options HTML5 Data Attribute
    clickSelector false Any jQuery selector (e.g.: #some-id, .a-class, element) data-clickSelector=".toggle-panel"
    enableEscapeKey true false / true data-enableEscapeKey="true"
    hoverSelector false Any jQuery selector (e.g.: #some-id, .a-class, element) data-hoverSelector=".toggle-panel"
    touchSelector false Any jQuery selector (e.g.: #some-id, .a-class, element) data-touchSelector=".toggle-panel"

    Callbacks API

    Setting Default Options
    beforePanelOpen function() {} Any function or code you want.
    afterPanelOpen function() {} Any function or code you want.
    beforePanelClose function() {} Any function or code you want.
    afterPanelClose function() {} Any function or code you want.

    Public Functions / Methods

    Method Description
    open() Opens the Scotch Panel
    close() Closes the Scotch Panel
    toggle() Toggles the Scotch Panel (open or closed)
            <pre><code>        &lt;div class="tile"&gt;
          &lt;div class="tile-content"&gt;
            &lt;h2&gt;
              Licenses
            &lt;/h2&gt;
    
            &lt;p class="lead"&gt;
              &lt;strong&gt;TL:DR;&lt;/strong&gt; If you or your company is making money from the project you want to use this with, please buy a license.
            &lt;/p&gt;
    
            &lt;table class="table table-bordered table-striped table-hover"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;
                    Type
                  &lt;/th&gt;
    
                  &lt;th&gt;
                    Cost
                  &lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
    
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    Personal
                  &lt;/td&gt;
    
                  &lt;td&gt;
                    &lt;strong&gt;$0 (free)&lt;/strong&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
    
                &lt;tr&gt;
                  &lt;td&gt;
                    Commercial (1 site)
                  &lt;/td&gt;
    
                  &lt;td&gt;
                    $15
                  &lt;/td&gt;
                &lt;/tr&gt;
    
                &lt;tr&gt;
                  &lt;td&gt;
                    Commercial (Unlimited Sites)
                  &lt;/td&gt;
    
                  &lt;td&gt;
                    $60
                  &lt;/td&gt;
                &lt;/tr&gt;
    
                &lt;tr&gt;
                  &lt;td&gt;
                    Extended License (reselling)
                  &lt;/td&gt;
    
                  &lt;td&gt;
                    Contact me: &lt;a href="mailto:nick@scotch.io"&gt;nick@scotch.io&lt;/a&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
    
            &lt;p&gt;
              &lt;a href="http://shop.scotch.io/collections/frontpage/products/scotchpanels-js-commercial-license" class="btn btn-block btn-lg btn-danger"&gt;Purchase a License&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;