├── .gitignore ├── Gruntfile.js ├── README.md ├── bower.json ├── dist ├── scotchPanels.js └── scotchPanels.min.js ├── index.php ├── package.json ├── scotchPanels.jquery.json ├── src └── scotchPanels.js └── website ├── demos ├── callbacks │ ├── index.html │ ├── power.js │ └── style.css ├── click-helper │ ├── index.html │ ├── power.js │ └── style.css ├── custom-slider │ ├── index.html │ ├── power.js │ └── style.css ├── directions │ ├── index.html │ ├── power.js │ └── style.css ├── durations │ ├── index.html │ ├── power.js │ └── style.css ├── helper-classes │ ├── index.html │ ├── power.js │ └── style.css ├── horizontal-fixed-width │ ├── index.html │ ├── power.js │ └── style.css ├── horizontal-percentage-width │ ├── index.html │ ├── power.js │ └── style.css ├── hover-helper │ ├── index.html │ ├── power.js │ └── style.css ├── html-example │ ├── index.html │ ├── power.js │ └── style.css ├── iframe-example-no-loader │ ├── index.html │ ├── power.js │ └── style.css ├── iframe-example-with-loader │ ├── index.html │ ├── power.js │ └── style.css ├── javascript-only-with-easing │ ├── index.html │ ├── power.js │ └── style.css ├── javascript-only │ ├── index.html │ ├── power.js │ └── style.css ├── loading-buttons │ ├── index.html │ ├── power.js │ └── style.css ├── multiple-panels-different-styles │ ├── index.html │ ├── power.js │ └── style.css ├── multiple-panels-same-container │ ├── index.html │ ├── power.js │ └── style.css ├── multiple-panels │ ├── index.html │ ├── power.js │ └── style.css ├── nested-panels │ ├── index.html │ ├── power.js │ └── style.css ├── photo-example │ ├── index.html │ ├── power.js │ └── style.css ├── side-menu-dev-way │ ├── index.html │ ├── power.js │ └── style.css ├── side-menu-easy-way │ ├── index.html │ ├── power.js │ └── style.css ├── side-menu-html5-way │ ├── index.html │ ├── power.js │ └── style.css ├── side-menu-mobile-only-with-css │ ├── index.html │ ├── power.js │ └── style.css ├── side-menu-mobile-only-with-js │ ├── index.html │ ├── power.js │ └── style.css ├── touch-helper │ ├── index.html │ ├── power.js │ └── style.css ├── transitions │ ├── index.html │ ├── power.js │ └── style.css ├── trigger-close-after-x │ ├── index.html │ ├── power.js │ └── style.css ├── trigger-example │ ├── index.html │ ├── power.js │ └── style.css ├── trigger-with-cookie │ ├── index.html │ ├── power.js │ └── style.css ├── vertical-min-height │ ├── index.html │ ├── power.js │ └── style.css └── video-example │ ├── index.html │ ├── power.js │ └── style.css ├── img ├── about-chris.jpeg ├── about-holly.jpeg ├── about-me.jpeg └── scotch-logo.png ├── index.html ├── power.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | Gemfile.lock 2 | test/dest 3 | *.gem 4 | pkg/ 5 | *.swp 6 | *~ 7 | _site/ 8 | .bundle/ 9 | .DS_Store 10 | bbin/ 11 | sftp-config* 12 | _site 13 | .htaccess 14 | private-* 15 | __article/ 16 | node_modules 17 | _production 18 | all.min.css 19 | .sublime-* 20 | website/dist/ 21 | *.idea 22 | /.idea 23 | .node-version 24 | .sass-cache/ 25 | bower_components -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | concat: { 8 | options: { 9 | banner: '/*\n* <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n' + 10 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 11 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %> \n*/\n' 12 | }, 13 | build: { 14 | src: 'src/scotchPanels.js', 15 | dest: 'dist/scotchPanels.js' 16 | } 17 | }, 18 | 19 | // configure jshint to validate js files ----------------------------------- 20 | jshint: { 21 | options: { 22 | reporter: require('jshint-stylish') 23 | }, 24 | all: ['src/*.js'] 25 | }, 26 | 27 | // configure uglify to minify js files ------------------------------------- 28 | uglify: { 29 | options: { 30 | banner: '/*\n* <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n' + 31 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 32 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %> \n*/\n' 33 | }, 34 | build: { 35 | files: { 36 | 'dist/scotchPanels.min.js': 'dist/scotchPanels.js' 37 | } 38 | } 39 | }, 40 | 41 | // configure watch to auto update ------------------------------------------ 42 | watch: { 43 | scripts: { 44 | files: 'src/*.js', 45 | tasks: ['concat', 'uglify'] 46 | } 47 | } 48 | 49 | }); 50 | 51 | grunt.loadNpmTasks('grunt-contrib-jshint'); 52 | grunt.loadNpmTasks('grunt-contrib-concat'); 53 | grunt.loadNpmTasks('grunt-contrib-uglify'); 54 | grunt.loadNpmTasks('grunt-contrib-watch'); 55 | 56 | grunt.registerTask('default', ['concat', 'uglify']); 57 | 58 | }; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scotch-panels", 3 | "version": "1.0.3", 4 | "authors": [ 5 | "Nick Cerminara " 6 | ], 7 | "homepage": "https://github.com:scotch-io/scotch-panels", 8 | "main": [ 9 | "./dist/scotchPanels.min.js" 10 | ], 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "jquery": ">=1.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scotchPanels", 3 | "version": "1.0.3", 4 | "description": "scotchPanels.js is a jQuery plugin for easily creating [off canvas](http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms) 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.", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/scotch-io/scotch-panels" 11 | }, 12 | "author": "Nicholas Cerminara ", 13 | "bugs": { 14 | "url": "https://github.com/scotch-io/scotch-panels/issues" 15 | }, 16 | "homepage": "https://github.com/scotch-io/scotch-panels", 17 | "devDependencies": { 18 | "grunt": "^0.4.5", 19 | "grunt-contrib-jshint": "^0.10.0", 20 | "grunt-contrib-uglify": "^0.5.1", 21 | "grunt-contrib-watch": "^0.6.1", 22 | "jshint-stylish": "^0.4.0", 23 | "grunt-contrib-concat": "~0.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scotchPanels.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scotchPanels", 3 | "title": "Scotch Panels", 4 | "description": "Dead simple Off Canvas jQuery Plugin.", 5 | "keywords": [ 6 | "off-canvas", 7 | "css3", 8 | "mobile-menu", 9 | "mobile-nav", 10 | "side-nav", 11 | "side-menu" 12 | ], 13 | "version": "1.0.3", 14 | "author": { 15 | "name": "Nicholas Cerminara", 16 | "url": "https://github.com/scotch-io/scotch-panels" 17 | }, 18 | "maintainers": [ 19 | { 20 | "name": "Nicholas Cerminara", 21 | "email": "nick@scotch.io", 22 | "url": "https://github.com/scotch-io" 23 | } 24 | ], 25 | "licenses": [ 26 | { 27 | "url": "http://shop.scotch.io/collections/frontpage/products/scotchpanels-js-commercial-license" 28 | } 29 | ], 30 | "bugs": "https://github.com/scotch-io/Scotch-Panels/issues", 31 | "homepage": "http://panels.scotch.io", 32 | "docs": "http://panels.scotch.io", 33 | "download": "https://github.com/scotch-io/scotch-panels/archive/master.zip", 34 | "dependencies": { 35 | "jquery": ">=1.7" 36 | } 37 | } -------------------------------------------------------------------------------- /website/demos/callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

Callbacks API

91 |

Need to get real custom?

92 | 
 93 |                 
 94 |                 $('#scotch-panel').scotchPanel({
 95 | 
 96 |                     beforePanelOpen: function() {
 97 |                         alert('Before Panel Opened');
 98 |                     },
 99 |                     afterPanelOpen: function() {
100 |                         alert('After Panel Opened');
101 |                     },
102 |                     beforePanelClose: function() {
103 |                         alert('Before Panel Closed');
104 |                     },
105 |                     afterPanelClose: function() {
106 |                         alert('After Panel Opened');
107 |                     },
108 | 
109 |                     containerSelector: 'body',
110 |                     direction: 'right',
111 |                     clickSelector: '.toggle-panel'
112 |                 });
113 |                 
114 |
115 |
116 |
117 |
118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /website/demos/callbacks/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | beforePanelOpen: function() { 6 | alert('Before Panel Opened'); 7 | }, 8 | afterPanelOpen: function() { 9 | alert('After Panel Opened'); 10 | }, 11 | beforePanelClose: function() { 12 | alert('Before Panel Closed'); 13 | }, 14 | afterPanelClose: function() { 15 | alert('After Panel Opened'); 16 | }, 17 | 18 | containerSelector: 'body', 19 | direction: 'right', 20 | clickSelector: '.toggle-panel' 21 | }); 22 | 23 | }); -------------------------------------------------------------------------------- /website/demos/callbacks/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/click-helper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | Close Me 69 | 75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |

Click Helper

92 |

You can use this just like any other jQuery selector to bind click events that toggle the Panel to any element.

93 | 
 94 |                 
 95 |                 $('#scotch-panel').scotchPanel({
 96 | 
 97 |                     clickSelector: '.toggle-panel, #unique-toggle',
 98 | 
 99 |                     containerSelector: 'body',
100 |                     direction: 'right',
101 |                     duration: 300,
102 |                     transition: 'ease',
103 |                     distanceX: '70%',
104 |                     enableEscapeKey: true
105 |                 });
106 |                 
107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 |
116 | .toggle-panel 117 | .toggle-panel 118 | .toggle-panel 119 | .toggle-panel 120 |
121 |
122 | #unique-toggle 123 |
124 |
125 |
126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /website/demos/click-helper/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | clickSelector: '.toggle-panel, #unique-toggle', 6 | 7 | containerSelector: 'body', 8 | direction: 'right', 9 | duration: 300, 10 | transition: 'ease', 11 | distanceX: '70%', 12 | enableEscapeKey: true 13 | }); 14 | 15 | }); -------------------------------------------------------------------------------- /website/demos/click-helper/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | section { 38 | padding-bottom: 5000px; 39 | text-align: center; 40 | } 41 | 42 | 43 | 44 | 45 | /*==================================== 46 | = PANEL STYLES = 47 | ====================================*/ 48 | #scotch-panel { 49 | background: #444;; 50 | } 51 | #scotch-panel ul { 52 | list-style: none; 53 | padding: 0; 54 | margin: 0; 55 | text-align: center; 56 | } 57 | #scotch-panel ul li a { 58 | display: block; 59 | width: 100%; 60 | height: 50px; 61 | line-height: 50px; 62 | background: transparent; 63 | color: #fff; 64 | } 65 | #scotch-panel ul li a:hover { 66 | background: #555; 67 | } 68 | #scotch-panel .btn { 69 | margin: 8px; 70 | } 71 | 72 | -------------------------------------------------------------------------------- /website/demos/custom-slider/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | 4 | /*================================== 5 | = LEFT SLIDE = 6 | ==================================*/ 7 | var leftPanel = $('.left-panel').scotchPanel({ 8 | type: 'image', 9 | containerSelector: '#slider', 10 | duration: 500, 11 | transition: 'ease', 12 | distanceX: '100%', 13 | direction: 'left' 14 | }); 15 | $('.open-left-panel').click(function() { 16 | leftPanel.open(); 17 | return false; 18 | }); 19 | $('.close-left-panel').click(function() { 20 | leftPanel.close(); 21 | return false; 22 | }); 23 | 24 | 25 | /*=================================== 26 | = RIGHT SLIDE = 27 | ===================================*/ 28 | var rightPanel = $('.right-panel').scotchPanel({ 29 | type: 'image', 30 | containerSelector: '#slider', 31 | duration: 500, 32 | transition: 'ease', 33 | distanceX: '100%', 34 | direction: 'right' 35 | }); 36 | $('.open-right-panel').click(function() { 37 | rightPanel.open(); 38 | return false; 39 | }); 40 | $('.close-right-panel').click(function() { 41 | rightPanel.close(); 42 | return false; 43 | }); 44 | 45 | }); -------------------------------------------------------------------------------- /website/demos/custom-slider/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | section { 11 | margin-bottom: 5000px; 12 | } 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | /*==================================== 21 | = SLIDER STUFF = 22 | ====================================*/ 23 | .scotch-panel { 24 | display: block; 25 | height: 400px; 26 | } 27 | .center-panel { 28 | background-image: url('https://panels.scotch.io/img/about-me.jpeg'); 29 | -moz-background-size: cover; 30 | -ms-background-size: cover; 31 | -webkit-background-size: cover; 32 | -o-background-size: cover; 33 | background-size: cover; 34 | background-position: 50% 0px; 35 | background-repeat: no-repeat; 36 | } 37 | .scotch-panel p { 38 | position: absolute; 39 | top: 75%; 40 | background: #000; 41 | background: rgba(0, 0, 0, 0.75); 42 | margin: 0; 43 | color: #fff; 44 | padding: 15px; 45 | font-size: 20px; 46 | } 47 | .slider-buttons { 48 | width: 100%; 49 | max-width: 500px; 50 | margin: 0 auto; 51 | display: block; 52 | text-align: center; 53 | } 54 | .slider-buttons a { 55 | display: inline-block; 56 | height: 20px; 57 | width: 25%; 58 | text-indent: -99999999em; 59 | background: #777; 60 | margin: 2%; 61 | } 62 | .slider-buttons a:hover { 63 | background: #333; 64 | } -------------------------------------------------------------------------------- /website/demos/directions/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.one-of-many').scotchPanel({ 4 | clickSelector: '.toggle-panels', 5 | containerSelector: '.panel-container', // Selects the nearest matching container 6 | }); 7 | 8 | }); -------------------------------------------------------------------------------- /website/demos/directions/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | 38 | 39 | section { 40 | padding-bottom: 5000px; 41 | } 42 | .panel-container { 43 | display: block; 44 | width: 100%; 45 | background: #46AAF2; 46 | text-align: center; 47 | margin-bottom: 50px; 48 | } 49 | .panel-container h2 { 50 | margin: 0; 51 | padding: 50px; 52 | color: #fff; 53 | } 54 | .panel-container p { 55 | padding-bottom: 50px; 56 | margin: 0; 57 | } 58 | .one-of-many { 59 | background: #777; 60 | } 61 | .toggle-panels { 62 | margin: 40px 0; 63 | } -------------------------------------------------------------------------------- /website/demos/durations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 |
71 |

Durations - Different Speeds

72 |

Any speed you would like.

73 | 
 74 |                 
 75 |                 $('.scotch-panel').scotchPanel({
 76 |                     containerSelector: 'section',
 77 |                     clickSelector: '.all-same-time',
 78 |                     direction: 'left',
 79 |                     distanceX: '100%',
 80 |                     enableEscapeKey: true
 81 |                 });
 82 |                 
 83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 | 91 | All Same Time 92 | 93 |
94 |
95 |

0ms

96 |
97 |

0ms

98 |
99 | 100 |
101 |
102 |

200ms

103 |
104 |

200ms

105 |
106 | 107 |
108 |
109 |

300ms

110 |
111 |

300ms

112 |
113 | 114 |
115 |
116 |

500ms

117 |
118 |

500ms

119 |
120 | 121 |
122 |
123 |

1000ms

124 |
125 |

1000ms

126 |
127 | 128 |
129 |
130 |

5000ms

131 |
132 |

5000ms

133 |
134 | 135 | 136 | 137 |
138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /website/demos/durations/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.scotch-panel').scotchPanel({ 4 | containerSelector: 'section', 5 | clickSelector: '.all-same-time', 6 | direction: 'left', 7 | distanceX: '100%', 8 | enableEscapeKey: true 9 | }); 10 | 11 | }); -------------------------------------------------------------------------------- /website/demos/durations/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | body { 5 | padding-bottom: 500px; 6 | } 7 | a { 8 | text-decoration: none !important; 9 | -webkit-transition: all 225ms ease; 10 | -moz-transition: all 225ms ease; 11 | transition: all 225ms ease; 12 | } 13 | header { 14 | position: relative; 15 | background: #222; 16 | height: 50px; 17 | } 18 | header a { 19 | color: #777; 20 | } 21 | header a:hover { 22 | color: #fff; 23 | } 24 | header .logo { 25 | display: inline-block; 26 | height: 50px; 27 | line-height: 50px; 28 | } 29 | header .toggle-panel { 30 | position: absolute; 31 | top: 0; 32 | right: 0; 33 | font-size: 25px; 34 | width: 50px; 35 | height: 50px; 36 | line-height: 50px; 37 | text-align: center; 38 | background: #333; 39 | } 40 | 41 | 42 | 43 | 44 | main { 45 | margin: 100px 0; 46 | } 47 | section { 48 | background: #efefef; 49 | text-align: center; 50 | cursor: pointer; 51 | margin: 15px 0; 52 | } 53 | section h2 { 54 | margin: 0; 55 | padding: 10px 0; 56 | } 57 | 58 | 59 | 60 | /*==================================== 61 | = PANEL STYLES = 62 | ====================================*/ 63 | .scotch-panel { 64 | background: #444;; 65 | } 66 | .scotch-panel h2 { 67 | color: #fff; 68 | } 69 | -------------------------------------------------------------------------------- /website/demos/helper-classes/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | direction: 'right', 5 | duration: 200, 6 | transition: 'ease', 7 | clickSelector: '.toggle-panel', 8 | distanceX: '220px' 9 | }); 10 | 11 | }); -------------------------------------------------------------------------------- /website/demos/helper-classes/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | -webkit-transform: translateZ(0); 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | background: #444; 56 | height: 100%; 57 | } 58 | .scotch-is-showing #scotch-panel ul li { 59 | display: none; 60 | } 61 | .scotch-is-showing #scotch-panel ul li { 62 | display: block; 63 | -webkit-animation-duration: 1s; 64 | animation-duration: 1s; 65 | -webkit-animation-fill-mode: both; 66 | animation-fill-mode: both; 67 | -webkit-animation-name: rubberBand; 68 | animation-name: rubberBand; 69 | } 70 | #scotch-panel ul li a { 71 | display: block; 72 | width: 100%; 73 | height: 50px; 74 | line-height: 50px; 75 | background: transparent; 76 | color: #fff; 77 | } 78 | #scotch-panel ul li a:hover { 79 | background: #555; 80 | } 81 | 82 | 83 | 84 | @-webkit-keyframes rubberBand { 85 | 0% { 86 | -webkit-transform: scale3d(1, 1, 1); 87 | transform: scale3d(1, 1, 1); 88 | } 89 | 90 | 30% { 91 | -webkit-transform: scale3d(1.55, 0.75, 1); 92 | transform: scale3d(1.55, 0.75, 1); 93 | } 94 | 95 | 40% { 96 | -webkit-transform: scale3d(0.25, 1.25, 1); 97 | transform: scale3d(0.25, 1.25, 1); 98 | } 99 | 100 | 50% { 101 | -webkit-transform: scale3d(1.15, 0.85, 1); 102 | transform: scale3d(1.15, 0.85, 1); 103 | } 104 | 105 | 65% { 106 | -webkit-transform: scale3d(.95, 1.05, 1); 107 | transform: scale3d(.95, 1.05, 1); 108 | } 109 | 110 | 75% { 111 | -webkit-transform: scale3d(1.05, .95, 1); 112 | transform: scale3d(1.05, .95, 1); 113 | } 114 | 115 | 100% { 116 | -webkit-transform: scale3d(1, 1, 1); 117 | transform: scale3d(1, 1, 1); 118 | } 119 | } 120 | 121 | @keyframes rubberBand { 122 | 0% { 123 | -webkit-transform: scale3d(1, 1, 1); 124 | -ms-transform: scale3d(1, 1, 1); 125 | transform: scale3d(1, 1, 1); 126 | } 127 | 128 | 30% { 129 | -webkit-transform: scale3d(1.55, 0.75, 1); 130 | -ms-transform: scale3d(1.55, 0.75, 1); 131 | transform: scale3d(1.55, 0.75, 1); 132 | } 133 | 134 | 40% { 135 | -webkit-transform: scale3d(0.25, 1.25, 1); 136 | -ms-transform: scale3d(0.25, 1.25, 1); 137 | transform: scale3d(0.25, 1.25, 1); 138 | } 139 | 140 | 50% { 141 | -webkit-transform: scale3d(1.15, 0.85, 1); 142 | -ms-transform: scale3d(1.15, 0.85, 1); 143 | transform: scale3d(1.15, 0.85, 1); 144 | } 145 | 146 | 65% { 147 | -webkit-transform: scale3d(.95, 1.05, 1); 148 | -ms-transform: scale3d(.95, 1.05, 1); 149 | transform: scale3d(.95, 1.05, 1); 150 | } 151 | 152 | 75% { 153 | -webkit-transform: scale3d(1.05, .95, 1); 154 | -ms-transform: scale3d(1.05, .95, 1); 155 | transform: scale3d(1.05, .95, 1); 156 | } 157 | 158 | 100% { 159 | -webkit-transform: scale3d(1, 1, 1); 160 | -ms-transform: scale3d(1, 1, 1); 161 | transform: scale3d(1, 1, 1); 162 | } 163 | } -------------------------------------------------------------------------------- /website/demos/horizontal-fixed-width/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

Horizontal - Fixed Width

91 |

This is a fixed width example. Be careful with responsive while doing large widths.

92 | 
 93 |                 
 94 |                 $('#scotch-panel').scotchPanel({
 95 |                     containerSelector: 'body',
 96 |                     direction: 'right',
 97 |                     duration: 300,
 98 |                     transition: 'ease',
 99 |                     clickSelector: '.toggle-panel',
100 |                     distanceX: '200px',
101 |                     enableEscapeKey: true
102 |                 });
103 |                 
104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /website/demos/horizontal-fixed-width/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | clickSelector: '.toggle-panel', 9 | distanceX: '200px', 10 | enableEscapeKey: true 11 | }); 12 | 13 | }); -------------------------------------------------------------------------------- /website/demos/horizontal-fixed-width/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/horizontal-percentage-width/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 55 | 64 | 65 | 66 | 67 | 68 |
69 | 75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |

