Visit my Blog to get in touch or to see demos of this and much more.
A slide-in panel for jQueryUI that works from all four sides. The panel overlays your main page and can be slid in on a mouse click or mouse hover. There are lots of other options for customisation such as grab handle, slide speed, opacity, peeking-in etc. The plugin is excellent for housing user options which are only for occasional use, especially overlaid onto whole screen UIs that demand the entire screen real estate.
Here are a couple of examples that you can use to understand how the plugin works and what you can do with it:
- Click here to see a basic example.
- Click here to see a fuller example, which shows all the options that you can manipulate.
This plugin is available under the MIT license. Please respect the terms of the license.
This software is released with the karmaware tag
I've done best efforts testing on a range of modern browsers. If you find any problems, do let me know by raising an issue here. Better still, create a fix for the problem too and drop in the changes; that way everyone can benefit from it.
This plug relies on jQuery (version 2.2.4+) and jQueryUI (version 1.12.1+)
Here is the simplest example of using the slide-in panel.
<!DOCTYPE html>
<html>
<head>
<title>jquery.slidein</title>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery.slidein.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.slidein.js"></script>
<script type="text/javascript">
$(document).ready (function ()
{
$("#mypanel").slidein ({ peek: 12, open: false, speed: 500, opacity: 0.9 });
});
</script>
</head>
<body>
<h1>jquery.slidein</h1>
<p>This the main page</p>
<div id="mypanel">This is the panel</div>
</body>
</html>Important things to note about this example are:
- The jQueryUI CSS is loaded before the slide-in CSS
- The jQuery and jQueryUI JavaScript is loaded before the slide-in JavaScript
- The slide-in plugin is instantiated on document.ready, so that the host element is definitely present
- The desired slide-in options can be set at plugin creation time
Here are all the slide-in options that you can use to modify appearance and behaviour:
| Option | Values | Default | Description |
|---|---|---|---|
| breadth | int | 250 | the panel width or height depending on where it is docked |
| curve | int | 10 | the curve of the grab handle edges |
| disabled | bool | false | disable all panel behaviour |
| dock | top, left, bottom, right | left | panel docking edge |
| hidden | bool | false | show or hide the panel and grab handle |
| opacity | float | 1 | panel and grab handle opacity |
| open | bool | true | true is open, false is closed |
| peek | int | 10 | how far the panel "peeks" into the main window |
| position | int | 10 | percentage position of the grab handle, 0 for top, 50 for middle, 100 for bottom |
| prompt | string | text to show in the grab handle - no text will show a three-line strip | |
| speed | int | 400 | animation speed for opening and closing in millisecs |
| toggle | toggles the open and closed state | ||
| toOpen | click, hover | click | the action that opens the panel |
| toClose | click, hover | click | the action that closes the panel |
Here is an example of how to read and set the plugin options:
var speed = $("#mypanel").slidein ("speed");
$("#mypanel").slidein ("speed", 600);You can re-style the slide-in plugin by including custom CSS after the main plugin CSS. The CSS classes are:
| Class | Description |
|---|---|
| .slidein | the panel and grab handle |
| .slidein-panel | the panel only |
| .slidein-handle | the grab handle only |
Here is an example of some custom CSS to set some panel appearance.
.slidein
{
background : yellow;
}
.slidein-panel
{
padding : 20px;
}
.slidein-handle
{
color : navy;
}Note some important points about styling:
- Don't add width or height to the panel, use the 'breadth' widget option instead - as this works for horizontal and vertical docking
- For right or bottom docked panels, you may need to disable the relevant scroll bar using “overflow-x: hidden" or "overflow-y: hidden" on the html selector.
– Pete Rai