Dreamweaver Article

Building a Spry Sliding Panels widget

Configuring the panel group

Using CSS to control the size of the content container, you can make the content container:

• Short and wide: Panels will scroll left and right.
• Tall and narrow: Panels will scroll up and down.
• Square/rectangular: Panels will scroll taking the shortest path to the panel, including diagonally.

To change these patters, you have to edit the SlidingPanelsContentGroup class.

You know that the window is 300px by 300px, so you should work in multiples of 300.

To make it move up and down, do nothing. The panels will naturally stack.

.SlidingPanelsContentGroup {
 position: relative;
 margin: 0px;
 padding: 0px;
 border: none;
 }

To make it scroll left and right, set the width to something wider than the content. For this example, use 1000em. However, you have to tell the panel content divs to float left, so they line up in a row.

.SlidingPanelsContentGroup {
 position: relative;
 width:1000em;
 margin: 0px;
 padding: 0px;
 border: none;
 }
.SlidingPanelsContent {
 width: 300px;
 height: 300px;
 float:left;
 overflow: hidden;
 margin: 0px;
 padding: 0px;
 border: none;
 }

In order to make a rectangle with three two-panel rows, make the content container 600px wide and float the panels left.

.SlidingPanelsContentGroup {
 position: relative;
 width: 600px;
 margin: 0px;
 padding: 0px;
 border: none;
 }
.SlidingPanelsContent {
 width: 300px;
 height: 300px;
 float:left;
 overflow: hidden;
 margin: 0px;
 padding: 0px;
 border: none;
 }

Depending on the number of panels used, any height and width can be set on the container, along with floats on the content panels, to lay out the panels however you want. The widget always takes the shortest route to the chosen panel.

Note: If you want to see what the size of the content group is while developing, add style="overflow:visible !important;" to the widget container div.

When discussing navigating to panels, I alluded to a behavior that allows you to navigate to specific panels. This is the showPanel() function. This function takes either the panel id or panel number. As noted above, panel numbers are determined by counting the number of divs as they are listed in the markup, starting with 0.

In this example, add another link to the page:

<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous
    Panel</a> | 
<a href="#"  onclick="sp1.showNextPanel();">Next Panel</a> | <a
    href="#" onclick="sp1.showLastPanel();">Last Panel</a> |
<a href="#" onclick="sp1.showPanel('p4');">Panel 4</a>
<div id="panelwidget" class="SlidingPanels">
  <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
  </div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>

Any combination of these behaviors can be used. Also, they don't have to be <a> tags. They can be buttons or whatever you want.

The interesting part of the Sliding Panels widget is the flexibility of the layouts that are possible. Using straightforward CSS techniques, the Panels can animate any way you need, with no need to change any core JavaScript.

Where to go from here

To learn more about Spry, check out the Spry framework for Ajax area on Adobe Labs. For more Adobe resources for Ajax developers, go to the Ajax Technology Center.

Page 3 of 3

Previous Page