Horizontal - Percentage Width

92 |

Default is 70% but you can specify whatever you want. Here's 50%.

93 | 
 94 |                 
 95 |                 $('#scotch-panel').scotchPanel({
 96 |                     containerSelector: 'body',
 97 |                     direction: 'right',
 98 |                     duration: 300,
 99 |                     transition: 'ease',
100 |                     clickSelector: '.toggle-panel',
101 |                     distanceX: '50%',
102 |                     enableEscapeKey: true
103 |                 });
104 |                 
105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /website/demos/horizontal-percentage-width/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | clickSelector: '.toggle-panel', 9 | distanceX: '50%', 10 | enableEscapeKey: true 11 | }); 12 | 13 | }); -------------------------------------------------------------------------------- /website/demos/horizontal-percentage-width/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/hover-helper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | Close Me 69 | 75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |

Hover Helper

92 |

You can use this just like any other jQuery selector to bind hover events that toggle the Panel to any element.

93 |

The Panel toggles out on hover out so hover towards the left side of the button.

94 | 
 95 |                 
 96 |                 $('#scotch-panel').scotchPanel({
 97 | 
 98 |                     hoverSelector: '.toggle-panel-on-hover',
 99 | 
100 |                     clickSelector: '.toggle-panel',
101 |                     containerSelector: 'body',
102 |                     direction: 'right',
103 |                     duration: 300,
104 |                     transition: 'ease',
105 |                     distanceX: '200px',
106 |                     enableEscapeKey: true
107 |                 });
108 |                 
109 |
110 |
111 |
112 |
113 | 114 |
115 |
116 |
117 |
118 | .toggle-panel-on-hover 119 |
120 |
121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /website/demos/hover-helper/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | hoverSelector: '.toggle-panel-on-hover', 6 | 7 | clickSelector: '.toggle-panel', 8 | containerSelector: 'body', 9 | direction: 'right', 10 | duration: 300, 11 | transition: 'ease', 12 | distanceX: '200px', 13 | enableEscapeKey: true 14 | }); 15 | 16 | }); -------------------------------------------------------------------------------- /website/demos/hover-helper/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | section { 38 | padding-bottom: 5000px; 39 | text-align: center; 40 | } 41 | section a.btn { 42 | height: 200px; 43 | line-height: 200px; 44 | padding: 0; 45 | } 46 | 47 | 48 | 49 | 50 | /*==================================== 51 | = PANEL STYLES = 52 | ====================================*/ 53 | #scotch-panel { 54 | background: #444;; 55 | } 56 | #scotch-panel ul { 57 | list-style: none; 58 | padding: 0; 59 | margin: 0; 60 | text-align: center; 61 | } 62 | #scotch-panel ul li a { 63 | display: block; 64 | width: 100%; 65 | height: 50px; 66 | line-height: 50px; 67 | background: transparent; 68 | color: #fff; 69 | } 70 | #scotch-panel ul li a:hover { 71 | background: #555; 72 | } 73 | #scotch-panel .btn { 74 | margin: 8px; 75 | } 76 | -------------------------------------------------------------------------------- /website/demos/html-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |

