Sliding Panels Sample

I'm trying to pull a data set from xml into the Unobtrusive
Sliding Panels Sample from
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_unobtrusive.ht ml
but I'm not sure where to set it up to repeat and how to tag it so
that it actually pulls the data in...you can see what I have so far
(and the source code) at:
http://www.brianwpiper.com/demos/slider.htm
Thanks!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Unobtrusive Sliding Panels Sample</title>
<script type="text/javascript"
src="widgets/slidingpanels/SprySlidingPanels.js"></script>
<script type="text/javascript"
src="includes/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="sp_unobtrusive.js"></script>
<script type="text/javascript">
<!--
var dsProducts = new Spry.Data.XMLDataSet("products.xml",
"products/product");
//Get the URL parameter for the row number
var params = Spry.Utils.getLocationParamsAsObject();
//Set an observer so that when the data is loaded, we update
the current row to the url param value
dsProducts.addObserver({ onPostLoad: function(ds, type) {
dsProducts.setCurrentRow(params.row); }
</script>
-->
<link href="widgets/slidingpanels/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="samples.css" rel="stylesheet" type="text/css"
/>
<link href="slider.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h3>Project Gallery</h3>
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup"
spry:region="dsTest" spry:repeatchildren="dsTest">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsProducts">
<div spry:detailregion="dsProducts" class="content">
<img src="{boximage}" alt="project screenshot"
width="{width}" height="{height}"/>
</div>
<div spry:detailregion="dsProducts">{desc}</div>
<div><a href="{link}"
target="blank">{linkText}</a></div>
</div>
</div>
</div>
<p class="navLinks">
<a href="#" id="link5">1</a> |
<a href="#" id="link6">2</a> |
<a href="#" id="link7">3</a>
</p>
</div>
</body>
</html>

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

Similar Messages

  • Sliding panels from data - single panel

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

    I modified the code from the example for you, so now it works
    with just one panel visible.
    Changes are:
    set the width of the wigdet en
    slidingpanel class to 250 instead of 500.
    var numberOfPanelsPerView = 1
    remove all the
    spry:if="{ds_RowNumber} % 2 == 0" attributes
    change
    onclick="sp1.showPanel('p{prevStartIndex}') to
    onclick="sp1.showPreviousPanel()
    change
    onclick="sp1.showPanel('p{nextStartIndex}') to
    onclick="sp1.showNextPanel()
    This all leads to the following code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml"
    xmlns:spry="
    http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Sliding Panels Sample</title>
    <script type="text/javascript"
    src="../../widgets/slidingpanels/SprySlidingPanels.js"></script>
    <script src="../../includes/xpath.js"
    type="text/javascript"></script>
    <script src="../../includes/SpryData.js"
    type="text/javascript"></script>
    <style type="text/css">
    <!--
    .widget {
    /* width: 500px;*/
    width: 250px;
    height: 230px;
    border: solid 1px black;
    background-color: #CCCCCC;
    .SlidingPanels {
    /* width: 500px; */
    width: 250px;
    height: 230px;
    overflow: visible;
    position: relative;
    float: left;
    padding: 0px;
    .SlidingPanelsContainer {
    width:8000em;
    height:230px;
    position: absolute;
    float:left;
    margin: 0px;
    padding: 0px;
    .SlidingPanelsContent {
    width: 250px;
    height: 230px;
    float: left;
    .content {
    width: 241px;
    height: 200px;
    float: left;
    overflow: hidden;
    padding: 4px;
    border-right: solid 1px #999999;
    .panelnav {
    clear: both;
    height: 42px;
    .left {
    text-align: left;
    margin-left: 4px;
    .right {
    text-align: right;
    margin-right: 4px;
    -->
    </style>
    <link href="../../css/samples.css" rel="stylesheet"
    type="text/css" />
    <script type="text/javascript">
    <!--
    var ds1 = new
    Spry.Data.XMLDataSet("../../demos/products/products.xml",
    "/products/product");
    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);
    ds1.addObserver({ onPostLoad: function() {
    var numberOfPanelsPerView = 1; //was 2
    var rows = ds1.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>
    </head>
    <body>
    <h3>Building a Sliding Panels widget with Spry
    Data</h3>
    <p>This sample creates a Sliding Panels widget by using
    Spry Data to build the repeating markup. In this sample the content
    panels are generated dynamically and the photo in each panel comes
    from Spry Data. The text is static, which is just there for
    example.</p>
    <p>The content panel is generated in a Spry:repeat
    region. An important thing in the panel widget is that each panel
    should have a unique ID. This ID is generated with a Spry data
    reference. Using the same method, the Panel links are generated the
    same way, using the same data values. This ensures that the panel
    links and IDs match up correctly. In this sample, the visible
    window is twice as wide as the content panel. This allows for 2
    panels to show at once. The links, therefore, need to show only
    every other panel number. This will allow the panel to move by 2
    content panels each time. To do this, a spry:if is used to only
    display the even number panel numbers.</p>
    <p>Note: Since this sample depends on Spry Data for the
    content and markup, it will not degrade when JavaScript is turned
    off. This sample shows how to construct this widget with Data.
    Determine if this method fits your needs with degredation and
    accessibility in mind. Also, this sample is more complicated only
    because we are showing 2 panels at once and there are differing
    lengths of text in the panels.</p>
    <p>Page: <span spry:region="ds1"
    spry:repeatchildren="ds1"> <a href="#"
    onclick="sp1.showPanel('p{viewStartIndex}'); return
    false;">{viewNumber}</a> </span></p>
    <div class="widget">
    <div id="apDiv1" class="SlidingPanels"
    spry:region="ds1">
    <div class="SlidingPanelsContainer">
    <div id="p{ds_RowNumber}" class="SlidingPanelsContent"
    spry:repeat="ds1">
    <div class="content"> <img
    src="../../demos/products/{boximage}" width="75" height="56"
    hspace="5" vspace="5" align="left" alt="Sample Images from Spry
    Data." />
    <p>{desc}</p>
    </div>
    <div class="panelnav left"><a href="#"
    onclick="sp1.showPreviousPanel(); return
    false;">&lt;&lt;
    Previous</a>          <a
    href="#" onclick="sp1.showNextPanel(); return false;">Next
    &gt;&gt;</a></div>
    </div>
    </div>
    <script type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
    </script>
    </div>
    </div>
    </body>
    </html>

  • Possible to have two occurences of sliding panels in same location on page?

    Hi, any help you guys could give me would be greatly appreciated.
    I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
    I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
    Here's the page I'm working with, with only one of the Content Groups active:
    http://www.susanmeyerart.com/redesign/
    eta: I'm working with Spry Pre-Release 1.6.1.

    I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
    Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
    This may not work, but, as they say...you don't know until you try!
    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

  • How to apply sliding panels Spry Widget in Dreamwevaer CS4

    Could someone please share how to apply sliding panels widget in Dreamwevaer CS4 as it is not in insert spry panel?
    Thanks kindly!

    Hi Brad,
    I meant something like this:
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
    or the one used on their site:
    http://labs.adobe.com/technologies/spry/home.html
    Thanks kindly

  • Vertical Sliding Panel Code

    I want to create some vertical sliding panels but can't seem
    to find the JS and the spry code files anywhere on the Spry site. I
    have CS3 but they do not include this as a built in widget. Is
    there a place where I can get the code so I can implement this?
    Seems easy enough.
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html

    jergerb wrote:
    > I want to create some vertical sliding panels but can't
    seem to find the JS and
    > the spry code files anywhere on the Spry site. I have
    CS3 but they do not
    > include this as a built in widget. Is there a place
    where I can get the code so
    > I can implement this? Seems easy enough.
    >
    >
    >
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    FWIW: the sliding panel widget isn't built into DWCS4 either.
    The page you linked to has all the code you need, simply view
    source and look for the vertical section in the code. If it's
    easier, you can also check out the samples within the Spry
    Download:
    http://labs.adobe.com/technologies/spry/home.html
    and look within the "samples" folder and open up the files for the
    various sliding panel examples to see how the code is constructed.
    Also, you can visit Spry API page:
    http://labs.adobe.com/technologies/spry/articles/data_api/index.html
    click on Sliding Panels on the left, then Overview, and you'll see
    the code you can insert into your page as well as a list of the
    required JS and CSS files for the panel.
    HTH
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • How do i place content in a sliding panel one beside the other?

    my site: www.islamobec.com
    how can i populate my sliding panel by placing content beside each other??

    The following is an example of a two content slide http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
    Gramps

  • Sliding panels widget button

    I have an issue with the buttons in the Sliding Panels Widget
    after I implemented it in my page. The first time, I have to click
    a button twice in order to have it working. Has someone seen this
    problem before?

    Hi Natasa,
    If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
    I hope this helps.
    Ben
    PS. My apologies, I did not realize that this topic had already been answered.
    Message was edited by: vw2ureg

  • Sliding Panels - Problems Scrolling Horizontal in Safari

    I have adjusted the CSS in order to make the Sliding Panels widget scroll horizontal using the float: left;
    It is working fine in Firefox but no matter what I do it does not scroll horizontal in Safari, it continues to scroll verticle.  It seems as if it is just not responding to the float in the style.
    What am I doing wrong?
    Here is the URL to the page I'm working on.
    www.wyndetryst.com/testportfolio/portfolio.html

    It works fine in my safari. Do the examples work in safari?  (Example 2: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html )
    Did you also change the rest of the setting or just the float:left. As it needs width changes as well as seen in the example.

  • Sliding Panels widget

    Hi,
    I do not know if this is the right place. If not, please tell me where to ask.
    I do not know nothing of programing and my use of a program is to "click" on shortuct. I am familiar with using Tabbed panels, Accordion and Collapsible panel.
    But I would like to know how to use sliding panels. I have read a lot on this links:
    http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS5F39D2B9-A298-472a-8E50-AC4B1 0984EFC.html
    but I do not know how to start. I do not understand English very much and do not have computer knowledge.
    So, is there a way for me to "click" on a widget or icon of a SPry to make  sliding panels?
    On this link are samples, but I realy have no idea, how to make this.
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    Thank you

    Hi Natasa,
    If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
    I hope this helps.
    Ben
    PS. My apologies, I did not realize that this topic had already been answered.
    Message was edited by: vw2ureg

  • Sliding panels insert object

    I am using trial DW CS3. I have updated to Spry 1.5 as
    recommended. I do not see any support for inserting "sliding
    panels" through the spry insert interface.
    What is wrong here. Am i doing something wrong, is it through
    another interface.
    The 1.5 update package includes samples and code updates, so
    how do I use this widget?

    Hi,
    In most ways, Spry and Dreamweaver are separate projects.
    Spry 1.5 does not add new features to Dreamweaver. I did write an
    extension that simply updates the javascript files that Dreamweaver
    copies to the users site. It does not add any additional features.
    It does update the code hinting but that's it.
    In order to add new features to DW, the DW team would have to
    write, test and package an update to the product. So far there are
    no plans for that, but they are discussing options.
    Spry has a shorter development time, so it will keep making
    new features for the framework, independent of DW.
    The updater extension can be found here:
    http://www.dbooth.net/spry/spry_1.5.mxp
    To use the new 1.5 features, check out the samples and read
    the docs and it should be simple enough to build. If not, let us
    know.
    I hope this clears things up.
    Donald Booth
    Adobe Spry Team

  • Sliding Panels hidden content shows on page load

    Greetings,
    I am working on a site for a child abuse prevention
    non-profit and need some help asap!
    I am using the unobtrusive sliding panels at:
    Adobe
    Unobtrusive Sliding Panels Example
    I have two panels side by side. When the page loads, all of
    the hidden content is briefly shown to the right of the panels. It
    does this on the adobe sample as well.
    Is there ANY way to hide this hidden content during the page
    load? If so, could I get exact instructions? I am more of a
    front-end person and not the best with scripting.
    BTW, all of the content is static so the "Adobe Hiding Data
    References During Page Load" does not work in this instance.
    Thanks in advance!!

    Try this:
    1. Set a class that sets visibiliity to hidden:
    .hideGroup{visibility:hidden;}
    2. Add this class to your content group:
    <div class="SlidingPanelsContentGroup hideGroup">
    3. Add a line to sp_unobtrusive.js to remove this new class
    after the widget made.
    Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
    Add that right under the addEventListener lines.
    That should do it.
    Don

  • Sliding panel widget controls a la Brightcove website

    I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
    Thanks in advance for any advice.

    Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
    If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541

  • Using anchors for Sliding panel

    I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
    www.mysite.com/Portfolio.html#Panel1
    www.mysite.com/Portfolio.html#Panel2
    Is it possible to do so?  kindly guide me    

    You can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    Gramps

  • Sliding panel / Dockable window

    I am looking for sample code for implementing a sliding panel or dockable window. IntelliJ IDE has label on left "Project" which when clicked slides-in a panel (or something) which has project elements in a tree. I am looking for a similar effect for a swing based application.
    I tried using scrollpane and try setting its "setDividerLocation" property incrementally but it does not give the same effect. It "jumps" the last position, no matter how much I try repainting/updateUI etc.
    If you have any sample / hint for code please let me know.
    Thanks
    Prakash

    Perhaps using a jsplitpane with continuouslayout as true might solve your problem when you are incrementing the divider location. With continuousLayout you shouldn't get the jumping effect.
    JSplitPane sp = new JSplitPane();
    sp.setContinuousLayout(true);

Maybe you are looking for

  • Migration and DVD/CD Sharing Update Problem

    Hi, my Mac OS 10.4.11 has a software update on 10-19-2008. It installed the update Migration and DVD/CD Sharing Update, since then, my sharing panel stopped working, I can`t set any option of Services tab and my Firewall tab does not open, it is gray

  • Navigation builders for Mac

    I used to use Pluginlab for building my site navigation as it had a wonderful integration into DW and also created a sitemap.xml perfectly.  However, that being said, the drop downs don't work on iPhone and it seems they've gone out of business, anyw

  • Cluster Apex MS's across multiple nodes for load balancing?

    Can Cluster Apex MS's across multiple nodes for load balancing? If Yes/No, any supportive doc's will be much appreciated. Here is what I did .......... I tried multiple MS's on different nodes for Apex Domain (clustered) Deployed apex.war, i.war with

  • Couln't  save a buffered image as BMP with java 1.4

    Dear friends, I tried to save a buffered image as BMP with java 1.4. When I run the program ,it executes sucessfully, but no image wasn't created. When I tried the same code with java 1.5 got the right result. This is the code I have written. public

  • Directory Server 5.2patch4 index question

    Hello, Hopefully just a really simple question about indexes. After creating indexes from the console, do you have to restart the ldap server for it to actually start using the indexes. The reason I ask, is that we have setup a box with ldapclient to