Dreamweaver Article

Building a Spry Sliding Panels widget

The Spry framework is designed to make Ajax functionality available to web designers or to developers that have had an introduction to JavaScript. The framework is designed to take advantage of the HTML and CSS skills you already have, and then add a bit of JavaScript to implement advanced functionality.

This tutorial steps you through building a Sliding Panels widget.

The Sliding Panels widget can be difficult to explain, but simple to understand once you see it. It consists of four parts:

• Window: This is the element that shows the content. Think of it as the "picture frame."
• Content group: This is an element that stores the content panels.
• Content panels: These are blocks of content, as many as are needed. These blocks are shown within the window. These are the "pictures" for the "picture frame."
• Navigation elements: These are, for example, links that change the panels.

Activating the navigation elements causes the selected panel to slide to the window. The interesting part about the Sliding Panels widget is that depending on the shape of the content group, the widget takes the shortest path to the desired panel, sliding vertically, horizontally, or diagonally. Let's build one.

Requirements

In order to make the most of this article, you need the following software and files:

(Optional) Dreamweaver CS3

• Try
• Buy

Spry Framework

• Learn more

Sample files:

• sliding_panel.zip (ZIP, 5.5K)

Prerequisite knowledge

Familiarity with building web pages CSS, and JavaScript.

Page 1 of 3

Next Page

About the author