Contact Us

61 |
62 |
63 | 64 | 65 |
66 |
67 | 68 | 69 |
70 |
71 | 72 | 73 |
74 |
75 | 76 | 77 |
78 | 79 |
80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 |
89 | 90 | 91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 |

HTML Example

100 |

You can put whatever you want in the panel.

101 | 
102 |                 
103 |                 $('#scotch-panel').scotchPanel({
104 | 
105 |                     type: 'html', // This is default anyways
106 | 
107 |                     containerSelector: 'body',
108 |                     direction: 'top',
109 |                     duration: 300,
110 |                     transition: 'ease',
111 |                     clickSelector: '.toggle-panel',
112 |                     enableEscapeKey: true
113 |                 });
114 |                 
115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /website/demos/html-example/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | type: 'html', // This is default anyways 6 | 7 | containerSelector: 'body', 8 | direction: 'top', 9 | duration: 300, 10 | transition: 'ease', 11 | clickSelector: '.toggle-panel', 12 | enableEscapeKey: true 13 | }); 14 | 15 | }); -------------------------------------------------------------------------------- /website/demos/html-example/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #46AAF2; 49 | } 50 | #scotch-panel h2 { 51 | color: #9ED1FF; 52 | padding: 20px 0 0; 53 | } 54 | #scotch-panel form { 55 | padding: 20px 0 40px; 56 | } 57 | #scotch-panel label { 58 | color: #9ED1FF; 59 | } -------------------------------------------------------------------------------- /website/demos/iframe-example-no-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 69 |
70 |
71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |
83 |

