Download
User Rating: 4.3/5 ( 2 votes)
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.
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
-
Extensive Callbacks API
-
Click, touch, hover, and keyboard helpers
-
CSS Class Helpers
Source: panels.scotch.io
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script src="../../../dist/scotchPanels.js"></script>
2. HTML
<div id="scotch-panel">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<a href="#" class="toggle-panel"><i class="fa fa-bars"></i></a>
3. JAVASCRIPT
$('#scotch-panel').scotchPanel({
containerSelector: 'body',
direction: 'right',
duration: 300,
transition: 'ease',
clickSelector: '.toggle-panel',
distanceX: '70%',
enableEscapeKey: true
});
4. 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="http://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="http://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) |
Getting Started
Mobile Only
Horizontal
Vertical
Content Helpers
Event Helpers
Styles
Triggers
CSS Class Helpers
Browser Suport
Multiple Panels at Once
Advanced (cool things)
JS Tutorial
