Sliding Panels No Javascript Enabled,

I'm not crazy about how the Sliding Panels widget degrades if
JavaScript is disabled (it exposes all the panels side by side
horizontally). Go to the sliding panels widget example from Adobe
and disable your JavaScript:
Adobe
Sliding Panels example page.
As an alternative for users who have JavaScript disabled, I
would only like to show only the first panel (preserving the
original width of the sliding panel as if JavaScript were enabled)
or I'm looking for a way to create an error message (not on a
separate page, but in the section where the sliding panels would
be) that reads something like "please enable javascript etc. and
will hide the sliding panels content). Netflix does this with their
sliding panels if you have JavaScript disabled- located on the new
releases page after you login (would give the link but you have to
login). Or if someone has a better solution I am all ears. Thank
you.

elen,
I had to make the sliding panel the same height as my container div.
For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue.

Similar Messages

  • 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:
    <!---Begin Thumbs Holder--->
    <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>
    <!---End Thumbs Holder--->
    <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">
    <!--
    var dsGalleries = new
    Spry.Data.XMLDataSet("galleries/galleries.xml",
    "galleries/gallery");
    var dsGallery = new
    Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
    "gallery");
    var dsPhotos = new
    Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
    "gallery/photos/photo");
    function TruncateStrIfNeeded(str, maxChars)
    // Decode our string so when we count characters, we aren't
    counting
    // the chars in an entity name.
    str = Spry.Utils.decodeEntities(str);
    if (str.length > maxChars)
    str = str.substr(0, maxChars - 4) + " ...";
    return Spry.Utils.encodeEntities(str);
    dsPhotos.addObserver({ onPostLoad: function() {
    var numberOfPanelsPerView = 5;
    var rows = dsPhotos.getData();
    var numRows = rows.length;
    // Add some custom columns to our data set.
    for (var i = 0; i < numRows; i++)
    var row = rows
    // Add a 'teaser' column which is basically the description,
    // but truncated so it can fit within our panel.
    row.teaser = TruncateStrIfNeeded(row.desc, 400);
    // Add a 'viewStartIndex' column that indicates what view
    this row
    // belongs to.
    row.viewNumber = Math.floor(i / numberOfPanelsPerView) + 1;
    row.viewStartIndex = i - (i % numberOfPanelsPerView);
    row.prevStartIndex = row.viewStartIndex -
    numberOfPanelsPerView;
    row.nextStartIndex = row.viewStartIndex +
    numberOfPanelsPerView;
    //-->
    </script>
    <script type="text/javascript"
    src="scripts/gallery.js"></script>
    <<<<<<<<<<<<<<body>>>>>>>>>>>>>>>
    <!---Begin Thumbs Holder--->
    <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>
    <!---End Thumbs Holder--->
    <div id="arrowholder">
    <div id="arrowright" spry:if="{ds_RowNumber} % 2 == 0
    &amp;&amp; {prevStartIndex} &gt;= 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
    &amp;&amp; {nextStartIndex} &lt; {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>

  • 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

  • Spry Sliding Panels not working in IE

    I've been working for about 12 hours straight on getting this
    working correctly - my Sliding Panels just aren't working at all in
    IE. The panels load properly - for example, you can see only the
    first loaded panel, not all of them - but when I click a link to
    switch to the next, nothing happens. Firebug is reporting no
    errors, and neither is IE. Here is the relevant code:
    <head><script type="text/javascript"
    src="SpryAssets/SprySlidingPanels.js"></script>
    <link type="text/css" rel="stylesheet"
    href="SpryAssets/SprySlidingPanels.css"></head>
    <div id="mainContent">
    <div id="panelwidget" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="main">Main
    Content<br /><a href="images/news.png" rel="lytebox"
    title="Omgtest!"><img src="images/news.png"
    /></a><br /> <a href="javascript:void(0);"
    onclick="sp1.showPanel('series');">TEST</a></div>
    <div class="SlidingPanelsContent" id="series">Series
    and Models</div>
    <div class="SlidingPanelsContent" id="about">About and
    Bio</div>
    </div>
    </div>
    <script type="text/javascript">var sp1 = new
    Spry.Widget.SlidingPanels("panelwidget");</script>
    </div>
    The following might be somewhat related: I am using the
    Lytebox javascript library, which is a Lightbox clone (that doesn't
    use prototype), as well as a preloader for my mouseover nav bar,
    with this code:
    <script type="text/javascript">
    function init() {
    MM_preloadImages('images/menu/main_click-trans.png','images/menu/main_hover-trans.png','i mages/menu/series_click-trans.png',
    'images/menu/series_hover-trans.png','images/menu/about_click-trans.png','images/menu/abo ut_hover-trans.png');}
    </script>
    My nav bar links to the panels like this:
    onclick="MM_nbGroup('down','group1','Main','images/menu/main_click-trans.png',1);
    sp1.showPanel('main'); return false"
    However, a plaintext link inside of the first panel - "<a
    href="javascript:void(0);"
    onclick="sp1.showPanel('series');">TEST</a>" - does not
    work either.
    Just for fun I thought I would try adding min-height:0; zoom:
    1; to the CSS classes for slidingpanels.... no dice there as well.
    URL is
    www.goldensealdrums.com/wip
    Any ideas? I am at a complete loss. Thanks.

    Thanks for your help :] I ended up realizing that a huge
    bloated js navbar wasn't all that great of an idea anyway, so I
    scrapped it and used a CSS-based one instead...much cleaner and
    works better (no preloading! woohoo.) It looks like the problem was
    probably an amalgamation of many things, but it's resolved now.
    quote:
    IE doesn't seem to like the PNG images you are using
    understatement of the decade.

  • Sliding Panel Content Not Hidden

    Hi All. This is my first post so apologies if I do something wrong.
    I'm setting up sliding panels to work on my site (I've used them before) and this time I can't get the panels that aren't displayed to hide. The panels slide, but all panels are visable at all times. Here is the code -
    CSS
    .SlidingPanels {
        position: relative;
        width: 221px;
        height: 260px;
        padding: 0px;
        border: none;
    .SlidingPanelsContentGroup {
        position: relative;
        width: 10000px;
        margin: 0px;
        padding: 0px;
        border: none;
    .SlidingPanelsContent {
        width: 221px;
        height: 260px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        border: none;
    .SlidingPanelsAnimating * {
        overflow: hidden !important;
    .SlidingPanelsCurrentPanel {
    .SlidingPanelsFocused {
    TEST.PHP
    <!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>Untitled Document</title>
    <script src="http://www.guaranteedprofit.co.uk/Scripts/SprySlidingPanels.js" type="text/javascript"></script>
    <link href="http://www.guaranteedprofit.co.uk/sandbox.css" rel="stylesheet" type="text/css" />
    </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>
    <div id="panelwidget" class="SlidingPanels">
      <div class="SlidingPanelsContentGroup">
        <div class="SlidingPanelsContent" id="p1">Panel 1</div>
        <div class="SlidingPanelsContent" id="p2">Panel 2</div>
        <div class="SlidingPanelsContent" id="p3">Panel 3</div>
        <div class="SlidingPanelsContent" id="p4">Panel 4</div>
        <div class="SlidingPanelsContent" id="p5">Panel 5</div>
        <div class="SlidingPanelsContent" id="p6">Panel 6</div>
      </div>
    </div>
    <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    Has anyone got any suggestions please as I know it's something simple, I just can't work it out. I've tested it in FF and IE6
    Thanks in advance, Adam

    Solved it. I've been at this since 5am and put a rouge <! -- in the css file which screwed it up

  • Sliding panel inside tabbed panel - onclick both

    I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
    OK I have another scenario as well....
    You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

    Try this and adapt to your needs:
    <!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>Document sans nom</title>
    <script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
    <script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style>
    .SlidingPanels {
       position: relative;
       width: 200px;
       height: 200px;
       padding: 0px;
    .SlidingPanelsContentGroup {
       position: relative;
       height:600px;
       margin: 0px;
       padding: 0px;
    .SlidingPanelsContent {
       width: 100%;
       height: 400px;
       overflow: hidden;
       margin: 0px;
       padding: 0px;
    </style>
    </head>
    <body>
    <a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Contenu 1
          <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
          <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
          <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
             <div id="slidingPanel_1" class="SlidingPanels">
                  <div class="SlidingPanelsContentGroup">
                     <div id="content1" class="SlidingPanelsContent">The Content 1</div>
                <div id="content2" class="SlidingPanelsContent">The Content 2</div>
                <div id="content3" class="SlidingPanelsContent">The Content 3</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Contenu 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    Spry.Utils.addLoadListener(function() {
            Spry.$$("#trigger1").addEventListener('click', function() {
                TabbedPanels1.showPanel(0);
                sp1.showPanel(2);
            }, false);
            Spry.$$("#trigger2").addEventListener('click', function() {
                //TabbedPanels1.showPanel(0);
                sp1.showPanel(0);
            }, false);           
    </script>
    </body>
    </html>
    You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
    Xav

  • Sliding Panels Problem: Content panels with different width?

    I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
    http://germansaezphoto.com/music/radiohead/
    I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
    and searched the forum but couldn't find an answer.
    I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
    Here is the div in the index file:
    <div class="SlidingPanels" id="panelwidget">
      <div class="SlidingPanelsContentGroup">
        <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
        <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
      <div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
      <div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
      <div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
      <div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
      </div>
      </div><br />
      <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>
      <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    And here is the classes in the css:
    .SlidingPanels {
         position: relative;
         float: left;
         width: 1000px;
         height: 430px;
         padding: 0px;
         border: none;
    .SlidingPanelsContentGroup {
         position: relative;
         float: left;
         width: 10000px;
         margin: 0px;
         padding: 0px;
         min-height:0;
         border: none;
    .SlidingPanelsContent {
         width: 645px;
         height: 430px;
         float: left;
         overflow: hidden;
         margin: 0px;
         padding: 0px;
         border: none;
    In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
    How do I solve this?

    It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
    I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
    You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
    You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
    It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
    Beth

  • Jump Menu for Sliding Panels Widget

    I have used the sliding panels tutorial to build a 15 page
    sliding document inside a new site I am building. It works
    briliantly. However I want to be able to use a jump menu to access
    any of the 15 pages as well as use the next and previous buttons.
    I tried by inserting a form, then jump menu but couldnt put
    it all together code wise.
    Is it possible to use a jump menu for this widget (Im sure it
    must be) and what bits do I put where? Any ideaas greatly
    appreciated.
    Nigel

    OK Ive given it a shot but I dont where to put that code in
    the mix so to speak.
    The widget code skeleton is below: as per the tutorial.
    Where exactly in this mix would I put the code you suggested.
    Im not sure if its css, html or js.
    Sorry Im such a novice at this business but I would be very
    grateful for a bit more help here.
    Nige
    <!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>Untitled Document</title>
    <script type="text/javascript"
    src="SpryAssets/SprySlidingPanels.js"></script>
    <link type="text/css" rel="stylesheet"
    href="SpryAssets/SprySlidingPanels.css">
    <script type="text/javascript">
    <!--
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
    if (restore) selObj.selectedIndex=0;
    //-->
    </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>|
    <div id="panelwidget" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel
    1</div>
    <div class="SlidingPanelsContent" id="p2">Panel
    2</div>
    <div class="SlidingPanelsContent" id="p3">Panel
    3</div>
    <div class="SlidingPanelsContent" id="p4">Panel
    4</div>
    <div class="SlidingPanelsContent" id="p5">Panel
    5</div>
    <div class="SlidingPanelsContent" id="p6">Panel
    6</div>
    </div>
    </div>
    <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    </body>
    </html>

  • Sliding Panels Bug?

    Clicking buttons on the sliding panels widget causes the page
    to jump to the top.

    kinblas,
    I figured out that adding "return false" to my javascript
    statement on the link prevents the page jumping. Here is what I had
    originally that was causing the jumping
    <a href="#" onclick="sp1.showPreviousPanel(); ">
    and here is what I changed it to to prevent the jumping
    (notice the addition of the return false statement)
    <a href="#" onclick="sp1.showPreviousPanel(); return
    false;">
    Just in case anyone else has this problem, hopefully it will
    help them out.
    r!

  • SPRY SLIDING PANELS & DW V.9 BUILD 3481

    Hi Folks,
    Does anyone know of a way to get rid of the DW error message
    that pops up when you use
    the sliding panels widget? If not, I'll submit an SR with the
    DW folks...
    Error message upon opening any document in the code window
    that contains the standard
    sliding panels widget code:
    "This document contains JavaScript code for a widget that no
    longer exists. If you don't remove
    the code, the browser might display JavaScript errors when
    loading the page.......
    mentions: var sp1 = new Spry.Widget.SlidingPanels(......
    - GR

    This document contains JavaScript code for a widget that no
    longer exists. If you don't remove
    the code, the browser might display JavaScript errors when
    loading the page. Would you like
    Dreamweaver to find all instances of this code for you?
    var sp1 = new Spry.Widget.SlidingPanels("PANELS",{
    duration:850, fps: 60, defaultPanel:0 });
    Yes No
    Just above the end-body tag I have the script:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
    duration: 350, useFixedPanelHeights: false, defaultPanel: 0 });
    The only ID I have is " <DIV id="Accordion1"
    class="accordian_div Accordion">" as a container for the panels.
    Should I
    change an ID name or a var name ? The SlidingPanels work
    fine. It's just that I'm using the "open recent files automatically
    on startup" sort of option and each page displays the above
    error and stops, until I reply to it, then continues to load the
    next file.
    - GR

  • Multiple sets of Spry Tabbed Sliding Panels?

    I have my code set up for one sliding panel set with three tabs but I want to copy that set and create another set of the same 3 sliding tabs right below it with different content. However, when I copy it to the next set, clicking the second set of tabs still causes the first sets sliding Panel to slide. Furthermore, a few elements of the css are no longer being read for the second set, including the script in the .SlidingPanels that hides any of the text box outside of the specified dimensions.
    Attached are a txt file for my html and css if that helps.
    Any help on this would be greatly appreciated.
    Thanks!
    [Moved to Spry forum by moderator]

    The constructor appears at the bottom of your sliding panel code, in exactly the format that Arnout has shown. You do not need to go into the javascript file for it.
    But the first thing I think you need to do is to make sure that you match the classes (and format) you are using with the classes per your sliding panels style sheet.
    Here is the essential markup (your content is not here; this is based on a plain example widget):
    <div style="margin: 0 auto; width: 350px; border: solid 1px red;">
    <a href="#" onclick="sp.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><!--example to show specific panel-->
    <div id="panelwidget" class="SlidingPanels" style="margin: 0 auto;">
    <div class="SlidingPanelsContentGroup">
        <div class="SlidingPanelsContent" id="p1">Panel 1</div>
        <div class="SlidingPanelsContent" id="p2">Panel 2</div>
        <div class="SlidingPanelsContent" id="p3">Panel 3</div>
        <div class="SlidingPanelsContent" id="p4">Panel 4</div>
        <div class="SlidingPanelsContent" id="p5">Panel 5</div>
        <div class="SlidingPanelsContent" id="p6">Panel 6</div>
            </div>
        </div>
        <script type="text/javascript">
       var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
        </script>
    Note that the ID of the <div id="panelwidget" class="SlidingPanels"> matches the "panelwidget" in the constructor
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    For your second panelgroup, make <div id="panelwidget_01" class="SlidingPanels"> and change the constructor to
    var sp2 = new Spry.Widget.SlidingPanels("panelwidget_01");
    And of course the onclicks in the nav area should change for the second sliding panels set to use sp2 instead of sp1.
    I hope that Arnout will correct me if I have got it wrong!
    Best,
    Beth

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

  • Spry Sliding Panels Question..

    Hello,
    I'm building a website and want to have a small image gallery page, with Spry Sliding Panels as the framework. Everything was working fine until I realized that in the browser, when I clicked the link to go the next panel, the actual web page itself automatically snaps back up to the top before the panel actually slides. I was wondering how to fix this because the gallery is about halfway down the page, and it looks stupid when the page jumps back up to the top each time. Thanks for your help...

    Yes, your panel button code (with my change) should look like this:
             <div class="panelbtn"><a href="javascript:;" onclick="sp1.showFirstPanel(); return false;">1</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p2); return false;">2</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p3); return false;">3</a></div>
             <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p4); return false;">4</a></div>
    This is what I meant when I said to replace the # with the word javascript:;
    Beth

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

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

Maybe you are looking for

  • Memory exhaust on SLES 10 SP1 ECC6

    Hello dear forum members, We have ECC6 running on SLES 10 SP1. Kernel : 700 patchlevel 146  created in  :  Linux GNU SLES-9 x86_64 cc3.3.3 The database runs on a seperate server. The SLES box has 12 GB extended, 8 GB dedicated to ECC6. When SAP start

  • I'm trying to restore music to my iTunes and I get a message that I don't have permission to see the file

    I discovered that when I restored my harddrive a few weeks back, not all of my music in iTunes was restored. Now when I go back to an earlier date in my Time Capsule, I get a message that I don't have permissiom to see the files. What do I need to do

  • Paragraph rules don't appear in pdf

    I have a problem with a paragraph rule. The rule is in a paragraph style that always appears on right pages (chapter opening). I set a negative indent so the rule extends through all the left page. It appears ok in indesign,- but when I export a pdf,

  • Zen Micro: Pause midfile before shutdown looses place on powe

    I use my Zen Micro to listen to audio books during my commute. Each file is 77min long. Many times, but not always, when I pause a file and then shut down it looses its place the next time I turn it on. It will be on the correct file but will have go

  • Inaccessible parts of image size dialog

    We have PS CS3 10.0.1 on two machines here.  Twice now when the person at the other machine has tried to change the image size of an image she is working on, the image size dialog has come up with the pixel dimensions read only and the size and resol