Nested Sliding Panels from Data

I have a markup that looks like this:
<div id="sp" class="SlidingPanels" spry:region="ds0
ds1">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" spry:repeat="ds0">
<div id="
sp{ds_RowNumber}" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent"
spry:repeat="ds1">{img}</div>
</div>
</div>
</div>
</div>
</div>
How do I specify dynamic IDs in the constructor?

I'm not sure I follow. Both of these examples have static
IDs. My example has a potentially unlimited number of widgets (one
per row) with IDs generated dynamically. How do I list them all in
the constructor?
<script type="text/javascript">
var sp0 = new Spry.Widget.SlidingPanels('sp0');
var sp1 = new Spry.Widget.SlidingPanels('sp1');
var sp2 = new Spry.Widget.SlidingPanels('sp2');
var sp100 = new Spry.Widget.SlidingPanels('sp100');
</script>

Similar Messages

Sliding panels from data - single panel

I would like to use the spry sliding panels from data widget
with only 1 panel at a time. The sample has two at a time.
Most of the code makes sense, but every modification I try
breaks the next/previous navigation.

I modified the code from the example for you, so now it works
with just one panel visible.
Changes are:
set the width of the wigdet en
slidingpanel class to 250 instead of 500.
var numberOfPanelsPerView = 1
remove all the
spry:if="{ds_RowNumber} % 2 == 0" attributes
change
onclick="sp1.showPanel('p{prevStartIndex}') to
onclick="sp1.showPreviousPanel()
change
onclick="sp1.showPanel('p{nextStartIndex}') to
onclick="sp1.showNextPanel()
This all leads to the following code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Sliding Panels Sample</title>
<script type="text/javascript"
src="../../widgets/slidingpanels/SprySlidingPanels.js"></script>
<script src="../../includes/xpath.js"
type="text/javascript"></script>
<script src="../../includes/SpryData.js"
type="text/javascript"></script>
<style type="text/css">

</style>
<link href="../../css/samples.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<h3>Building a Sliding Panels widget with Spry
Data</h3>
<p>This sample creates a Sliding Panels widget by using
Spry Data to build the repeating markup. In this sample the content
panels are generated dynamically and the photo in each panel comes
from Spry Data. The text is static, which is just there for
example.</p>
<p>The content panel is generated in a Spry:repeat
region. An important thing in the panel widget is that each panel
should have a unique ID. This ID is generated with a Spry data
reference. Using the same method, the Panel links are generated the
same way, using the same data values. This ensures that the panel
links and IDs match up correctly. In this sample, the visible
window is twice as wide as the content panel. This allows for 2
panels to show at once. The links, therefore, need to show only
every other panel number. This will allow the panel to move by 2
content panels each time. To do this, a spry:if is used to only
display the even number panel numbers.</p>
<p>Note: Since this sample depends on Spry Data for the
content and markup, it will not degrade when JavaScript is turned
off. This sample shows how to construct this widget with Data.
Determine if this method fits your needs with degredation and
accessibility in mind. Also, this sample is more complicated only
because we are showing 2 panels at once and there are differing
lengths of text in the panels.</p>
<p>Page: <span spry:region="ds1"
spry:repeatchildren="ds1"> <a href="#"
onclick="sp1.showPanel('p{viewStartIndex}'); return
false;">{viewNumber}</a> </span></p>
<div class="widget">
<div id="apDiv1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1">
<div class="content"> <img
src="../../demos/products/{boximage}" width="75" height="56"
hspace="5" vspace="5" align="left" alt="Sample Images from Spry
Data." />
<p>{desc}</p>
</div>
<div class="panelnav left"><a href="#"
onclick="sp1.showPreviousPanel(); return
false;"><<
Previous</a> <a
href="#" onclick="sp1.showNextPanel(); return false;">Next
>></a></div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>
</div>
</div>
</body>
</html>

Nested Sliding Panel in an Accordion Panel

I have a nested Sliding Panel inside an Accordion Panel.
The Sliding panel will show until the Accordion panel is
completely closed then it abruptly hides itself.
It does this only in IE of course.
Not sure if a sliding panel can be properly nested inside an
Accordion panel so if anybody could please tell me I would really
appreciate it.
Thank you,
Bisser.