Iframe Example - No loader

84 |

Loads an iframe on first open.

85 | 
 86 |                 
 87 |                 $('#scotch-panel').scotchPanel({
 88 | 
 89 |                     type: 'iframe',
 90 |                     iframeURL: 'http://scotch.io',
 91 | 
 92 |                     containerSelector: 'body',
 93 |                     direction: 'right',
 94 |                     duration: 300,
 95 |                     transition: 'ease',
 96 |                     clickSelector: '.toggle-panel',
 97 |                     distanceX: '85%',
 98 |                     enableEscapeKey: true
 99 |                 });
100 |                 
101 |
102 |
103 |
104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /website/demos/iframe-example-no-loader/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | type: 'iframe', 6 | iframeURL: 'http://scotch.io', 7 | 8 | containerSelector: 'body', 9 | direction: 'right', 10 | duration: 300, 11 | transition: 'ease', 12 | clickSelector: '.toggle-panel', 13 | distanceX: '85%', 14 | enableEscapeKey: true 15 | }); 16 | 17 | }); -------------------------------------------------------------------------------- /website/demos/iframe-example-no-loader/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #e3e3e3;; 49 | } -------------------------------------------------------------------------------- /website/demos/iframe-example-with-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 | 78 | 79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |

Iframe Example - With loader

88 |

Loads an iframe on first open.

89 | 
 90 |                 
 91 |                 $('#scotch-panel').scotchPanel({
 92 | 
 93 |                     type: 'iframe',
 94 |                     iframeURL: 'http://scotch.io',
 95 | 
 96 |                     containerSelector: 'body',
 97 |                     direction: 'right',
 98 |                     duration: 300,
 99 |                     transition: 'ease',
100 |                     clickSelector: '.toggle-panel',
101 |                     distanceX: '85%',
102 |                     enableEscapeKey: true
103 |                 });
104 |                 
105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /website/demos/iframe-example-with-loader/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | type: 'iframe', 6 | iframeURL: 'http://scotch.io', 7 | 8 | containerSelector: 'body', 9 | direction: 'right', 10 | duration: 300, 11 | transition: 'ease', 12 | clickSelector: '.toggle-panel', 13 | distanceX: '85%', 14 | enableEscapeKey: true 15 | }); 16 | 17 | }); -------------------------------------------------------------------------------- /website/demos/iframe-example-with-loader/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | body { 5 | background: #e3e3e3; 6 | } 7 | a { 8 | text-decoration: none !important; 9 | -webkit-transition: all 225ms ease; 10 | -moz-transition: all 225ms ease; 11 | transition: all 225ms ease; 12 | } 13 | header { 14 | position: relative; 15 | background: #222; 16 | height: 50px; 17 | } 18 | header a { 19 | color: #777; 20 | } 21 | header a:hover { 22 | color: #fff; 23 | } 24 | header .logo { 25 | display: inline-block; 26 | height: 50px; 27 | line-height: 50px; 28 | } 29 | header .toggle-panel { 30 | position: absolute; 31 | top: 0; 32 | right: 0; 33 | font-size: 25px; 34 | width: 50px; 35 | height: 50px; 36 | line-height: 50px; 37 | text-align: center; 38 | background: #333; 39 | } 40 | article { 41 | height: 5000px; 42 | } 43 | .scotch-panel-canvas { 44 | background: #fff; 45 | } 46 | 47 | 48 | 49 | 50 | 51 | 52 | /*================================== 53 | = CSS LOADER = 54 | ==================================*/ 55 | .loader { 56 | position: absolute; 57 | left: 50%; 58 | margin-left: -50px; 59 | top: 5%; 60 | width: 100px; 61 | height: 100px; 62 | border-style: solid; 63 | border-top-color: #1cf2aa; 64 | border-right-color: #1cf2aa; 65 | border-left-color: transparent; 66 | border-bottom-color: transparent; 67 | border-radius: 50%; 68 | -webkit-box-sizing: border-box; 69 | -moz-box-sizing: border-box; 70 | box-sizing: border-box; 71 | -webkit-animation: rotate 500ms ease-in-out infinite; 72 | animation: rotate 500ms ease-in-out infinite; 73 | -webkit-transform: rotate(-200deg); 74 | -ms-transform: rotate(-200deg); 75 | transform: rotate(-200deg); 76 | } 77 | @-webkit-keyframes rotate { 78 | 0% { border-width: 10px; } 79 | 25% { border-width: 3px; } 80 | 50% { 81 | -webkit-transform: rotate(115deg); 82 | transform: rotate(115deg); 83 | border-width: 10px; 84 | } 85 | 75% { border-width: 3px;} 86 | 100% { border-width: 10px;} 87 | } 88 | @keyframes rotate { 89 | 0% { border-width: 10px; } 90 | 25% { border-width: 3px; } 91 | 50% { 92 | -webkit-transform: rotate(115deg); 93 | transform: rotate(115deg); 94 | border-width: 10px; 95 | } 96 | 75% { border-width: 3px;} 97 | 100% { border-width: 10px;} 98 | } 99 | 100 | 101 | -------------------------------------------------------------------------------- /website/demos/javascript-only-with-easing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

JavaScript Only - With Easing Plugin

91 |

JS is always used as a fallback. By default, jQuery animate only has a "linear" animation. If you ever need to customize the fallback, you can do with the Easing jQuery plugin.

92 | 
 93 |                 
 94 | 
 95 |                 // Make sure you include jQuery Easing (check the bottom of this page)!
 96 |                 // http://gsgd.co.uk/sandbox/jquery/easing/
 97 | 
 98 |                 $('#scotch-panel').scotchPanel({
 99 | 
100 |                     easingPluginTransition: 'easeInCirc',
101 |                     useCSS: false,
102 |                     useEasingPlugin: false, // http://gsgd.co.uk/sandbox/jquery/easing/ only for browser support
103 | 
104 |                     containerSelector: 'body',
105 |                     direction: 'right',
106 |                     duration: 300,
107 |                     transition: 'ease',
108 |                     clickSelector: '.toggle-panel',
109 |                     distanceX: '70%',
110 |                     enableEscapeKey: true
111 |                 });
112 |                 
113 |
114 |
115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /website/demos/javascript-only-with-easing/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | easingPluginTransition: 'easeInCirc', 6 | useCSS: false, 7 | useEasingPlugin: false, // http://gsgd.co.uk/sandbox/jquery/easing/ only for browser support 8 | 9 | containerSelector: 'body', 10 | direction: 'right', 11 | duration: 300, 12 | transition: 'ease', 13 | clickSelector: '.toggle-panel', 14 | distanceX: '70%', 15 | enableEscapeKey: true 16 | }); 17 | 18 | }); -------------------------------------------------------------------------------- /website/demos/javascript-only-with-easing/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/javascript-only/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

JavaScript Only - CSS3 Transforms turned off

91 |

CSS3 is ideal because it is way smoother. As a fallback, JS is used, so this is what legacy browsers will see. If for whatever reason you want to turn CSS3 off, this is how. You should immediately notice that CSS3 is better performing and smoother.

92 |

You made need to use this if you have fixed elements you are trying to turn into panels. See the Chromium bug report.

93 | 
 94 |                 
 95 |                 $('#scotch-panel').scotchPanel({
 96 | 
 97 |                     useCSS: false,
 98 | 
 99 |                     containerSelector: 'body',
100 |                     direction: 'right',
101 |                     duration: 300,
102 |                     transition: 'ease',
103 |                     clickSelector: '.toggle-panel',
104 |                     distanceX: '70%',
105 |                     enableEscapeKey: true
106 |                 });
107 |                 
108 |
109 |
110 |
111 |
112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /website/demos/javascript-only/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | useCSS: false, 6 | 7 | containerSelector: 'body', 8 | direction: 'right', 9 | duration: 300, 10 | transition: 'ease', 11 | clickSelector: '.toggle-panel', 12 | distanceX: '70%', 13 | enableEscapeKey: true 14 | }); 15 | 16 | }); -------------------------------------------------------------------------------- /website/demos/javascript-only/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/loading-buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 |
81 |

