TL:DR; If you or your company is making money from the project you want to use this with, please buy a license.
Type | Cost |
---|---|
Personal | $0 (free) |
Commercial (1 site) | $15 |
Commercial (Unlimited Sites) | $60 |
Extended License (reselling) | Contact me: nick@scotch.io |
with any type content
You can have the Scotch Panel come out of any container that you choose. Don't forget to specify your container when initiating otherwise it will default to the body
tag.
It's best practice to just always specify the container. It will always default to the nearest parent of the selector you use.
Specify a transition and a speed to customize your panel. The default values our my personal favorite of 300ms and the "ease" CSS3 transition.
Stripped and naked so you it's easier for you to repurpose
After jQuery, add the scotchPanels.js file.
<script src="http://example.com/js/scotchPanels.js">
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.
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>
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>
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
});
Feel free to use a front-end pakage manager like Bower.
<script src="http://example.com/js/scotchPanels.js">
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>
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
});
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
After jQuery, add the scotchPanels.js file.
<script src="http://example.com/js/scotchPanels.js">
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>
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>
// 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
});
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" |
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" |
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" |
Setting | Default | Options | HTML5 Data Attribute |
---|---|---|---|
imageURL | false | Type must be set to "image": false / true | data-imageURL="https://scotch.io/double-rainbow.jpeg" |
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" |
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" |
Setting | Default | Options | HTML5 Data Attribute |
---|---|---|---|
distanceX | 70% | Percentage or fixed width in pixels | data-distanceX="70%" |
Setting | Default | Options | HTML5 Data Attribute |
---|---|---|---|
forceMinHeight | false | false / true | data-forceMinHeight="false" |
minHeight | 200px | Any height | data-minHeight="200px" |
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" |
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" |
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. |
Method | Description |
---|---|
open() | Opens the Scotch Panel |
close() | Closes the Scotch Panel |
toggle() | Toggles the Scotch Panel (open or closed) |