Hi kinblas,
I changed the AccordionPanelContent5 to "hidden" and it still
keeps the image displayed until the Accordion Panel closes, and
then the nested sliding panel image disappears abruptly. This only
happens in IE.
Any other suggestions would be welcome.
Thank you,
Bisser.

Changing sliding panels from black to white

Does anyone know whether the option to change the sliding panels theme from black to white is still possible in Photos 1.0?
We use this theme on all the DVD's we create of customers making their own rings with us but it appears it's been removed as an option.

Not at this time - suggest to Apple for future updates
LN

Nested sliding panels and xml

In this picture I try to explain my data set and the result I'm trying to obtain.
I can't however figure out how to do this without nested regions.
My code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CPS</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CP_ents" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">
          <table>
               <tr>
                    <td spry:when="{ds_CurrentRowID} == {ds_RowID}"
                             spry:setrow="ds_ents"
                                   spry:select="select"
                                   spry:hover="hover"
                                   spry:selected="">+</td>
                    <td>{ds_ents::id}</td>
               </tr>
          </table>
     </div>
     <div class="CollapsiblePanelContent" spry:region="ds_ents">
          <table>
               <tr spry:repeatchildren="ds_servs" spry:choose="">
                    <td> </td>
                    <td><div id="CP_servs" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="1">
                                   <table>
                                        <tr>
                                             <td width="50">+ servs</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_servs">
                                   <table>
                                        <tr spry:repeatchildren="ds_servs">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div>
                         <div id="CP_conts" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="2">
                                   <table>
                                        <tr>
                                             <td width="50">+ conts</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_conts">
                                   <table>
                                        <tr spry:repeatchildren="ds_conts">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div>
                         <div id="CP_stats" class="CollapsiblePanel">
                              <div class="CollapsiblePanelTab" tabindex="3">
                                   <table>
                                        <tr>
                                             <td width="50">+ stats</td>
                                             <td width="50">id</td>
                                             <td width="50">att1</td>
                                             <td width="50">att2</td>
                                        </tr>
                                   </table>
                              </div>
                              <div class="CollapsiblePanelContent" spry:region="ds_stats">
                                   <table>
                                        <tr spry:repeatchildren="ds_stations">
                                             <td width="50"> </td>
                                             <td width="50">{id}</td>
                                             <td width="50">{att1}</td>
                                             <td width="50">{att2}</td>
                                        </tr>
                                   </table>
                              </div>
                         </div></td>
               </tr>
          </table>
     </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and this is the XML data set:
<?xml version="1.0" encoding="UTF-8"?>
<ents>
     <ent>
          <id>0</id>
          <att1>pippo</att1>
          <servs>
               <serv>
                    <id>A</id>
                    <att1>blah</att1>
                    <att2>bla</att2>
               </serv>
               <serv>
                    <id>B</id>
                    <att1>bloh</att1>
                    <att2>blo</att2>
               </serv>
               <serv>
                    <id>C</id>
                    <att1>bluh</att1>
                    <att2>blu</att2>
               </serv>
          </servs>
          <conts>
               <cont>
                    <id>a</id>
                    <att1>hwrtfgh</att1>
               </cont>
               <cont>
                    <id>b</id>
                    <att1>asdf</att1>
               </cont>
          </conts>
          <stats>
               <stat>
                    <id>1</id>
                    <att1>FDSA</att1>
                    <att2>OIUY</att2>
               </stat>
               <stat>
                    <id>2</id>
                    <att1>Bm76g</att1>
                    <att2>87f5r6</att2>
               </stat>
               <stat>
                    <id>3</id>
                    <att1>iugy</att1>
                    <att2>TY765</att2>
               </stat>
               <stat>
                    <id>4</id>
                    <att1>YT d</att1>
                    <att2>f865f</att2>
               </stat>
          </stats>
     </ent>
     <ent>
          <id>1</id>
          <att1>pluto</att1>
          <servs>
               <serv>
                    <id>A</id>
                    <att1>muuh</att1>
               </serv>
               <serv>
                    <id>B</id>
                    <att1>mooh</att1>
               </serv>
               <serv>
                    <id>C</id>
                    <att1>meeh</att1>
               </serv>
          </servs>
          <conts>
               <cont>
                    <id>a</id>
                    <att1>uff</att1>
               </cont>
               <cont>
                    <id>b</id>
                    <att1>aff</att1>
               </cont>
          </conts>
          <stats>
               <stat>
                    <id>1</id>
                    <att1>KJHGKJGH</att1>
                    <att2>TRSDYTRD</att2>
               </stat>
               <stat>
                    <id>2</id>
                    <att1>TRUTFC</att1>
                    <att2>POJNC</att2>
               </stat>
               <stat>
                    <id>3</id>
                    <att1>EWZYT</att1>
                    <att2>OUYTFSA</att2>
               </stat>
               <stat>
                    <id>4</id>
                    <att1>XGBUI</att1>
                    <att2>IUGDS</att2>
               </stat>
          </stats>
     </ent>
