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

Similar Messages

  • Problems with Sliding Panels in IE

    I have *finally* gotten my sliding panels script working
    properly. However (and not surprisingly), I am having an issue with
    the addClass and removeClass functions. Although they work properly
    in Firefox, in IE 6 and 7 the add and remove class functions are
    not working properly.
    Any ideas on this?
    Here's the
    example
    Thanks, as always!
    Joel

    Mellymel2000 wrote:
    > Hi There,
    > I'm new to CS3 and can't understand why my animated
    collapsible panels don't
    > work in Internet Explorer. Did I miss some basic notes
    somewhere? Is it just IE
    > 5.2 it doesn't work in? I have created a vertical menu
    bar with them and need
    > to know If it can't be done here does anyone know how
    else I might go about it?
    > Starting to feel a little desperate and any help would
    be welcome.
    > Cheers!
    >
    >
    Is that IE 5.2 on the Mac? If so, don't worry about it, test
    it on IE6
    on a PC instead. The last Mac IE was 5.5 and has not been
    developed in
    about 5 years, its dead, and not a lot works on it nowadays.
    On Mac test
    Safari and Firefox, same on PC but with Opera and IE6 and 7.
    Steve

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

  • Problem with Accordion Widget INSIDE Sliding Panel Widget

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

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

  • Sliding Panel div Moving when acitvated in Safari

    Hey,
    If you go to my website, in safari, and click on "Resume" on the left side, and then begin to use the sliding panels it becomes very apparent that something is wrong.  Feel free to look at my source code.
    http://web.ics.purdue.edu/~jrathke
    I have a hunch that it may be the iframe, that being said... does anyone know of any jquery solutions to replace iframes? Because that would solve quite a few problems in itself, thanks.
    -Josh

    I forgot to mention that I put some test pages which
    demonstrate the panels outside the table structure.
    just the sliding panels:
    http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials2.html
    and with a table on top for the header section, divs in the
    middle for the panels, and table on the bottom for the footer
    section. This works but the alignment is all off in IE6,7 but not
    in Safari and a little off in FF. :
    http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials3.html
    -L

  • Spry Sliding Panels - current panel height problem

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

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

  • Spry Sliding Panels - Panel Height Problem

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

    And on a side note, if it's just IE6 where the problem arises, should I care???
    Have a look here http://www.w3counter.com/globalstats.php
    Gramps

  • Edit JS on spry sliding panels widget to fix auto panel height problem

    Hi guys,
    Ive been trying for a while to make the sliding panels widget
    show each panel in its own height instead of the longest panel's height in the container.
    I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
    I do, however, have a list of things that i believe if implemented should work,
    could you  help me do these fixes on the js? ( any one you know how to or think will work )
    1. edit so that:  Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
    2. edit so that:  PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
    3. edit so that:  Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
    4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
    the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
    He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
    <script>
    // The following function - setPanelNavigation() - assumes the following
    // 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
    // 2. The Previous Panel button has an ID of previousPanel
    // 3. The Next Panel button has an ID of nextPanel
    // 4. SpryDOMUtils.js has been linked
    function setPanelNavigation() {
        var current = sp1.getCurrentPanel(); // Get the current panel
        var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
        var panelNumber=1; // Give a value to the first panel number
        Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                     if (node.id==current.id){ // The current panel now receives a number
               if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
               if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
            panelNumber++; // Go to next panel after incrementing the count
    Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
    Anyone, please help. Thank you.

    wait my bad, the link to my page is:
    http://www.pupr.edu/department/industrial/students.asp
    ** no s on department

  • 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

  • Spry Sliding Panel Problem - Repost

    Hi hope you can help.
    My Spry Sliding panel is appearing over my floats in IE, fine
    in Firefox.
    I previously posted but it is in fact not working.
    Test
    page here
    Sliding
    Panels CSS Here
    Any ideas?
    Is this a spry problem or my CSS?
    Thanks.
    Rich

    quote:
    Originally posted by:
    kinblas
    If you're getting a "Spry is undefined" error, it probably
    means that the browser is not finding the JS files you included at
    the top of your HTML file. Make sure the path to your JS files are
    correct ... you can do this by trying to load the JS files directly
    in the URL field at the top of your browser.
    --== Kin ==--
    if u look at the code.. u will seee:
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    it should be
    <script src="SprySlidingPanels.js"
    type="text/javascript"></script>

  • Spry sliding panels problem

    Hi,
    I'm using the sliding panels on my website, but I'm getting
    an error when I use a vertical scrollbar.
    To the right of the sliding panels I have an image, and when
    I press the up and down arrows, the hidden sliding panels are
    visible under the image!
    Any ideas?
    Luke

    quote:
    Originally posted by:
    Donald Booth
    Hi Spry Users,
    We are pleased that you are using Spry!
    When posting issues for help, please help us help you.
    Providing a URL is the quickest way
    for the Spry team, and our valued forum community, to help you with
    your page.
    Code samples are also great if you
    can't provide a URL.
    And of course, having the latest code
    is always a good idea. Use the latest download if possible.
    Questions posted without urls/code inevitably take more back
    and forth to get figured out.
    And now that this forum has been up for a year and a half, we
    have a good record of fixes previously given. Search the forums and
    see if your question has been solved already.
    Thanks for reading. Now, how can we help you?
    The Spry Team
    ^ else we cant Identify the problem

  • Sliding panels adjustment problem - urgent

    Hi
    i have a div for header and footer and the sliding panels in between. it works but for one thing:
    i need to make it so when the inner panels have large contents it will be at that height. so the footer div will be pushed down to make room for the contents. and so, the sliding widgets adgust its height according the contents that is within each inner panel.
    how can i make it? it is really urgent.
    best regards
    derrida

    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

  • Spry Sliding Panel Widget problem

    I have tried to use the Spry Widget Sliding Panel code from
    the Adobe tutorial and I keep getting an error message. The message
    is that "Spry" is undefined in line 26. Please help! I have been
    trying to figure this out for 2 days. Is there any code I have to
    change in the .css file or in the .js file that comes with the Spry
    Widget Sliding Panel download.
    I am just getting familiar with the on-line community and I
    have posted this to two other fora -- so please forgive the
    repetition. I am also new to Spry and am eager to learn how to use
    it. I hope it is not too advanced for my level.
    Attached, please find the code.
    Attach 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Untitled Document</title>
    <link href="SprySlidingPanels3.css" rel="stylesheet"
    type="text/css" />
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    </head>
    <body>
    <a href="#" onClick="sp0.showPanel(0);"> Panel
    1</a>
    <a href="#" onClick="sp1.showPanel(1);">Panel
    2</a>
    <a href="#" onClick="sp2.showPanel(2);">Panel
    3</a>
    <a href="#" onclick="sp3.showPanel(3);">Panel
    4</a>
    <div id="slidingPanel_1" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div id="sp1"
    class="SlidingPanelsContent">Content1</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content2</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content3</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content4</div>
    </div>
    </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("SlidingPanel_1");
    </script>
    </body>
    </html>

    quote:
    Originally posted by:
    kinblas
    If you're getting a "Spry is undefined" error, it probably
    means that the browser is not finding the JS files you included at
    the top of your HTML file. Make sure the path to your JS files are
    correct ... you can do this by trying to load the JS files directly
    in the URL field at the top of your browser.
    --== Kin ==--
    if u look at the code.. u will seee:
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    it should be
    <script src="SprySlidingPanels.js"
    type="text/javascript"></script>

  • Sliding panel horizontal scrollbar problem

    Issue: This is about horizontal sliding panels.
    I want to restrict the height on the sliding panel to say,
    200px. Some of the panel content is longer than that. So I want a
    scrollbar to appear vertically (overflow:auto). It does this.
    However, when the panel with the scrollbar slides off to the left,
    its scrollbar remains present at the leftmost part of the window...
    where the new content panel is.
    Is there any way to prevent this from happening, and allow
    the content that needs the scrollbars to have it?
    thank you

    Hi jratlantic,
    So it appears that you changed the default setting for
    overflow on the .SlidingPanelsContent rule:
    .SlidingPanelsContent {
    width: 547px;
    height: 100px;
    overflow:auto;
    Instead of putting it on the .SlidingPanelsContent, try
    putting it on:
    .SlidingPanelsCurrentPanel {
    overflow:auto;
    And see if that makes a difference. That will ensure that
    only the panel that is currently showing, and not animating, has
    scrollbars.
    --== Kin ==--

  • Horizontal Sliding Panels flicker IE

    Hello
    I'm using the horizontal Sliding Panel to slide some Images
    and text. It works fine with Safari on Mac, but with IE and Firefox
    on Windows the animation isn't very smooth (the problem concerns
    only the image, the text-sliding works fine). With the vertical
    Sliding Panels I don't have this problem...
    Can anyone help me? Thanks

    solaris23 wrote:
    > Hello Danilo
    >
    > Horizontal:
    http://www.miomedia.ch/test/SprySlidingPanels.html
    > Vertical:
    http://www.miomedia.ch/test/SprySlidingPanels2.html
    >
    > Look on the image in the horizontal slide, the animation
    flickers on the left
    > and right image-borders.
    > In the vertical slide the animation is much smoother.
    This probably has to do with the rendering of the moved
    elements on the page and IE redrawing portions of the images at a
    time during the slide. I'd suspect that the issue actually exists
    in the vertical slide as well, but is minimized due to the angled
    top and bottom of the images, but that's just a suspicion, not a
    known fact. It seems that if I look closely enough at the animation
    in Firefox it seems to be doing something similar, but it is indeed
    a good bit smoother than IE.
    > I'm using transparent png images, I've also tried with
    jpg, with different
    > duration time, different fps... but still the same
    problem....
    That would have been my suggestion too. A quick local copy of
    your page and it seems that making the duration 1000 milliseconds
    seems to help with moving left to right, but moving right to left
    still has a little bit of flicker.
    I tried making the images smaller and it seemed to be
    lessened, so perhaps it's IE and the larger images rendering. You
    might also try making the vertical lines of the screenshot to be a
    bit less vertical, or perhaps add a shadow or glow to the image to
    soften the hard vertical edge.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

Maybe you are looking for

  • Benefits of using SAP CAR compared to SAP BW on HANA

    Hi I' like to understand the benefits of using SAP Customer Activity Repository. How is it better than SAP BW on HANA? What extra functions does the customer get?

  • Why Can't i use Adobe Presenter on iPad???

    Hi there I want to watch my lectures on Adobe Presenter as this is used by my teachers. How come it won't work on my ipad. Is there another program i can use etc. I need a solution please so i can watch my lectures. Thanks for your time

  • How can I keep my account safe from enemies?

    I've made some enemies that are still my Skype friends, and they are capable of taking my Skype name, and posting it on other sites saying that I want requests for XXX chatting. It's not fair how I can't hide my Skype name from them, so they are guar

  • WSS security and clustering  in SOA Suite 11g

    We are calling one composite from another as a reference. Both are on the same clustered domain. We are using AIA WSDLs so there is a default WSS username password token as policy. While on the single server domain, we do not need to pass the credent

  • Windows Vista System download timeout error

    Hi, Every Adobe Reader download i've tried keeps giving me a download timeout error. I have removed all Adobe programs Adobe Reader X (10.1.3) Adobe Air Acrobat.com Adobe Reader 9 AcroRead.msi then i re-started my laptop and tried to re-install Adobe