Vertical, Horizontal & Diagonal Spry Sliding Panels

I was recently looking to give my photo gallery an overhaul. I’m quite a fan of Adobe’s Spry framework, so I thought I’d give the Sliding Panels widget a try. There are several examples on Adobe’s site showing panels sliding vertically, horizontally and in any direction. The direction is controlled by some CSS and after successfully playing around with vertical and horizontal sliding I couldn’t figure out from the examples how to get the panels to slide in any direction. That is until I realised how the panels are laid out and the importance of one particular CSS declaration.

My sliding panel example consists of 9 separate panels. I set both the height and width of each panel to 500px. Whilst only one panel is visible at any one time, the panels are actually laid out in a grid pattern.

.SlidingPanels {
	width: 500px;
	height: 500px;
	float: left;
	background-color: #666;
}

.SlidingPanelsContentGroup {
	width: 500px;	/* 1 column x 9 rows. Vertical sliding */
	float: left;
}

.SlidingPanelsContent {
	width: 500px;
	height: 500px;
	float: left;
}

1. CSS for Vertical Slide

Setting the width of the .SlidingPanelsContentGroup selector to the width of the .SlidingPanels selector (500px) creates a grid containing 1 column and 9 rows. In this instance the panels will slide vertically.

.SlidingPanelsContentGroup {
	width: 500px;	/* 1 column x 9 rows. Vertical sliding */
	float: left;
}

2. CSS for Horizontal Slide

Setting the width of the .SlidingPanelsContentGroup selector to a value greater than or equal to the total width of all panels (4500px) creates a grid containing 9 columns and 1 row. Now the panels will slide horizontally.

.SlidingPanelsContentGroup {
	width: 4500px;	/* 9 columns x 1 row. Horizontal sliding */
	float: left;
}

3. CSS for Multi-Direction Slide

The trick to getting panels to slide in any direction is to create a grid containing both multiple rows and multiple columns. To do this set the width of the .SlidingPanelsContentGroup selector to a value greater than the width of the .SlidingPanels selector (500px) but less than or equal to the total width of all panels (4500px). Importantly, this value should also be a multiple of the width of the .SlidingPanels selector. In my example this would be either 1000px, 1500px, 2000px, 2500px, 3000px, 3500px or 4000px.

.SlidingPanelsContentGroup {
	width: 1000px;	/* 2 columns x 5 rows. Multi-directional sliding */
	float: left;
}

4. Multi-Direction Slide Example

Here’s a brief overview of how multi-directional sliding works. My sliding panel has 9 separate panels. Each panel has a width of 500px. I create a grid of 3 columns and 3 rows by using the following CSS (line 9):

.SlidingPanels {
	width: 500px;
	height: 500px;
	float: left;
	background-color: #666;
}

.SlidingPanelsContentGroup {
	width: 1500px;	/* 3 columns x 3 rows. Multi-directional sliding */
	float: left;
}

.SlidingPanelsContent {
	width: 500px;
	height: 500px;
	float: left;
}

4a. Vertical Slide

Let’s assume the the current panel is panel 1. To use a spreadsheet analogy I’ll call this position r1c1. If I navigate to say panel 7 (r3c1) the panels will slide vertically as panel 7 is in a different row (r3) but in the same column (c1).

Spry vertical slide

4b. Horizontal Slide

If panel 1 (r1c1) is the current panel and I navigate to panel 3 (r1c3) the panels will slide horizontally as panel 3 is on the same row (r1) but in a different column (c3).

Spry horizontal slide

4c. Diagonal Slide

If panel 1 (r1c1) is the current panel and I navigate to panel 9 (r3c3) the panels will slide diagonally from left to right as panel 9 is in both a different row (r3) and column (c3).

Spry diagonal slide

Reading over this post it occurred to me that for many of you this is probably a no-brainer. While Adobe’s examples are good there’s no real explanation of the mechanics of sliding panels. Consequently, it can be difficult to adapt their examples for your own needs. So, maybe those in a similar situation to me will find this post helpful.