</ents>

Step by step I'm closing in.
I'm using the {ds_currentRowId} variable to increment the div panel ID (see code below)
The only issue is that since I have 1 master dataset and three detail dataset nested, I need to calculate the ID, taking the {ds_CurrentRowID} for each dataset and perform some math, to ensure they nicely grow until all the XML is consumed.
Anyone would be so nice to point me in the right direction?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CPS</title>
     <script src="SpryAssets/xpath.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
     <script src="SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
     <script type="text/javascript">
     
     </script>
     <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
     <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="panel" spry:repeat="ds_ents" spry:region="ds_ents ds_cnts ds_srvs ds_stts">
     <script type="text/javascript">
          
     </script>
          <div id="CP_ents{ds_ents::ds_CurrentRowID}" class="CollapsiblePanel">
               <div class="panel-title" tabindex="{ds_ents::ds_CurrentRowID}">
                    <table class="table-title">
                         <tr>
                              <td width="150">+</td>
                              <td width="150">{id}</td>
                              <td width="150">{att1}</td>
                         </tr>
                    </table>
               </div>
               <div spry:even="table-even" spry:odd="table-odd">
                    <table>
                         <tr>
                              <td> </td>
                              <td>
                                   <script type="text/javascript">
                                        
                                   </script>
                                   <div id="CP_srvs{ds_srvs::ds_CurrentRowID}" class="CollapsiblePanel">
                                        <div class="subtable-title" tabindex="{ds_srvs::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ srvs</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_srvs">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_srvs::id}</td>
                                                       <td width="150">{ds_srvs::att1}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                                   <div id="CP_cnts{ds_cnts::ds_CurrentRowID}" class="subtable">
                                        <div class="subtable-title" tabindex="{ds_cnts::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ cnts</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                       <td width="150">att2</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_cnts">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_cnts::id}</td>
                                                       <td width="150">{ds_cnts::att1}</td>
                                                       <td width="150">{ds_cnts::att2}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                                   <div id="CP_stts{ds_stts::ds_CurrentRowID}" class="CollapsiblePanel">
                                        <div class="subtable-title" tabindex="{ds_stts::ds_CurrentRowID}">
                                             <table>
                                                  <tr>
                                                       <td width="150">+ stats</td>
                                                       <td width="150">id</td>
                                                       <td width="150">att1</td>
                                                       <td width="150">att2</td>
                                                  </tr>
                                             </table>
                                        </div>
                                        <div spry:even="subtable-even" spry:odd="subtable-odd">
                                             <table>
                                                  <tr spry:repeat="ds_stts">
                                                       <td width="150"> </td>
                                                       <td width="150">{ds_stts::id}</td>
                                                       <td width="150">{ds_stts::att1}</td>
                                                       <td width="150">{ds_stts::att2}</td>
                                                  </tr>
                                             </table>
                                        </div>
                                   </div>
                              </td>
                         </tr>
                    </table>
               </div>
          </div>
     </div>
</body>
</html>

Sliding Panels: displaying active panel number, total panel count, etc.

I have an XML-generated Sliding Panels widget. How do I fetch the active panel number, total panel count, and disable Previous/Next buttons based on panel's place in the sequence?
In other words:
Panel 1 of 3 | < Previous (disabled) | Next >
Panel 1 (active)
Panel 2
Panel 3