Loading Buttons Demo

82 |

Using scotchPanel to make cool loading buttons. Inspired by Ladda (which this has no affiliation with).

83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |
91 | 92 | 96 | 97 |
98 |
99 | 100 | 104 | 105 |
106 |
107 | 108 | 112 | 113 |
114 |
115 | 116 | 120 | 121 |
122 |
123 |
124 |
125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /website/demos/loading-buttons/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.scotch-button span.loader').scotchPanel({ 4 | 'containerSelector': 'button' 5 | }); 6 | 7 | }); -------------------------------------------------------------------------------- /website/demos/loading-buttons/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | section { 38 | padding-bottom: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | .scotch-button { 45 | position: relative; 46 | outline: none !important; 47 | display: inline-block; 48 | overflow: hidden; 49 | background: #666; 50 | border: none; 51 | -moz-border-radius: 3px; 52 | -webkit-border-radius: 3px; 53 | border-radius: 3px; 54 | font-size: 18px; 55 | color: #fff !important; 56 | padding: 0 !important; 57 | -o-transform: translateZ(0); 58 | -ms-transform: translateZ(0); 59 | -moz-transform: translateZ(0); 60 | -webkit-transform: translateZ(0); 61 | transform: translateZ(0); 62 | } 63 | .scotch-button span.text { 64 | padding: 0 18px; 65 | } 66 | .scotch-button span { 67 | height: 50px; 68 | line-height: 50px; 69 | } 70 | 71 | 72 | 73 | .example-1 { background: #118B4B; } 74 | .example-1 .scotch-panel-canvas { background: #2aca76; } 75 | .example-1:hover .scotch-panel-canvas { background: #38d683; } 76 | 77 | .example-2 { background: #8A472A; } 78 | .example-2 .scotch-panel-canvas { background: #ea8557; } 79 | .example-2:hover .scotch-panel-canvas { background: #ed956e; } 80 | 81 | .example-3 span { 82 | height: 50px; 83 | line-height: 50px; 84 | display: block; 85 | } 86 | .example-3 { background: #A5DCF6; } 87 | .example-3 .scotch-panel-canvas { background: #53b5e6; } 88 | .example-3:hover .scotch-panel-canvas { background: #69bfe9; } 89 | 90 | .example-4 span { 91 | height: 50px; 92 | line-height: 50px; 93 | display: block; 94 | } 95 | .example-4 { background: #502B79; } 96 | .example-4 .scotch-panel-canvas { background: #9973c2; } 97 | .example-4:hover .scotch-panel-canvas { background: #a685ca; } -------------------------------------------------------------------------------- /website/demos/multiple-panels-different-styles/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.one-of-many').scotchPanel({ 4 | clickSelector: '.toggle-panels', 5 | containerSelector: '.panel-container', // Selects the nearest matching container 6 | }); 7 | 8 | }); -------------------------------------------------------------------------------- /website/demos/multiple-panels-different-styles/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | 38 | 39 | section { 40 | padding-bottom: 5000px; 41 | } 42 | .panel-container { 43 | display: block; 44 | width: 100%; 45 | background: #46AAF2; 46 | text-align: center; 47 | margin-bottom: 50px; 48 | } 49 | .panel-container h2 { 50 | margin: 0; 51 | padding: 50px; 52 | color: #fff; 53 | } 54 | .panel-container p { 55 | padding-bottom: 50px; 56 | margin: 0; 57 | } 58 | .one-of-many { 59 | background: #777; 60 | } 61 | .toggle-panels { 62 | margin: 40px 0; 63 | } -------------------------------------------------------------------------------- /website/demos/multiple-panels-same-container/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 |
71 |

Multiple Panels on the Same Container

72 |

You can have multiple Scotch Panels on the same container.

73 | 
 74 |                 
 75 |                 $('.scotch-panel').scotchPanel({
 76 |                     containerSelector: '#super-container',
 77 |                     distanceX: '30%'
 78 |                 });
 79 |                 
 80 |
81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 |

WEST SIDE

93 |
94 |
95 |

NORTH SIDE

96 |
97 |
98 |

SOUTH SIDE

99 |
100 |
101 |

EAST SIDE

102 |
103 | 104 | 105 | Toggle Top 106 | Toggle Left 107 | Toggle Right 108 | Toggle Bottom 109 | 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /website/demos/multiple-panels-same-container/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.scotch-panel').scotchPanel({ 4 | containerSelector: '#super-container', 5 | distanceX: '30%' 6 | }); 7 | 8 | }); -------------------------------------------------------------------------------- /website/demos/multiple-panels-same-container/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | section { 11 | margin-bottom: 5000px; 12 | } 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | #super-container { 21 | background: #e3e3e3; 22 | text-align: center; 23 | } 24 | #super-container a { 25 | padding: 25px; 26 | display: block; 27 | } 28 | 29 | .scotch-panel { 30 | background: #444; 31 | } 32 | .scotch-panel h2 { 33 | margin: 0; 34 | color: #fff; 35 | padding: 20px; 36 | } 37 | #super-container a { 38 | color: #222; 39 | background: transparent; 40 | } 41 | #super-container a:hover { 42 | background: #737373; 43 | } -------------------------------------------------------------------------------- /website/demos/multiple-panels/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 |
71 |
72 |

Multiple Panels

73 |

Initiate multiple Scotch Panels with a single call.

74 | 
 75 |                 
 76 |                 $('.one-of-many').scotchPanel({
 77 |                     clickSelector: '.toggle-panels',
 78 |                     containerSelector: '.panel-container', // Selects the nearest matching container
 79 |                     direction: 'right',
 80 |                     duration: 300,
 81 |                     transition: 'ease-in-out',
 82 |                     enableEscapeKey: true
 83 |                 });
 84 |                 
 85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 |
93 | Toggle All 94 |
95 |
96 |
97 | 98 |
99 |
100 |
101 |
102 |
103 |

Hello

104 |
105 |
106 |

One

107 |

Example

108 |
109 |
110 |
111 |
112 |
113 |
114 |

World

115 |
116 |
117 |

Two

118 |

Example

119 |
120 |
121 |
122 |
123 |
124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /website/demos/multiple-panels/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.one-of-many').scotchPanel({ 4 | clickSelector: '.toggle-panels', 5 | containerSelector: '.panel-container', // Selects the nearest matching container 6 | direction: 'right', 7 | duration: 300, 8 | transition: 'ease-in-out', 9 | enableEscapeKey: true 10 | }); 11 | 12 | }); -------------------------------------------------------------------------------- /website/demos/multiple-panels/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | 38 | 39 | section { 40 | padding-bottom: 5000px; 41 | } 42 | .panel-container { 43 | display: block; 44 | width: 100%; 45 | background: #46AAF2; 46 | text-align: center; 47 | margin-bottom: 50px; 48 | } 49 | .panel-container h2 { 50 | margin: 0; 51 | padding: 50px; 52 | color: #fff; 53 | } 54 | .panel-container p { 55 | padding-bottom: 50px; 56 | margin: 0; 57 | } 58 | .one-of-many { 59 | background: #777; 60 | } 61 | .toggle-panels { 62 | margin: 40px 0; 63 | } -------------------------------------------------------------------------------- /website/demos/nested-panels/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | clickSelector: '.toggle-panel', 9 | distanceX: '70%', 10 | enableEscapeKey: true 11 | }); 12 | 13 | $('#inside-panel').scotchPanel({ 14 | containerSelector: '#scotch-panel', 15 | clickSelector: '.toggle-inside-panel', 16 | direction: 'top', 17 | 18 | }); 19 | 20 | 21 | 22 | }); -------------------------------------------------------------------------------- /website/demos/nested-panels/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | /* Forces use of GPU since this is somewhat resource intensive */ 48 | .scotchified { 49 | -o-transform: translateZ(0); 50 | -moz-transform: translateZ(0); 51 | -ms-transform: translateZ(0); 52 | -webkit-transform: translateZ(0); 53 | transform: translateZ(0); 54 | } 55 | /* Force Height of Panel for unique use case */ 56 | .scotch-panel-wrapper { 57 | height: 100%; 58 | } 59 | #scotch-panel { 60 | background: #444;; 61 | } 62 | #scotch-panel ul { 63 | list-style: none; 64 | padding: 0; 65 | margin: 0; 66 | text-align: center; 67 | } 68 | #scotch-panel ul li a { 69 | display: block; 70 | width: 100%; 71 | height: 50px; 72 | line-height: 50px; 73 | background: transparent; 74 | color: #fff; 75 | } 76 | #scotch-panel ul li a:hover { 77 | background: #555; 78 | } 79 | #scotch-panel ul li a.toggle-inside-panel { 80 | background: #46AAF2; 81 | } 82 | #scotch-panel ul li a.toggle-inside-panel:hover { 83 | background: #62BDFF; 84 | } 85 | 86 | #inside-panel { 87 | background: #2D7DB6; 88 | padding: 0 30px; 89 | } 90 | #inside-panel h2 { 91 | padding-top: 30px; 92 | } 93 | #inside-panel form { 94 | padding-bottom: 30px; 95 | } 96 | #inside-panel form { 97 | position: relative; 98 | } 99 | #inside-panel .toggle-inside-panel { 100 | position: absolute; 101 | right: 0; 102 | bottom: 100%; 103 | } -------------------------------------------------------------------------------- /website/demos/photo-example/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.photo-panel').scotchPanel({ 4 | 5 | type: 'image', 6 | 7 | containerSelector: '.person', // Selects the nearest matching .person container 8 | direction: 'top', 9 | duration: 300, 10 | transition: 'ease', 11 | enableEscapeKey: true 12 | }); 13 | 14 | }); -------------------------------------------------------------------------------- /website/demos/photo-example/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | 38 | 39 | section { 40 | margin-top: 100px; 41 | padding-bottom: 5000px; 42 | } 43 | .person { 44 | display: block; 45 | width: 100%; 46 | background: #46AAF2; 47 | text-align: center; 48 | margin-bottom: 50px; 49 | } 50 | .person h2 { 51 | margin: 0; 52 | padding: 50px; 53 | color: #fff; 54 | } 55 | .person p { 56 | padding-bottom: 50px; 57 | margin: 0; 58 | } 59 | 60 | 61 | /*==================================== 62 | = PANEL STYLES = 63 | ====================================*/ 64 | #scotch-panel { 65 | background: #444;; 66 | } 67 | #scotch-panel ul { 68 | list-style: none; 69 | padding: 0; 70 | margin: 0; 71 | text-align: center; 72 | } 73 | #scotch-panel ul li a { 74 | display: block; 75 | width: 100%; 76 | height: 50px; 77 | line-height: 50px; 78 | background: transparent; 79 | color: #fff; 80 | } 81 | #scotch-panel ul li a:hover { 82 | background: #555; 83 | } 84 | 85 | -------------------------------------------------------------------------------- /website/demos/side-menu-dev-way/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

Side Menu / Navigation - The Dev Way

91 |

This way returns the Panel as an object so you can tie open, close, and toggle events to it however you want. This comes from the top.

92 | 
 93 |                 
 94 |                 var easyPanel = $('#scotch-panel').scotchPanel({
 95 |                     containerSelector: 'body',
 96 |                     direction: 'right',
 97 |                     duration: 300,
 98 |                     transition: 'ease',
 99 |                     distanceX: '70%',
100 |                     enableEscapeKey: true
101 |                 });
102 | 
103 |                 $('.toggle-panel').click(function() {
104 |                     easyPanel.toggle();
105 |                     return false;
106 |                 });
107 |                 
108 |
109 |
110 |
111 |
112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /website/demos/side-menu-dev-way/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | var scotchPanel = $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | distanceX: '70%', 9 | enableEscapeKey: true 10 | }); 11 | 12 | $('.toggle-panel').click(function() { 13 | scotchPanel.toggle(); 14 | return false; 15 | }); 16 | 17 | }); -------------------------------------------------------------------------------- /website/demos/side-menu-dev-way/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | /*==================================== 44 | = PANEL STYLES = 45 | ====================================*/ 46 | #scotch-panel { 47 | background: #444;; 48 | } 49 | #scotch-panel ul { 50 | list-style: none; 51 | padding: 0; 52 | margin: 0; 53 | text-align: center; 54 | } 55 | #scotch-panel ul li a { 56 | display: block; 57 | width: 100%; 58 | height: 50px; 59 | line-height: 50px; 60 | background: transparent; 61 | color: #fff; 62 | } 63 | #scotch-panel ul li a:hover { 64 | background: #555; 65 | } 66 | 67 | -------------------------------------------------------------------------------- /website/demos/side-menu-easy-way/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

