Vertical, Horizontal & Diagonal Spry Sliding Panels

V

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

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

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

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.

 

About the author

A native Brit exiled in Japan, Steve spends too much of his time struggling with the Japanese language, dreaming of fish & chips and writing the occasional blog post he hopes others will find helpful.

2 responses

2 Comments

  • I have had some success with sliding panels – but I do have one issue. On panels with widths less than or more than a multiple of 100 (ie 770 or 96 or 251) the sliding panels seem to have a strange random pixel gap every now and then.

    try a 770 x 370 panel in a grid 4 x 4 (3080 for the SlidingPanelsContentGroup total width) on solid backgrounds by the time you reach panel 2 or sometimes panel 3 a pixel or two of the previous panel sometimes stays behind. If you skip to the last panel first, this does not happen so it is not an issue with my panel content (which in this case is a picture) being the wrong size

    I tried slightly lower widths and slightly higher to no avail. Only seems to happen when the muliples are not 100

    • Hi Stephen,

      I tried your example in Firefox and Safari on a Mac running Snow Leopard (10.6.2). However, I can't seem to reproduce the issue you're having. I'd be interested to know what you see with my latest example.

      Can you post a link to your site?

      Steve.

Steve

Recent Comments

Recent Posts

Archives