Building a Spry Sliding Panels widget
Requirements
Prerequisite knowledge
Familiarity with building web pages CSS, and JavaScript.
User level
Beginning
Sample files
- sliding_panel.zip (7 KB)
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.
Preparing the page
One of the goals of the Spry Framework is to keep the number of dependent files to a minimum. For the Sliding Panels widget, you need to attach one JavaScript file and one CSS file.
- Create a blank HTML page and save it next to the SpryAssets folder that you downloaded and unzipped.
- Type the following code into the
<head>section of your HTML document in the Code window. This attaches the JavaScript and CSS files for the widget:
<script type="text/javascript"
src="SpryAssets/SprySlidingPanels.js"></script>
<link type="text/css" rel="stylesheet"
href="SpryAssets/SprySlidingPanels.css">
Note: If these dependent files are in a different place, make sure that the paths match your project's folder structure.
Editing the CSS enables you to control the size of the window, the content panels, and the content container. Next, you will add the HTML markup for the widget.
- Add a div tag to the body. This is the "window" and also the overall container tag of the widget. Add an
idattribute to the div tag. This is used to identify the widget to Spry. Also, add aclassattribute. Give it a value ofSlidingPanels. Remember that CSS and JavaScript are case-sensitive.
<div id="panelwidget" class="SlidingPanels"></div>
- Now is a good time to look at the CSS. Open the SprySlidingPanels.css file.
When you look at the
.SlidingPanelsclass, you can see that this is the style controlling the window. For this project, the window is 300px by 300px. The CSS file contains good comments, describing the ideas behind the rules.Back to the HTML file.
- Add a div within the initial div. This will serve as the content group. All the content containers go within this div. Add a
classattribute. Give a value ofSlidingPanelsContentGroup. This style controls the size of the content group and determines how the widget will scroll.
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup"></div>
</div>
Next, you will add the content panels. These divs will hold the actual page info. The height and width of the content panels should match the size of the window: 300x300. The content should fit this window size, or you can ensure that scrollbars will give access to longer content.
- To the inner div, add a set of divs, the number of content panels you will need. For this project, you will use 6. Give them a class of
SlidingPanelsContent. You will also add ids to the divs so that you can easily refer to a specific panel in our navigation.
<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>
Next, you need a small bit of JavaScript to activate this widget. This script has to go below the widget markup.
- Add the constructor script as described below:
<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>
In this instance, sp1 is the name of this instance of the widget. You will use this name to refer to it in the navigation. Note that the value in the constructor is the id of the main widget container.
That is the extent of the markup you need to build the actual panels. The only remaining markup is the navigation. You will add this next so you can move the panels and see how the CSS affects them.
Navigation is handled by calling pre-built JavaScript functions that scroll the panels. You can call functions for Next panel or Previous panel, or you can call a specific panel by passing either the panel id (which is why you added them before), or the panel number, which is the number of the panel div, counting in order in which they appear in the markup.
- Add the following links:
<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>
<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>
The CSS file used in this article contains background colors for these particular IDs.
At this stage, you should be able to view the page in the browser and clicking the links, the panels should move. With the default CSS, the panels should move up and down.
The top DIV is the window through which you will display the content. Behind this window is the big container of the content panels. It's the size of the content container that determines the layout of the panels, and therefore, how the content panels will scroll.
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.
More Like This
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Using the Adobe Widget Browser
- Exchanging data using the Spry framework for Ajax and PHP
- Customizable starter designs for beginners
- Creating dynamic tables with the Spry framework
- Packaging widgets with the Adobe Widget Browser
- Applying design to Spry widgets
- Designing for web publishing
- Building a photo album with the Spry framework
- Understanding Spry basics
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