Side Menu / Navigation - The Easy Way

91 |

This way use jQuery to handle everything for you.

92 | 
 93 |                 
 94 |                 $('#scotch-panel').scotchPanel({
 95 |                     containerSelector: 'body',
 96 |                     direction: 'right',
 97 |                     duration: 300,
 98 |                     transition: 'ease',
 99 |                     clickSelector: '.toggle-panel',
100 |                     distanceX: '70%',
101 |                     enableEscapeKey: true
102 |                 });
103 |                 
104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /website/demos/side-menu-easy-way/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | clickSelector: '.toggle-panel', 9 | distanceX: '70%', 10 | enableEscapeKey: true 11 | }); 12 | 13 | }); -------------------------------------------------------------------------------- /website/demos/side-menu-easy-way/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #444;; 49 | } 50 | #scotch-panel ul { 51 | list-style: none; 52 | padding: 0; 53 | margin: 0; 54 | text-align: center; 55 | } 56 | #scotch-panel ul li a { 57 | display: block; 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: transparent; 62 | color: #fff; 63 | } 64 | #scotch-panel ul li a:hover { 65 | background: #555; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /website/demos/side-menu-html5-way/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 74 |
75 | 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

Side Menu / Navigation - The HTML5 Way

91 |

This method uses HTML5 Data Attributes for setting the options.

92 | 
 93 |                 
 94 |                 <div
 95 |                     id="scotch-panel"
 96 |                     data-containerSelector="body"
 97 |                     data-direction="top"
 98 |                     data-transition="ease"
 99 |                     data-duration="300"
