Adds a configurable hide/show-bar to a DIV tag
Main use I can come up with is to hide a rarely used menu on the left of the page (The reason I created it).
The plugin uses cookies to store the state (in/out) of the divider. It flashes and animates to indicate 'clickability'.
Tested and works in Firefox 3.0.5, Opera 9.62, Chrome 1.0.154.43, Safari 3.2.1 and IE 7.0.5730.13 -- All on Win XP
But creates an ugly white line in Safari.
Usage:
$('absolutely placed div at the left of the screen').divider();
or
$('absolutely placed div at the right of the screen').divider({direction:'right'});
Options:
inSpeed/outSpeed // Animation speed - Default: "fast"
inEasing/outEasing // Animation easing - Default: null
leftArrow/rightArrow // Letters used to indicate 'clickability' - Default: < / &rt;
borderColor // Color of divider's borders and the 'arrow' - Default: #1C1C1C
backgroundColor // Color of divider's background - Default: #BBBBBB
direction // Direction to slide 'out', to hide the menu div (wich side of the window to slide to) - Default: "left"
animateIntro // Should the divider animate on page load - Default: true
load // Page to load into the hideable side of the divider. logs to console on ajax error (true/fase) - Default: null
append // Should ajax-loaded page be appended to existing contents or not (true/fase) - Default: null
fixed // Use fixed instead of absolute positioning - Default: false
The plugin works best
with only one divider per page. Two or more wil make a mess.. :p
Contact me: Here
Examples: