What is slidingPanels?

Similar to a horizontal accordion navigation, or holding some playing cards in your hand... sliding panels around to reveal one of interest. This is a plug-in for the jQuery JavaScript Library and it requires the hoverIntent plug-in. By design the panels are positioned using percentages so they will naturally scale with your page layout and user-selected font size.

Why? A co-worker was inspired by a similar widget on the BMW USA site (in 2005). That widget used Flash and was integrated into their site. I was interested to see if I could pull off a similar effect using dHTML... the result is what you'll find below.

Download slidingPanels (fully-commented, uncompressed)

Simplified Examples

slidingPanels using defaults

$("#demo1").slidingPanels();

<ul id="demo1" class="demo">
	<li class="p1"></li>
	<li class="p2"></li>
	<li class="p3"></li>
	<li class="p4"></li>
	<li class="p5"></li>
</ul>

This example demonstrates the defaults of slidingPanels (see Configuration Options below). The id (#demo1) is only for targeting, there is no special styling applied to it. The plug-in assumes you're using an ul/li structure (this can be overridden). The classes on the li tags are for coloring only.

slidingPanels with callbacks

$("#demo2").slidingPanels({
	onEnterState: demoEnterState,
	onLeaveState: demoLeaveState
});

function demoEnterState( state ) { 
	$(this).append( "Entered " + state + "<br/>");
};

function demoLeaveState( state ) {
	$(this).append( "Leaving " + state + "<br/>");
};

// not showing HTML because it's virtually the same as above

This example demonstrates the use of callback functions. The functions are called only on panels that are changing states (Default, Minimized, and Maximized) so that you can alter their appearance before leaving (onLeave) and after entering (onEnter). The this keyword refers to the panel being acted on. The functions are passed the panel's state as a string so you can manipulate it based on that information. Clear Panels

Configuration Options

You can use slidingPanels without any configuration options (as demonstrated above). None of the options are required.

panelSelector:

The jQuery CSS Selector that indicates what elements should be used as a panel. By default slidingPanels assumes you are using the semantically correct ul/li HTML structure. However, this can be limiting (for validation purposes) when considering more complex layouts. The panelSelector is searched for within the scope of the containing element you passed to slidingPanels, so: $("div.wrapper").slidingPanels({panelSelector:"div.panel"}) would look for div.panel tags inside div.wrapper. Default panelSelector: "li"

slideDuration:

The number of milliseconds of slide animation. All panels (that need to move, will) move within this duration no matter how far they have to travel. Default slideDuration: 200

onEnterState:

A function that is called after slide animation is complete. It is only called on panels that have changed state ("Default", "Minimized" or "Maximized"). The this keyword refers to the panel being acted on. The functions are passed the panel's state as a string ("Default", "Minimized" or "Maximized") so you can manipulate it based on that information. It is recommended that you use a switch(){} statement to take the appropriate action. By default onEnterState is undefined.

onLeaveState:

A function that is called before slide animation takes place. It is only called on panels that have changed state ("Default", "Minimized" or "Maximized"). The this keyword refers to the panel being acted on. The functions are passed the panel's state as a string ("Default", "Minimized" or "Maximized") so you can manipulate it based on that information. It is recommended that you use a switch(){} statement to take the appropriate action. By default onLeaveState is undefined.

onLeaveDefaultDelay:

The number of milliseconds to wait before slide animation begins when leaving the "Default" state. Typically you would set this to duration of your onLeaveState animations so that they can complete before sliding panels around. Default onLeaveDefaultDelay: 0

onLeaveStateDelay:

The number of milliseconds to wait before slide animation begins when leaving the "Maximized" and "Minimized" states. Typically you would set this to duration of your onLeaveState animations so that they can complete before sliding panels around. Default onLeaveStateDelay: 0

Known Bugs

Because slidingPanels uses percentage-based measurements (to allow panels to scale) panel placement is up to browsers' interpretation (when translated into pixels) and thus slidingPanels is not pixel perfect -- it depends on what browser and how many panels you have. The result is that some panels are moved 1 pixel too far to the left. In the simplified demos above you can see the dark red vertical bar to the right of some maximized panels (the <ul>'s background color is showing through). If someone knows how the various browsers interpret percentage widths and can help present a solution (or point me in the right direction) that would be much appreciated.

Please contact me ( brian@cherne.net ) if you'd like to be notified directly of any bugs/fixes/updates. Announcements will also be made on the jQuery (English) Google Group.

Release History