Shodan.UI.SlideyPanel
What is it?
A mechanism for hiding and showing content with a nice, sliding animation. Pretty common around teh Interwebs although I've never really found a proper name for them. Unless informed otherwise, I hereby name them "Slidey Panels".
Demo
Basic example with default options
Click me!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
The .inner & .hd divs are only for styling purposes and can be omitted. (see note in CSS section below).
Javascript
CSS
Style as you see fit but make sure that you don't apply any border, padding or margin to the content container. If you need to, add it to an inner div, as per the example.
If you don't intend to use any border, margin or padding style you can omit the .inner div altogether.
Usage
See the demo for an example markup pattern.
new Shodan.UI.SlideyPanel(element (String)[, options (Object)]);
- element (DOM Element | String): A DOM element or ID
- options (Object): Various configuration options
Options
- autoHide (Bool): set to true if content should be hidden initially. Default: true;
- callback (Function): Callback function to be executed after show / hide animation. Default: null.
- contentSelector (String): CSS selector for the content to be toggled. Should be unique. Default: ".content".
- duration (Int): Animation duration in seconds. Default: 0.5
- openClass (String): CSS class to be applied to container when content is showing. Default: "open".
- toggleSelector (String): CSS selector for the toggle. Default: ".hd".
- transition (String): Scripty2 animation transition preset. Scripty2 transitions
ToDo
- An example demonstrating additional options.