I've not seen an example of exactly what you're trying to do, but take a look at the code for this page:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
It dynamically builds up the sliding panel from data and dynamically creates the list of numbered links based upon the number of panels.
In a quick look, there isn't a method of the Sliding panel object which tells you the index of the current panel, but you can get that by calling getCurrentPanel() and then loop over the panels which you can obtain by getContentPanels() and checking against each panel to see if it is the current panel and then that's the index of your current panel. From there you can set the "(active)" label and enable and disable the previous and next buttons, if you're at index 0, then disable previous and if your at getContentPanelsCount()-1 then you're at the end.

How to Create a DVD from sliding Panels Slideshow.

I have the latest MacBook and iLife software.
I have created a 650 picture slideshow in Sliding Panels theme. It is 1.1 GB.
I have tried to (1) export and (2) Create iDVD through "Share". In both cases I get the message that I do not have sufficient Disc space. I have 23GB of available disc space.
I am probably doing something wrong but any CLEAR instructions?
Scottjohnw

Welcome to the Apple Discussions. What system version are you running? As a precursor to trying the following fixes download and reapply the Mac OS X v10.6.3 v1.1 Update (Combo) updater if you're running Snow Leopard or the Mac OS X 10.5.8 Combo Update if you're running Leopard. Follow that with a repair of disk permissions. Then try the export again. If still not working continue with the fixes below:
First delete the iPhoto preference file, com.apple.iPhoto.plist, that resides in your User/Library/Preferences folder and try again.
If that doesn't help backup and launch iPhoto with the Command+Option keys depressed to rebuild the library. Select the last three options.
Click to view full size

Two or more spry sliding panels nested in tabbed panels?

