Panels

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
});