Accessibility

Dreamweaver Article

 

Building a Spry Sliding Panels widget


Table of Contents

  1. Introduction
  2. Preparing the page
  3. Configuring the panel group

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.

  1. Create a blank HTML page and save it next to the SpryAssets folder that you downloaded and unzipped.

  2. 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.

  3. Add a div tag to the body. This is the "window" and also the overall container tag of the widget. Add an id attribute to the div tag. This is used to identify the widget to Spry. Also, add a class attribute. Give it a value of SlidingPanels. Remember that CSS and JavaScript are case-sensitive. 

    <div id="panelwidget" class="SlidingPanels"></div>

  4. Now is a good time to look at the CSS. Open the SprySlidingPanels.css file.

    When you look at the .SlidingPanels class, 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.

  5. Add a div within the initial div. This will serve as the content group. All the content containers go within this div. Add a class attribute. Give a value of SlidingPanelsContentGroup. 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.

  6. 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.

  7. 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.

  8. 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.

Page 2 of 3
Previous Page
Next Page