Hi
I have a tabbed panel widget on one page. Inside the first
tab I inserted a sliding panel widget. Now this works fine.
I put another sliding panel widget into the second panel.
I changed the div id ( <div id="panelwidget2"
class="SlidingPanels"> ) and placed a second variable at the end
of the code ( var sp2 = new
Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
panel doesn't work and Dreamweaver highlights <div
id="panelwidget2" class="SlidingPanels"> as invalid code.
What do I do wrong?
Here's the code of the page:
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SprySlidingPanels.js"
type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<table border="0">
<tr>
<td><div id="TabbedPanels1"
class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab
1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab
2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><div
align="center"><span class="style3"><a href="#"
onclick="sp1.showFirstPanel();">Bild l</a> | <a
href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent aliquam, Phasellus
trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">
<div align="center"><span class="style3"><a
href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
<a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
<a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
<a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget2" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Sliding Panels Help for Javascript Idiot

I have a simple thumbnail gallery to which I am attempting to
apply the Spry Sliding Panels widget. I am creating the gallery
from an xml file, and this seems to be working fine.
I looked at the code of the Sliding Panels examples, but
being the Spry and javascript idiot that I am, I was not able to
incorporate the Sliding Panels successfully. Would someone mind
taking a look at my code and perhaps commenting about how I would
go about adding the sliding panel? I would appreciate it.
P.s., I currently have 5 thumbnails visible. I would like to
slide to the next 5 on the click of the arrows that are included.
Here is the code, without any of my failed attempts at SP
included:

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright">
<a href="#">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft">
<a href="#">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>

Thanks for the response.
I have tried to implement that, and it still does not work.
Here is my code with it implemented.
Thanks again.
<script type="text/javascript">

</script>
<script type="text/javascript"
src="scripts/gallery.js"></script>
<<<<<<<<<<<<<<body>>>>>>>>>>>>>>>

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright" spry:if="{ds_RowNumber} % 2 == 0
&& {prevStartIndex} >= 0">
<a href="#" onclick="sp1.showPanel('p{prevStartIndex}');
return false;">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft"spry:if="{ds_RowNumber} % 2 != 0
&& {nextStartIndex} < {ds_RowCount}">
<a href="#" onclick="sp1.showPanel('p{nextStartIndex}');
return false;">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("thumbsmask");
</script>

Trying to come to grips with sliding panels and datasets

Hi there!
I've just started looking into Spry (love it so far!) but
having an issue combining the sliding panels widget and a Spry
dataset. The widget works fine and the dataset works fine when
seperate, but I come up against some problems when I combine them.
As a guide, I've been using the following page:
http://www.pixelz.co.uk/spryArticle.htm
(copy of the article in the Spry Zip file)
and using the Scenario 2 example at the end of the page.
Unfortunately, there were a few bugs in it (like a colon
where there should have been a semicolon and no titles in the
navigation <a> tags at the top) so I did a little debugging
and tied in my own dataset. The code that is running on this page (
http://www.pixelz.co.uk/spryTest.html)
looks like so:
quote:
<head>
<script language="javascript" type="text/javascript"
src="includes/xpath.js"></script>
<script language="javascript" type="text/javascript"
src="includes/SpryData.js"></script>
<script language="javascript" type="text/javascript" >
var dsTest = new Spry.Data.XMLDataSet("data/xmlTest.xml",
"specials/menu_item");
</script>
<script language="javascript" type="text/javascript"
src="includes/SprySlidingPanels.js"></script>
<link href="includes/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="dsTest" spry:repeatchildren="dsTest">
<a href="#"
onclick="sp1.showPanel('detail{ds_RowID}');">Page
{ds_RowID}</a>
</div>
<div id="sPanel" class="SlidingPanels"
spry:region="dsTest">
<div class="SlidingPanelsContentGroup"
spry:repeat="dsTest">
<div id="detail{ds_RowID}"
class="SlidingPanelsContent">
<h3>{item}</h3>
<p>{description}</p>
<p><strong>{price}</strong></p>
</div>
</div>
<script language="javascript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("sPanel");
</script>
</div>
</body>
The problem I'm having is that the panels don't change when
the links are clicked. It seems to pull in the data fine, but the
panels dont switch.
When I looked at the generated source, it doesn't look quite
right:
quote:
<body>
<div id="spryregion1" class="">
<a onclick="sp1.showPanel('detail0');" href="#">Page
0</a>
<a onclick="sp1.showPanel('detail1');" href="#">Page
1</a>
<a onclick="sp1.showPanel('detail2');" href="#">Page
2</a>
<a onclick="sp1.showPanel('detail3');" href="#">Page
3</a>
</div>
<div id="sPanel" class="SlidingPanels" style="overflow:
hidden;">
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail0" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail1" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail2" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
<div class="SlidingPanelsContentGroup" style="left: 0px;
top: 0px;">
<div id="detail3" class="SlidingPanelsContent
SlidingPanelsCurrentPanel">
</div>
</div>
</div>
</body>
I'm not sure, but I think the repeating region is a bit
screwy, but I'm really not sure where to proceed from here.
Any help would be appreciated! Thanks!
Gareth

Right - fixed it!
<div class="SlidingPanelsContentGroup"
spry:repeat="dsTest">
<div id="detail{ds_RowID}"
class="SlidingPanelsContent">
should have read
<div class="SlidingPanelsContentGroup">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsTest">
oh well...

Sliding Panels Navigation Question

I'm using the sliding panels widget to display some image
thumbnails. The problem is, I'm displaying about 5 or so at a time,
and the showNextPanel function only moves the whole thing over by
one thumbnail, making it necessary to click it five times to show
the next set of thumbnails.
Mangled test file can be found
here.

Hello Luke,
I see there are 3 problems here you want/have to solve:
1. On page load you try to animate an element in page that
doesn't exists: thimbContainer. Every time you load the page in the
browser 3 alerts that the element is not found are generated by the
Spry Effects because the element isn't there. Please remove the
following code from the onload attribute attached to the body tag:
MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
2. The move next arrow doesn't work on the first click. The
problem appears because the SlidingPanel widget is instantiated
before the data to be putted in place in your page by the ds1 XML
DataSet. The regions are populated on page finish with the data but
the SlidingPanel widget will still try to animate the old,
incorrect element on the first click. To avoid this problem you'll
have to remove from page the SlidingPanel instantiation and
register a listener on the 'ticker' region update. Remove this
code:
<script type="text/javascript">
var sp = new Spry.Widget.SlidingPanels("ticker");
</script>
and just after the ds1 DataSet instantiation add the
following line:
Spry.Data.Region.addObserver('ticker',
{onPostUpdate:function(){sp = new
Spry.Widget.SlidingPanels("ticker");}});
3. To move the slider with the next 5 or prev 5 elements
you'll have to create your own functions that should add or
subtract from the current display index 5. The functions you look
for are:
function moveNextFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
var maxPanels = sp.getContentPanels().length;
if (idx > maxPanels)
idx = maxPanels;
sp.showPanel(idx);
function movePrevFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
var minPanels = 0
if (idx < minPanels)
idx = minPanels;
sp.showPanel(idx);
Please change the onclick for the previous and next arrows in
your Sliding Panels with calls to these 2 functions.
Regards,
Cristian

Sliding Panels Sample

I'm trying to pull a data set from xml into the Unobtrusive
Sliding Panels Sample from
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_unobtrusive.ht ml
but I'm not sure where to set it up to repeat and how to tag it so
that it actually pulls the data in...you can see what I have so far
(and the source code) at:
http://www.brianwpiper.com/demos/slider.htm
Thanks!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Unobtrusive Sliding Panels Sample</title>
<script type="text/javascript"
src="widgets/slidingpanels/SprySlidingPanels.js"></script>
<script type="text/javascript"
src="includes/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="sp_unobtrusive.js"></script>
<script type="text/javascript">

<link href="widgets/slidingpanels/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="samples.css" rel="stylesheet" type="text/css"
/>
<link href="slider.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h3>Project Gallery</h3>
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup"
spry:region="dsTest" spry:repeatchildren="dsTest">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsProducts">
<div spry:detailregion="dsProducts" class="content">
<img src="{boximage}" alt="project screenshot"
width="{width}" height="{height}"/>
</div>
<div spry:detailregion="dsProducts">{desc}</div>
<div><a href="{link}"
target="blank">{linkText}</a></div>
</div>
</div>
</div>
<p class="navLinks">
<a href="#" id="link5">1</a> |
<a href="#" id="link6">2</a> |
<a href="#" id="link7">3</a>
</p>
</div>
</body>
</html>

Sweet!! Getting much closer. I had to remove a few extra
detailregion tags I had in there. Now the only issue is that the
numbers at the bottom don't actually jump to page 2 & 3, and in
the static htm sample, it also had a Next or Prev tags that would
have to be conditionally added...not sure how that would work...
Hmm...and it doesn't seem to work in IE at all??
Thanks for your help!! Any ideas on the other two issues and
the browser problem would be MUCH appreciated...

Sliding Panel Animation

I'm trying to adjust the easing of the sliding panel
animation. I'm hoping it will start up a little slower before
zipping off screen.
I'm trying to replicate the motion of this slider:
http://www.ndoherty.com/demos/coda-slider/1.1/
I think the needed changes are in this part of
SprySlidingPanels.js, but I can't figure it out. Can anybody help?
Thanks!!
Spry.Widget.SlidingPanels.PanelAnimator
= function(ele, curX, curY, dstX, dstY, opts)
this.element = ele;
this.curX = curX;
this.curY = curY;
this.dstX = dstX;
this.dstY = dstY;
this.fps = 60;
this.duration = 500;
this.transition =
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
this.startTime = 0;
this.timerID = 0;
this.finish = null;
var self = this;
this.intervalFunc = function() { self.step(); };
Spry.Widget.SlidingPanels.setOptions(this, opts, true);
this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition =
function(time, begin, finish, duration) { time /= duration; return
begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start =
function()
this.stop();
this.startTime = (new Date()).getTime();
this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop =
function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step =
function()
var elapsedTime = (new Date()).getTime() - this.startTime;
var done = elapsedTime >= this.duration;
var x, y;
if (done)
x = this.curX = this.dstX;
y = this.curY = this.dstY;
else
x = this.transition(elapsedTime, this.curX, this.dstX -
this.curX, this.duration);
y = this.transition(elapsedTime, this.curY, this.dstY -
this.curY, this.duration);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
if (!done)
this.timerID = setTimeout(this.intervalFunc, this.interval);
else if (this.finish)
this.finish();

Another change I made based on nice features of the Coda
Slider I referenced above:
Able to Link/Bookmark particular panels
We want to add an anchor hashes (#1, #2, #3 etc) to the url
for each panel, and then in the js file, extract the hash and make
it the default.
IN THE HTML:

<a href="#1" onclick="sp2.showPanel(0); return
true;">1</a> |
<a href="#2" onclick="sp2.showPanel(1); return
true;">2</a> |
<a href="#3" onclick="sp2.showPanel(2); return
true;">3</a> |
<a href="#4" onclick="sp2.showPanel(3); return
true;">4</a> |
<a href="#5" onclick="sp2.showPanel(4); return
true;">5</a>

<div id="example2" class="SlidingPanels" tabindex="0">
<div class="SlidingPanelsContentGroup">
<div id="ex2_p1" class="SlidingPanelsContent
p1"><img src="image1.jpg" ></div>
<div id="ex2_p2" class="SlidingPanelsContent
p2"><img src="image2.jpg"></div>
<div id="ex2_p3" class="SlidingPanelsContent
p3"><img src="images3.jpg"></div>
<div id="ex2_p4" class="SlidingPanelsContent
p4"><img src="images4.jpg"></div>
<div id="ex2_p5" class="SlidingPanelsContent
p5"><img src="image5.jpg"></div>
</div>
</div>
IN THE Spry.SlidingPanels.js FILE:
// Add this right before the part about default
// NEW STUFF HERE
// Grabs the number after the hash and makes it the default
// Note: had to add the hashes to the <a href> and set
return to true
this.defaultPanel = parseInt(location.hash.slice(1));
this.defaultPanel = this.defaultPanel-1;
// my hash numbers start at 1 but the array starts at 0, so
subtracted 1 from mine
// Back to regularly scheduled programming
// END NEW STUFF
Hope this helps someone.

Spry Sliding Panels - current panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you guys help me do these fixes on the js? ( the one you think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.
This is the SprySlidingPanels.js:
// SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.SlidingPanels = function(element, opts)
    this.element = this.getElement(element);
    this.enableAnimation = true;
    this.currentPanel = null;
    this.enableKeyboardNavigation = true;
    this.hasFocus = false;
    this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;
    this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;
    this.currentPanelClass = "SlidingPanelsCurrentPanel";
    this.focusedClass = "SlidingPanelsFocused";
    this.animatingClass = "SlidingPanelsAnimating";
    Spry.Widget.SlidingPanels.setOptions(this, opts);
    if (this.element)
        this.element.style.overflow = "hidden";
    // Developers can specify the default panel as an index,
    // id or an actual element node. Make sure to normalize
    // it into an element node because that is what we expect
    // internally.
    if (this.defaultPanel)
        if (typeof this.defaultPanel == "number")
            this.currentPanel = this.getContentPanels()[this.defaultPanel];
        else
            this.currentPanel = this.getElement(this.defaultPanel);
    // If we still don't have a current panel, use the first one!
    if (!this.currentPanel)
        this.currentPanel = this.getContentPanels()[0];
    // Since we rely on the positioning information of the
    // panels, we need to wait for the onload event to fire before
    // we can attempt to show the initial panel. Once the onload
    // fires, we know that all CSS files have loaded. This is
    // especially important for Safari.
    if (Spry.Widget.SlidingPanels.onloadDidFire)
        this.attachBehaviors();
    else
        Spry.Widget.SlidingPanels.loadQueue.push(this);
Spry.Widget.SlidingPanels.prototype.onFocus = function(e)
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
    return false;
Spry.Widget.SlidingPanels.prototype.onBlur = function(e)
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
    return false;
Spry.Widget.SlidingPanels.KEY_LEFT = 37;
Spry.Widget.SlidingPanels.KEY_UP = 38;
Spry.Widget.SlidingPanels.KEY_RIGHT = 39;
Spry.Widget.SlidingPanels.KEY_DOWN = 40;
Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
        return true;
    if (key == this.nextPanelKeyCode)
        this.showNextPanel();
    else /* if (key == this.previousPanelKeyCode) */
        this.showPreviousPanel();
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
    var ele = this.element;
    if (!ele)
        return;
    if (this.enableKeyboardNavigation)
        var focusEle = null;
        var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
        if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
            focusEle = ele;
        if (focusEle)
            var self = this;
            Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
            Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
            Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
    if (this.currentPanel)
        // Temporarily turn off animation when showing the
        // initial panel.
        var ea = this.enableAnimation;
        this.enableAnimation = false;
        this.showPanel(this.currentPanel);
        this.enableAnimation = ea;
Spry.Widget.SlidingPanels.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
            children.push(child);
        child = child.nextSibling;
    return children;
Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()
    return this.currentPanel;
Spry.Widget.SlidingPanels.prototype.getContentGroup = function()
    return this.getElementChildren(this.element)[0];
Spry.Widget.SlidingPanels.prototype.getContentPanels = function()
    return this.getElementChildren(this.getContentGroup());
Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()
    return this.getContentPanels().length;
Spry.Widget.SlidingPanels.onloadDidFire = false;
Spry.Widget.SlidingPanels.loadQueue = [];
Spry.Widget.SlidingPanels.addLoadListener = function(handler)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('load', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('load', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onload', handler);
Spry.Widget.SlidingPanels.processLoadQueue = function(handler)
    Spry.Widget.SlidingPanels.onloadDidFire = true;
    var q = Spry.Widget.SlidingPanels.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen; i++)
        q[i].attachBehaviors();
Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.pr ocessLoadQueue);
Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent("on" + eventType, handler);
    catch (e) {}
Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)
    if (ele)
        ele = this.getElement(ele);
        var panels = this.getContentPanels();
        var numPanels = panels.length;
        for (var i = 0; i < numPanels; i++)
            if (panels[i] == ele)
                return i;
    return -1;
Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
    var pIndex = -1;
    if (typeof elementOrIndex == "number")
        pIndex = elementOrIndex;
    else // Must be the element for the content panel.
        pIndex = this.getContentPanelIndex(elementOrIndex);
    var numPanels = this.getContentPanelsCount();
    if (numPanels > 0)
        pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
    else
        pIndex = 0;
    var panel = this.getContentPanels()[pIndex];
    var contentGroup = this.getContentGroup();
    if (panel && contentGroup)
        if (this.currentPanel)
            this.removeClassName(this.currentPanel, this.currentPanelClass);
        this.currentPanel = panel;
        var nx = -panel.offsetLeft;
        var ny = -panel.offsetTop;
        if (this.enableAnimation)
            if (this.animator)
                this.animator.stop();
            var cx = contentGroup.offsetLeft;
            var cy = contentGroup.offsetTop;
            if (cx != nx || cy != ny)
                var self = this;
                this.addClassName(this.element, this.animatingClass);
                this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
                    self.removeClassName(self.element, self.animatingClass);
                    self.addClassName(panel, self.currentPanelClass);
                this.animator.start();
        else
            contentGroup.style.left = nx + "px";
            contentGroup.style.top = ny + "px";
            this.addClassName(panel, this.currentPanelClass);
    return panel;
Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()
    return this.showPanel(0);
Spry.Widget.SlidingPanels.prototype.showLastPanel = function()
    return this.showPanel(this.getContentPanels().length - 1);
Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()
    return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);
Spry.Widget.SlidingPanels.prototype.showNextPanel = function()
    return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);
Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)
    this.element = ele;
    this.curX = curX;
    this.curY = curY;
    this.dstX = dstX;
    this.dstY = dstY;
    this.fps = 60;
    this.duration = 500;
    this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
    this.startTime = 0;
    this.timerID = 0;
    this.finish = null;
    var self = this;
    this.intervalFunc = function() { self.step(); };
    Spry.Widget.SlidingPanels.setOptions(this, opts, true);
    this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()
    this.stop();
    this.startTime = (new Date()).getTime();
    this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()
    if (this.timerID)
        clearTimeout(this.timerID);
    this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()
    var elapsedTime = (new Date()).getTime() - this.startTime;
    var done = elapsedTime >= this.duration;
    var x, y;
    if (done)
        x = this.curX = this.dstX;
        y = this.curY = this.dstY;
    else
        x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);
        y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);
    this.element.style.left = x + "px";
    this.element.style.top = y + "px";
    if (!done)
        this.timerID = setTimeout(this.intervalFunc, this.interval);
    else if (this.finish)
        this.finish();

Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

Nested Sliding Panels from Data

Similar Messages

Maybe you are looking for