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">
<!--
var ds_ents = new Spry.Data.XMLDataSet("data2.xml", "ents/ent");
var ds_servs = new Spry.Data.NestedXMLDataSet(ds_ents, "servs/serv");
var ds_conts = new Spry.Data.NestedXMLDataSet(ds_ents, "conts/cont");
var ds_stats = new Spry.Data.NestedXMLDataSet(ds_ents, "stats/stat");
//-->
</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">
<!--
var CP_ents = new Spry.Widget.CollapsiblePanel("CP_ents");
var CP_servs = new Spry.Widget.CollapsiblePanel("CP_servs");
var CP_conts = new Spry.Widget.CollapsiblePanel("CP_conts");
var CP_stats = new Spry.Widget.CollapsiblePanel("CP_stats");
//-->
</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">
     <!--
          var ds_ents = new Spry.Data.XMLDataSet("data/data2.xml", "ents/ent");
          var ds_srvs = new Spry.Data.NestedXMLDataSet(ds_ents, "servs/serv");
          var ds_cnts = new Spry.Data.NestedXMLDataSet(ds_ents, "conts/cont");
          var ds_stts = new Spry.Data.NestedXMLDataSet(ds_ents, "stats/stat");
     //-->
     </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">
          <!--
          var CP_ents = new Spry.Widget.CollapsiblePanel{ds_ents::ds_CurrentRowID}
          //-->
     </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">
                                        <!--
                                        var CP_srvs = new Spry.Widget.CollapsiblePanel{ds_srvs::ds_CurrentRowID};
                                        var CP_cnts = new Spry.Widget.CollapsiblePanel{ds_cnts::ds_CurrentRowID};
                                        var CP_stts = new Spry.Widget.CollapsiblePanel{ds_srvs::ds_CurrentRowID};
                                        //-->
                                   </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>