100 |                     data-clickSelector=".toggle-panel"
101 |                 >
102 |                      <ul>
103 |                         <li><a href="#">Home</a></li>
104 |                         <li><a href="#">About</a></li>
105 |                         <li><a href="#">Services</a></li>
106 |                         <li><a href="#">Contact</a></li>
107 |                     </ul>
108 |                 </div>
109 |                 
110 |
111 | 
112 |                 
113 |                 $('#scotch-panel').scotchPanel();
114 |                 
115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /website/demos/side-menu-html5-way/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel(); 4 | 5 | }); -------------------------------------------------------------------------------- /website/demos/side-menu-html5-way/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | /*==================================== 44 | = PANEL STYLES = 45 | ====================================*/ 46 | #scotch-panel { 47 | background: #444;; 48 | } 49 | #scotch-panel ul { 50 | list-style: none; 51 | padding: 0; 52 | margin: 0; 53 | text-align: center; 54 | } 55 | #scotch-panel ul li a { 56 | display: block; 57 | width: 100%; 58 | height: 50px; 59 | line-height: 50px; 60 | background: transparent; 61 | color: #fff; 62 | } 63 | #scotch-panel ul li a:hover { 64 | background: #555; 65 | } 66 | 67 | -------------------------------------------------------------------------------- /website/demos/side-menu-mobile-only-with-css/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | containerSelector: 'body', 5 | direction: 'right', 6 | duration: 300, 7 | transition: 'ease', 8 | clickSelector: '.toggle-panel', 9 | distanceX: '70%', 10 | enableEscapeKey: true 11 | }); 12 | 13 | }); -------------------------------------------------------------------------------- /website/demos/side-menu-mobile-only-with-css/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | float: left; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | 37 | display: none; 38 | } 39 | header ul { 40 | float: right; 41 | list-style: none; 42 | margin: 0; 43 | padding: 0; 44 | } 45 | header ul li { 46 | display: inline-block; 47 | } 48 | header ul li a { 49 | display: block; 50 | height: 50px; 51 | line-height: 50px; 52 | margin: 0 10px; 53 | } 54 | article { 55 | height: 5000px; 56 | } 57 | 58 | 59 | 60 | /*==================================== 61 | = PANEL STYLES = 62 | ====================================*/ 63 | #scotch-panel { 64 | background: #444; 65 | } 66 | #scotch-panel ul { 67 | list-style: none; 68 | padding: 0; 69 | margin: 0; 70 | text-align: center; 71 | } 72 | #scotch-panel ul li a { 73 | display: block; 74 | width: 100%; 75 | height: 50px; 76 | line-height: 50px; 77 | background: transparent; 78 | color: #fff; 79 | } 80 | #scotch-panel ul li a:hover { 81 | background: #555; 82 | } 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | /*======================================= 92 | = MOBILE SNIPPETS = 93 | =======================================*/ 94 | @media only screen and (min-width : 769px) { 95 | .scotch-panel-canvas { 96 | -o-transform: translate3d(0px, 0px, 0px) !important; 97 | -ms-transform: translate3d(0px, 0px, 0px) !important; 98 | -moz-transform: translate3d(0px, 0px, 0px) !important; 99 | -webkit-transform: translate3d(0px, 0px, 0px) !important; 100 | transform: translate3d(0px, 0px, 0px) !important; 101 | } 102 | } 103 | 104 | @media only screen and (max-width : 768px) { 105 | header .toggle-panel { 106 | display: block; 107 | } 108 | header ul { 109 | display: none; 110 | } 111 | } -------------------------------------------------------------------------------- /website/demos/side-menu-mobile-only-with-js/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | var scotchPanel = $('#scotch-panel').scotchPanel({ 3 | containerSelector: 'body', 4 | direction: 'right', 5 | duration: 300, 6 | transition: 'ease', 7 | clickSelector: '.toggle-panel', 8 | distanceX: '70%', 9 | enableEscapeKey: true 10 | }); 11 | 12 | $(window).resize(function() { 13 | if ($(window).width() >= 769 && $('.scotch-panel-canvas').hasClass('scotch-is-showing')) { 14 | scotchPanel.close(); 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /website/demos/side-menu-mobile-only-with-js/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | float: left; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | 37 | display: none; 38 | } 39 | header ul { 40 | float: right; 41 | list-style: none; 42 | margin: 0; 43 | padding: 0; 44 | } 45 | header ul li { 46 | display: inline-block; 47 | } 48 | header ul li a { 49 | display: block; 50 | height: 50px; 51 | line-height: 50px; 52 | margin: 0 10px; 53 | } 54 | article { 55 | height: 5000px; 56 | } 57 | 58 | 59 | 60 | /*==================================== 61 | = PANEL STYLES = 62 | ====================================*/ 63 | #scotch-panel { 64 | background: #444; 65 | } 66 | #scotch-panel ul { 67 | list-style: none; 68 | padding: 0; 69 | margin: 0; 70 | text-align: center; 71 | } 72 | #scotch-panel ul li a { 73 | display: block; 74 | width: 100%; 75 | height: 50px; 76 | line-height: 50px; 77 | background: transparent; 78 | color: #fff; 79 | } 80 | #scotch-panel ul li a:hover { 81 | background: #555; 82 | } 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | /*======================================= 92 | = MOBILE SNIPPETS = 93 | =======================================*/ 94 | @media only screen and (max-width : 768px) { 95 | header .toggle-panel { 96 | display: block; 97 | } 98 | header ul { 99 | display: none; 100 | } 101 | } -------------------------------------------------------------------------------- /website/demos/touch-helper/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | touchSelector: '.toggle-on-touch-only, .toggle-on-both', 6 | clickSelector: '.toggle-on-click-only, .toggle-on-both', 7 | 8 | containerSelector: 'body', 9 | direction: 'right', 10 | duration: 300, 11 | transition: 'ease', 12 | distanceX: '70%', 13 | enableEscapeKey: true 14 | }); 15 | 16 | }); -------------------------------------------------------------------------------- /website/demos/touch-helper/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | section { 38 | margin: 30px 0; 39 | padding-bottom: 5000px; 40 | } 41 | 42 | 43 | 44 | 45 | /*==================================== 46 | = PANEL STYLES = 47 | ====================================*/ 48 | #scotch-panel { 49 | background: #444;; 50 | } 51 | #scotch-panel ul { 52 | list-style: none; 53 | padding: 0; 54 | margin: 0; 55 | text-align: center; 56 | } 57 | #scotch-panel ul li a { 58 | display: block; 59 | width: 100%; 60 | height: 50px; 61 | line-height: 50px; 62 | background: transparent; 63 | color: #fff; 64 | } 65 | #scotch-panel ul li a:hover { 66 | background: #555; 67 | } 68 | #scotch-panel .btn { 69 | margin: 8px; 70 | } 71 | 72 | -------------------------------------------------------------------------------- /website/demos/transitions/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('.scotch-panel').scotchPanel({ 4 | containerSelector: 'section', 5 | direction: 'left', 6 | duration: 2000, 7 | distanceX: '100%', 8 | enableEscapeKey: true 9 | }); 10 | 11 | }); -------------------------------------------------------------------------------- /website/demos/transitions/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | body { 5 | padding-bottom: 500px; 6 | } 7 | a { 8 | text-decoration: none !important; 9 | -webkit-transition: all 225ms ease; 10 | -moz-transition: all 225ms ease; 11 | transition: all 225ms ease; 12 | } 13 | header { 14 | position: relative; 15 | background: #222; 16 | height: 50px; 17 | } 18 | header a { 19 | color: #777; 20 | } 21 | header a:hover { 22 | color: #fff; 23 | } 24 | header .logo { 25 | display: inline-block; 26 | height: 50px; 27 | line-height: 50px; 28 | } 29 | header .toggle-panel { 30 | position: absolute; 31 | top: 0; 32 | right: 0; 33 | font-size: 25px; 34 | width: 50px; 35 | height: 50px; 36 | line-height: 50px; 37 | text-align: center; 38 | background: #333; 39 | } 40 | 41 | 42 | 43 | 44 | main { 45 | margin: 100px 0; 46 | } 47 | section { 48 | background: #efefef; 49 | text-align: center; 50 | cursor: pointer; 51 | margin: 15px 0; 52 | } 53 | section h2 { 54 | margin: 0; 55 | padding: 10px 0; 56 | } 57 | 58 | 59 | 60 | /*==================================== 61 | = PANEL STYLES = 62 | ====================================*/ 63 | .scotch-panel { 64 | background: #444;; 65 | } 66 | .scotch-panel h2 { 67 | color: #fff; 68 | } 69 | -------------------------------------------------------------------------------- /website/demos/trigger-close-after-x/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 |
71 |

Quick Message from Our Sponsors

72 | 73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |

Trigger Example - Close After X Seconds

92 |

This trigger example will close a fake ad after 5 seconds. There are tons of use-cases for this besides ads.

93 | 
 94 |                 
 95 |                 $('#scotch-panel').scotchPanel({
 96 | 
 97 |                     closeAfter: 5000, // Make user watch for 5 seconds
 98 | 
 99 |                     startOpened: true, // Required
100 |                     startOpenedDelay: 1000, // ms
101 |                     enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed
102 |                     clickSelector: '.toggle-panel'
103 |                 });
104 |                 
105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /website/demos/trigger-close-after-x/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | startOpened: true, // Required 5 | startOpenedDelay: 1000, // ms 6 | closeAfter: 5000, // Make user watch for 5 seconds 7 | enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed 8 | clickSelector: '.toggle-panel' 9 | }); 10 | 11 | }); -------------------------------------------------------------------------------- /website/demos/trigger-close-after-x/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #46AAF2; 49 | } 50 | #scotch-panel h4 { 51 | color: #9ED1FF; 52 | font-size: 13px; 53 | } 54 | #scotch-panel img { 55 | margin-bottom: 20px; 56 | width: 100%; 57 | height: auto; 58 | } -------------------------------------------------------------------------------- /website/demos/trigger-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 |
71 |

Sorry to bother you...

72 |

Thanks for visiting our site. Would you please consider joining our mailing list.

73 |
74 |
75 | No! Close this! 76 |
77 |
78 | 79 | 80 |
81 | 82 |
83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 | 98 |
99 |
100 |
101 |

Trigger Example

102 |

In this example, the Scotch Panel will appear after 2 seconds. This is a good use case for ads, announcements, etc. It could be a good replacement for the annoying lightbox popup.