Similar Messages

  • Sliding panels and xml

    Hi,
    My basic problem is this:
    Where should I nest the script tag containing the js for
    making the widget when using spry:repeat="data" so that my links to
    move the panels work first time? Currently they need to be clicked
    once to settle things down, and then they function normally.
    My code looks like this:
    <div id="slidingPanel_1" class="SlidingPanels"
    spry:region="ds1">
    <div class="SlidingPanelsContentGroup">
    <div id="content{ds_RowID}" class="SlidingPanelsContent
    {function::backgroundFunc}" spry:repeat="ds1">
    Do you know what {lang1word} means?
    </div>
    </div>
    </div>
    <script>
    sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1")
    </script>
    I have tried nesting it as suggested on the overview page
    like this:
    <div id="slidingPanel_1" class="SlidingPanels"
    spry:region="ds1">
    <div class="SlidingPanelsContentGroup">
    <div id="content{ds_RowID}" class="SlidingPanelsContent
    {function::backgroundFunc}" spry:repeat="ds1"
    style="text-align:center;">
    Do you know what {lang1word} means?
    </div>
    </div>
    <script>
    sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    </script>
    </div>
    However I still have the same problem. However, if I opt for
    the rather ghetto method of setting the creation of the widget on a
    timer, everything works just fine. I have tried looking at the
    sample, but I cannot fathom what the differences are!
    Thanks,
    Ben
    PS I did notice a similar unresolved thread, I wanted to
    append this post to it but I couldn't find it again.

    Hi Ben,
    Look at this sample, it shows you 2 methods of invoking your
    constructor for a widget built-up with data:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
    Personally, the approach that I think is the best is to
    register an onPostUpdate observer ... that way the constructor is
    only ever called after the region is updated.
    --== Kin ==--

  • Sliding divs and XML content

    I was asking if the sliding panels can be populated with an XML repeating region. I used Donald Booths tutorial about sliding panels and loaded an XML 'table' like this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XML Slide</title>
    <script type="text/javascript"
        src="../SpryAssets/SprySlidingPanels.js"></script>
    <script src="../SpryAssets/xpath.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet"
        href="../SpryAssets/SprySlidingPanels.css">
    <style type="text/css">
    .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;
    </style>
    <script type="text/javascript">
    var dsLet = new Spry.Data.XMLDataSet("LetItSlide_Exp_02.xml", "slide/row");
    dsLet.setColumnType("order", "html");
    dsLet.setColumnType("link", "html");
    </script>
    </head>
    <body>
    <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" spry:region="dsLet">
      <div class="SlidingPanelsContentGroup" spry:repeat="dsLet">
        <div class="SlidingPanelsContent" id="p{order}">{link}</div>
      </div>
    </div>
    <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    </body>
    </html>
    I put {order} in the SlidingPanelsContent identity to number/name these Div containers. Viewing in Live Code, the code looks like I would expect it to. But when I select the next link the 'next' panel doesn't show content. What do I need to know to make this work? Is there a tutorial about this combo?

    Have a look here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
    Gramps

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

  • 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 and Detail Regions

    I'm trying to get a detailregion div to update whenever the
    panel in a sliding panels widget changes. Basically, whatever panel
    it's on, the detailregion div will change depending on what that
    panel is. Is this possible? I've tried using setrow but I'm not
    sure if I'm doing it right.

    Hi, thanks for your reply.
    At the moment the player does stops when you go to another page (not slide) and doesnt keep playing. Its all working very well on the pages. See test page
    http://homepage.mac.com/nigelgrimshawjones/Candy_Lane/index.html
    Its just that on the shows events page there are sliding panels where we go through each show. For each new show (panle) she wants a different song to automatically play.
    I have set it up with a seperate player for each slide but unlike going from page to page, from slide to slide the music doesnt stop by itself. The test site has the old version with just one player at the top.
    There probably is something I could do in Flash but I dont know what. Its a complicated thing (for me)
    I was wondering if I could just use html music for those slides. I only need one song to play for each slide. But I need the song to stop when it goes to the next slide, (and the next song to start obviously)
    Any ideas are much appreciated. This job is supposed to be finished and its the last request from the client.
    Nige

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

  • Having trouble with flash and linking to Sliding panels - PLEASE help

    Having trouble with Sliding panels and flash. Otherwise everything works fine but when I'm trying to implement the link
    <a href="#" onclick="sp1.showPanel('panel1'); return false;">Panel1</a>
    to a flash button I get confused. I have tried following
    on (press) {
    getURL("javascript:sp1.showPanel('panel1');");
    and it did not work. What would you suggest? I am desperate. Please help me! Any suggestions are highly appreciated!!!!

    Thanks for your answer!
    I have tried both sp1.ShowPanel('panel1'); and window.sp1.ShowPanel('panel1'); they both give blank window with [object]
    I have found a solution that works in other browsers, but not in IE. Well basicly it works, but after a few clicks IE freezes.
    on (press) {
    getURL("javascript:sp1.showPanel('panel1'); void(0);");
    Would you happen to have a solution other than that? I believe that the void(0); causes the IE to freeze.

  • SIFR 3 and Spry Sliding Panels

    I am having trouble combining spry sliding panels and sIFR 3
    r419 in firefox. Implementation works perfectly in IE6 & 7 but
    in FF3 the headings flicker as one panel slides out and as another
    slides in.
    I have tried adding sIFR.replace to onclick to combat this,
    as described in another post but to no avail.
    Does anyone have any suggestions?
    Many thanks
    Marcel

    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.

  • Background image instead of color for each sliding panel

    I'm working with sliding panels and trying to add some style to the page.  I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but  I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser.  Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
    any help would be great!

    Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
    The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
    Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
    I see that you have
    <p>
      </p><div class="slidingpanelandtab">
        <blockquote>
          <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
        </blockquote>
    Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
    I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
    Beth

  • Safari 4 problems - HTMLDataSet/Sliding Panels

    Hi,
    I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4.  For some reason the detailRegions are not loading properly in Safari 4.  I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either.  IE and FF seem to be working fine still.  Any help would be greatly appreciated.  I'm very new to this so please bear with me if I have any glaring mistakes.  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>Flowers</title>
    <link href="mainStyles.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    #sidebar1 { padding-top: 30px; }
    #mainContent { zoom: 1; padding-top: 15px; }
    div.mainContent  { overflow:hidden; word-wrap: break-word;}
    /* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
    </head>
    <body class="thrColHybHdr">
    <div id="container">
      <div id="header">
        <a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>
    <!-- end #header -->
      <div id="sidebar1">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="index.html">Home</a></li>
          <li><a href="animals.php">Animals</a></li>
          <li><a href="barns.php">Barns</a></li>
          <li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
            <ul>
              <li><a href="washingtondc.php">Washington DC</a></li>
              <li><a href="nyc.php">New York City</a></li>
            </ul>
          </li>
          <li><a href="fireworks.php">Fireworks</a></li>
          <li><a href="flowers.php" class="selected">Flowers</a></li>
          <li><a href="lighthouses.php">Lighthouses</a></li>
          <li><a href="misc.php">Miscellaneous</a></li>
          <li><a href="national_parks.php">National Parks</a></li>
          <li><a href="plants.php">Plants</a></li>
          <li><a href="waterfalls.php">Waterfalls</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2">
         <div id="detailArea1" spry:detailregion="ds1">
              <div class="detailText">
             <h1>{PictureTitle}</h1>
             <p>{PictureResolution1}</p>
             <p>{Price1}</p>
            <p>{Button1}</p>
            <p>{PictureResolution2}</p>
             <p>{Price2}</p>
            <p>{Button2}</p>
             <br class="clearfloat"/>
             </div>
         </div>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
           <div id="galleryContentGroup" class="SlidingPanelsContentGroup">
             <div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
            <div class="galleryItem">
            <p class="thumbnail">{Thumbnail}</p>
            <p class="pictureTitle">{PictureTitle}</p>
            </div>
            </div>
         </div>
      </div>
      <p id="panelNav" class="fltlft">
           <a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
           <a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
           <a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
           <a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
      </p>
    <div id="detailArea2" spry:detailregion="ds1">
         <div class="detailImg">
        <img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
        </div>
    </div>
    <div id="gallery">
    <div class="galleryItem">
    <p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
    <p class="pictureTitle">Daisy</p>
    <p class="pictureResolution">Resolution: 900x600</p>
    <p class="picturePrice">Price: $1.00</p>
    <p class="button">
    <span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397389"/>
    <input type="hidden" name="item_name" value="Daisy"/>
    <input type="hidden" name="custom" value="3454_900.jpg"/>
    <input type="hidden" name="amount" value="1.00"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureResolution">Resolution: 2048x1365</p>
    <p class="picturePrice">Price: $5.00</p>
    <p class="button">
    <span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5111872"/>
    <input type="hidden" name="item_name" value="Daisy"/>
    <input type="hidden" name="custom" value="3454_2048.jpg"/>
    <input type="hidden" name="amount" value="5.00"/>
    <input type="hidden" name="option_name_1" value="flowers"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureHires">3454_wm.jpg</p>
    </div>
    <div class="galleryItem">
    <p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
    <p class="pictureTitle">Sun Orchid</p>
    <p class="pictureResolution">Resolution: 900x600</p>
    <p class="picturePrice">Price: $1.00</p>
    <p class="button">
    <span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397419"/>
    <input type="hidden" name="item_name" value="Sun Orchid"/>
    <input type="hidden" name="custom" value="6586_900.jpg"/>
    <input type="hidden" name="amount" value="1.00"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureResolution">Resolution: 2048x1365</p>
    <p class="picturePrice">Price: $5.00</p>
    <p class="button">
    <span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397432"/>
    <input type="hidden" name="item_name" value="Sun Orchid"/>
    <input type="hidden" name="custom" value="6586_2048.jpg"/>
    <input type="hidden" name="amount" value="5.00"/>
    <input type="hidden" name="option_name_1" value="flowers"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureHires">6586_wm.jpg</p>
    </div>
    </div>
        <br class="clearfloat"/>
         <!-- end #mainContent --></div>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
       <div id="footer">
        <p><!-- <span class="fltrt">ADD SOMETHING ELSE HERE</span>-->&copy; 2009</p>
      <!-- end #footer --></div>
         <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var sp = new Spry.Widget.SlidingPanels("slidingGallery");
    Spry.$$(".thumbnail a").removeAttribute("href");
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    It doesn't work correctly in Firefox either,
    If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
    For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
    So i would suggest to recheck your rowSelectors and validate your page for HTML errors. 
    Related documentation:
    http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html

  • Sliding Panels in a Div

    I can load the Sliding panels and it works fine except if you
    use "onload" with the Spry.Utils.updateContent.
    Tried many things so far and it will not work when loaded
    into a Div.
    Hmmm
    Can't figure out why.
    Anybody have a answer why it will not run in a Div.?

    Well it appears the problem is because the outer div had no
    ID.
    The panel works without the ID, but if you add 2 panels it
    only runs the constructor for 1 of the 2 panels. The collapsible
    panels content overflow was hidden for both in CSS.
    Thank you Donald for prompting me to look at the code again
    as it was not so apparent to see the problem.

  • Sliding Panels using HTMLPanel

    //////// FIXED /////////////
    sorry for the previous post , I fixed my code it was an error
    on my onclick function the 2 widgets work simply perfect.
    if someone interested i can put online some example
    ciao P
    //////// FIXED /////////////
    I'm trying to integarte Sliding Panels and HTMLPanel Widget
    I used the syntax as showed in APi docs
    I call every panel with an onclick function like
    onclick="SP1.showFirstPanel(0)
    ;sp1.loadContent('panels/sp1.html'); return false;"
    and this is the instance of the widget
    var SP1 = new Spry.Widget.SlidingPanels("panelwidget"); //
    sliding widget
    var sp1= new Spry.Widget.HTMLPanel("sp1"); // htmlpannel
    containing my splinding panel number 1
    sp1.loadContent('panels/sp1.html');
    do you think this two widgets can operate togheter ?
    thanks in advance
    Paolo

    bandg111 wrote:
    Hello,
    Title says it all really, I'm using SlidingPanels and am trying to add one of the default easing effects (such as 'sinusoidalTransition' ) to it...
    I don't know what the syntax is!
    I've got
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget" , {duration:600, fps:160, defaultPanel:0, enableAnimation:true, enableKeyboardAnimation:false});
    and want to add easing to it... do I just need to plonk sinusoidalTransition in there somewhere? I can't find examples of the syntax anywhere!
    Add advice appreciated!
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget" , {duration:600, fps:160, defaultPanel:0, enableAnimation:true, enableKeyboardAnimation:false, transition: Spry.sinusoidalTransition});
    Try that.

  • Nested panels and bkg image

    Hi,
    I have a JPanel inside another one. It hides when I click on "close" ("fermer" in French, below).
    I'd like now add a background image to the parent panel (the background panel), so that the child panel appears in the middle of this image.
    To make a long story short, my centered panel is okay without background image but disappears when I try and subclass JPanel (paint method) in order to get a back-panel-with image.
    You'll find the code I use below. Is there any way to achieve this ?
    Thanks for your help !
    public class testCenteredPanel extends javax.swing.JFrame {
        /** Creates new form testCenteredPanel */
        public testCenteredPanel() {
            initComponents();
            setDefaultLookAndFeelDecorated(true);
        /** This method is called from within the constructor to
         * initialize the form.
         * WARNING: Do NOT modify this code. The content of this method is
         * always regenerated by the Form Editor.
        private void initComponents() {
            java.awt.GridBagConstraints gridBagConstraints;
            jPanel1 = new javax.swing.JPanel();
            jPanel2 = new javax.swing.JPanel();
            jPanel3 = new javax.swing.JPanel();
            jButton1 = new javax.swing.JButton();
            getContentPane().setLayout(new java.awt.GridBagLayout());
            setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
            setLocationRelativeTo(this);
            addMouseListener(new java.awt.event.MouseAdapter() {
                public void mouseClicked(java.awt.event.MouseEvent evt) {
                    formMouseClicked(evt);
            addWindowListener(new java.awt.event.WindowAdapter() {
                public void windowClosing(java.awt.event.WindowEvent evt) {
                    exitForm(evt);
            jPanel1.setLayout(new java.awt.GridBagLayout());
            jPanel1.setPreferredSize(new java.awt.Dimension(400, 400));
            jPanel1.addMouseListener(new java.awt.event.MouseAdapter() {
                public void mouseClicked(java.awt.event.MouseEvent evt) {
                    jPanel1MouseClicked(evt);
            jPanel2.setLayout(new java.awt.BorderLayout());
            jPanel2.setBackground(new java.awt.Color(255, 255, 255));
            jPanel2.setBorder(new javax.swing.border.LineBorder(new java.awt.Color(0, 0, 0)));
            jPanel2.setPreferredSize(new java.awt.Dimension(200, 200));
            jPanel3.setBackground(new java.awt.Color(255, 255, 255));
            jButton1.setText("Fermer");
            jButton1.addMouseListener(new java.awt.event.MouseAdapter() {
                public void mouseClicked(java.awt.event.MouseEvent evt) {
                    jButton1MouseClicked(evt);
            jPanel3.add(jButton1);
            jPanel2.add(jPanel3, java.awt.BorderLayout.SOUTH);
            jPanel1.add(jPanel2, new java.awt.GridBagConstraints());
            gridBagConstraints = new java.awt.GridBagConstraints();
            gridBagConstraints.fill = java.awt.GridBagConstraints.BOTH;
            gridBagConstraints.weightx = 1.0;
            gridBagConstraints.weighty = 1.0;
            getContentPane().add(jPanel1, gridBagConstraints);
            pack();
        private void jPanel1MouseClicked(java.awt.event.MouseEvent evt) {
            jPanel2.setVisible(true);
        private void jButton1MouseClicked(java.awt.event.MouseEvent evt) {
            jPanel2.setVisible(false);
        private void formMouseClicked(java.awt.event.MouseEvent evt) {
        /** Exit the Application */
        private void exitForm(java.awt.event.WindowEvent evt) {
            System.exit(0);
         * @param args the command line arguments
        public static void main(String args[]) {
            new testCenteredPanel().show();
        // Variables declaration - do not modify
        private javax.swing.JButton jButton1;
        private javax.swing.JPanel jPanel1;
        private javax.swing.JPanel jPanel2;
        private javax.swing.JPanel jPanel3;
        // End of variables declaration
    }

    Thanks for your answer !
    So far, it is better : I have overriden the paintComponent method insteda of the paint method and the background image shows up. But the "close" button on the nested (centrered) panel doesn't work any longer. I can click on it, but it stays grayed and the panel doesn't hide. I read the articles you pointed out but couldn't find much for this (except opacity, which I experimented without success).
    Here's the code of my centered panel : maybe there's something wrong here ?
    public class CenterPanel extends javax.swing.JPanel {
        /** Creates new form CenterPanel */
        public CenterPanel() {
            initComponents();
       public  boolean isOpaque(){
            return true;
        private void initComponents() {
            jPanel1 = new javax.swing.JPanel();
            jButton1 = new javax.swing.JButton();
            jButton2 = new javax.swing.JButton();
            setLayout(new java.awt.BorderLayout());
            setBackground(new java.awt.Color(255, 255, 255));
            setBorder(new javax.swing.border.LineBorder(new java.awt.Color(0, 0, 0)));
            setPreferredSize(new java.awt.Dimension(200, 200));
            jPanel1.setBackground(new java.awt.Color(255, 255, 255));
            jPanel1.setOpaque(false);
            jButton1.setText("Acheter");
            jPanel1.add(jButton1);
            jButton2.setText("Fermer");
            jButton2.addMouseListener(new java.awt.event.MouseAdapter() {
                public void mouseClicked(java.awt.event.MouseEvent evt) {
                    jButton2MouseClicked(evt);
            jPanel1.add(jButton2);
            add(jPanel1, java.awt.BorderLayout.SOUTH);
        private void jButton2MouseClicked(java.awt.event.MouseEvent evt) {
            hide();
        private javax.swing.JButton jButton1;
        private javax.swing.JButton jButton2;
        private javax.swing.JPanel jPanel1;
    }

  • 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>
    <!-- end #mainContent --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    var sp2 = new Spry.Widget.SlidingPanels("panelwidget2");
    //-->
    </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.

Maybe you are looking for