103 | 
104 |                 
105 |                 $('#scotch-panel').scotchPanel({
106 |                     startOpened: true, // Required
107 |                     startOpenedDelay: 2000, // ms
108 |                     enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed
109 |                     clickSelector: '.toggle-panel'
110 |                 });
111 |                 
112 |
113 |
114 |
115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /website/demos/trigger-example/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | startOpened: true, // Required 5 | startOpenedDelay: 2000, // ms 6 | enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed 7 | clickSelector: '.toggle-panel' 8 | }); 9 | 10 | }); -------------------------------------------------------------------------------- /website/demos/trigger-example/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | background: #46AAF2; 49 | } 50 | #scotch-panel h2 { 51 | color: #9ED1FF; 52 | padding: 20px 0 0; 53 | } 54 | #scotch-panel form { 55 | padding: 20px 0 40px; 56 | } 57 | #scotch-panel label { 58 | color: #9ED1FF; 59 | } 60 | 61 | #scotch-panel .toggle-panel { 62 | position: absolute; 63 | top: 10px; 64 | right: 15px; 65 | } -------------------------------------------------------------------------------- /website/demos/trigger-with-cookie/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // Minified from https://developer.mozilla.org/en-US/docs/Web/API/document.cookie 4 | var docCookies={getItem:function(e){return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\-\.\+\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null},setItem:function(e,o,n,t,c,r){if(!e||/^(?:expires|max\-age|path|domain|secure)$/i.test(e))return!1;var s="";if(n)switch(n.constructor){case Number:s=1/0===n?"; expires=Fri, 31 Dec 9999 23:59:59 GMT":"; max-age="+n;break;case String:s="; expires="+n;break;case Date:s="; expires="+n.toUTCString()}return document.cookie=encodeURIComponent(e)+"="+encodeURIComponent(o)+s+(c?"; domain="+c:"")+(t?"; path="+t:"")+(r?"; secure":""),!0},removeItem:function(e,o,n){return e&&this.hasItem(e)?(document.cookie=encodeURIComponent(e)+"=; expires=Thu, 01 Jan 1970 00:00:00 GMT"+(n?"; domain="+n:"")+(o?"; path="+o:""),!0):!1},hasItem:function(e){return new RegExp("(?:^|;\\s*)"+encodeURIComponent(e).replace(/[\-\.\+\*]/g,"\\$&")+"\\s*\\=").test(document.cookie)},keys:function(){for(var e=document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g,"").split(/\s*(?:\=[^;]*)?;\s*/),o=0;o 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 34 | Scotch Panels ♥ jQuery Off Canvas Menus and Panels Plugin 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 52 | 53 | 54 | 63 | 64 | 65 | 66 | 67 |
68 | 69 |
70 |
71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |
83 |

Video Example

84 |

Opens a YouTube video and autoplay it.

85 | 
 86 |                 
 87 |                 $('#scotch-panel').scotchPanel({
 88 | 
 89 |                     type: 'video',
 90 |                     autoPlayVideo: true,
 91 |                     youtubeID: 'ePbKGoIGAXY',
 92 |                     youTubeTheme: 'light',
 93 | 
 94 |                     containerSelector: 'body',
 95 |                     direction: 'top',
 96 |                     duration: 300,
 97 |                     transition: 'ease',
 98 |                     clickSelector: '.toggle-panel',
 99 |                     enableEscapeKey: true
100 |                 });
101 |                 
102 |
103 |
104 |
105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /website/demos/video-example/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#scotch-panel').scotchPanel({ 4 | 5 | type: 'video', 6 | autoPlayVideo: true, 7 | youtubeID: 'ePbKGoIGAXY', 8 | youTubeTheme: 'light', 9 | 10 | containerSelector: 'body', 11 | direction: 'top', 12 | duration: 300, 13 | transition: 'ease', 14 | clickSelector: '.toggle-panel', 15 | enableEscapeKey: true 16 | }); 17 | 18 | }); -------------------------------------------------------------------------------- /website/demos/video-example/style.css: -------------------------------------------------------------------------------- 1 | /*================================== 2 | = SITE STUFF = 3 | ==================================*/ 4 | a { 5 | text-decoration: none !important; 6 | -webkit-transition: all 225ms ease; 7 | -moz-transition: all 225ms ease; 8 | transition: all 225ms ease; 9 | } 10 | header { 11 | position: relative; 12 | background: #222; 13 | height: 50px; 14 | } 15 | header a { 16 | color: #777; 17 | } 18 | header a:hover { 19 | color: #fff; 20 | } 21 | header .logo { 22 | display: inline-block; 23 | height: 50px; 24 | line-height: 50px; 25 | } 26 | header .toggle-panel { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | font-size: 25px; 31 | width: 50px; 32 | height: 50px; 33 | line-height: 50px; 34 | text-align: center; 35 | background: #333; 36 | } 37 | article { 38 | height: 5000px; 39 | } 40 | 41 | 42 | 43 | 44 | /*==================================== 45 | = PANEL STYLES = 46 | ====================================*/ 47 | #scotch-panel { 48 | height: 400px; 49 | } -------------------------------------------------------------------------------- /website/img/about-chris.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/scotch-panels/e5f33b60806fae6109e7c932eaa10bdeff7e758f/website/img/about-chris.jpeg -------------------------------------------------------------------------------- /website/img/about-holly.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/scotch-panels/e5f33b60806fae6109e7c932eaa10bdeff7e758f/website/img/about-holly.jpeg -------------------------------------------------------------------------------- /website/img/about-me.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/scotch-panels/e5f33b60806fae6109e7c932eaa10bdeff7e758f/website/img/about-me.jpeg -------------------------------------------------------------------------------- /website/img/scotch-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/scotch-panels/e5f33b60806fae6109e7c932eaa10bdeff7e758f/website/img/scotch-logo.png -------------------------------------------------------------------------------- /website/power.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | fillWindow('#call-to-action'); 4 | 5 | $('.make-me-a-panel').scotchPanel(); 6 | 7 | $('.button-panel').scotchPanel({ 8 | containerSelector: 'button', 9 | direction: 'left', 10 | distanceX: '100%' 11 | }); 12 | 13 | $('#nested-demo').scotchPanel({ 14 | containerSelector: '#main-nav', 15 | clickSelector: '.toggle-nested-demo', 16 | touchSelector: '.toggle-nested-demo' 17 | }); 18 | 19 | $('#direction-content-html-panel').scotchPanel({ 20 | containerSelector: '#direction-content .content', 21 | direction: 'left', 22 | clickSelector: '#direction-content .arrows .left, .toggle-direction-content-html', 23 | touchSelector: '#direction-content .arrows .left, .toggle-direction-content-html' 24 | }); 25 | $('#direction-content-iframe-panel').scotchPanel({ 26 | containerSelector: '#direction-content .content', 27 | direction: 'top', 28 | type: 'iframe', 29 | iframeURL: 'https://scotch.io', 30 | clickSelector: '#direction-content .arrows .top, .toggle-direction-content-iframe', 31 | touchSelector: '#direction-content .arrows .top, .toggle-direction-content-iframe' 32 | }); 33 | $('#direction-content-image-panel').scotchPanel({ 34 | containerSelector: '#direction-content .content', 35 | direction: 'bottom', 36 | type: 'image', 37 | imageURL: 'https://panels.scotch.io/img/about-holly.jpeg', 38 | clickSelector: '#direction-content .arrows .bottom, .toggle-direction-content-image', 39 | touchSelector: '#direction-content .arrows .bottom, .toggle-direction-content-image' 40 | }); 41 | $('#direction-content-video-panel').scotchPanel({ 42 | containerSelector: '#direction-content .content', 43 | direction: 'right', 44 | type: 'video', 45 | youtubeID: 'ePbKGoIGAXY', 46 | clickSelector: '#direction-content .arrows .right, .toggle-direction-content-video', 47 | touchSelector: '#direction-content .arrows .right, .toggle-direction-content-video' 48 | }); 49 | 50 | $('.content-helper-panel').scotchPanel({ 51 | containerSelector: '.wrap', 52 | direction: 'left', 53 | distanceX: '40%' 54 | }); 55 | 56 | $('.direction-example').scotchPanel({ 57 | containerSelector: '.wrap' 58 | }); 59 | 60 | $('.transition-example').scotchPanel({ 61 | containerSelector: '.wrap', 62 | direction: 'left' 63 | }); 64 | 65 | $('.type-example').scotchPanel({ 66 | direction: 'right' 67 | }); 68 | 69 | $('.duration-example').scotchPanel({ 70 | containerSelector: '.wrap', 71 | direction: 'left', 72 | distanceX: '100%' 73 | }); 74 | 75 | $('#call-to-action a.more').click(function() { 76 | $('html,body').animate({ 77 | scrollTop: $('#licenses').offset().top - 150 78 | }, 500); 79 | 80 | return false; 81 | }); 82 | 83 | 84 | $('.download-only').click(function() { 85 | window.location.href = 'https://github.com/scotch-io/scotch-panels/archive/master.zip'; 86 | }); 87 | 88 | $('.github-only').click(function() { 89 | window.location.href = 'https://github.com/scotch-io/scotch-panels'; 90 | }); 91 | 92 | }); 93 | 94 | 95 | $(window).resize(function() { 96 | fillWindow('#call-to-action'); 97 | }); 98 | 99 | 100 | function fillWindow(element) { 101 | $(element).css('height', $(window).height() + 'px'); 102 | } 103 | --------------------------------------------------------------------------------