Sliding Panels Height

I want to set individual heights for the different
"AccordionPanelContent"s. Doing this using understood methods of
CSS is not working and there is no help in the Dreamwaver Help
files. So, what I need to know is....what CSS propert can I use so
that one content box is say, 200px tall and the other is 500px
tall...or...so they are all based on whas placed inside of them.
Any help?

Hi,
you can add on the accordion constructor this option:
useFixedPanelHeights to set different heights on the accordion's
content.
We have on this
page
an working example to see how to do this.
Please let us know if you have other questions,
Diana

Similar Messages

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 with dynamic heights

Hello,
I'm currently working with sliding panels. When I resize my
panels, the panel indexing system in spry does not seem to conform.
Ie, if my panels are 100px high. As soon as I dynamically
change them to 50px, panel(1) is no longer the second panel but
rather the fourth.
It appears that spry retains heights of elements. Is there
something in SprySlidingPanels.js I can call for it to
'recalculate' the heights?
Thanks

I was wrong!
Spry is indeed clever and retains panel number.
Doh!

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

Background image instead of color for each sliding panel

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

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

Safari 4 problems - HTMLDataSet/Sliding Panels

Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />

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

<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>
</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>
</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"/>
     </div>
     <br class="clearfloat" />
   <div id="footer">
    <p>© 2009</p>
</div>
     </div>
<script type="text/javascript">

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

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

Spry Sliding Panels not working in IE

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

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

Sliding Panel Content Not Hidden

Hi All. This is my first post so apologies if I do something wrong.
I'm setting up sliding panels to work on my site (I've used them before) and this time I can't get the panels that aren't displayed to hide. The panels slide, but all panels are visable at all times. Here is the code -
CSS
.SlidingPanels {
    position: relative;
    width: 221px;
    height: 260px;
    padding: 0px;
    border: none;
.SlidingPanelsContentGroup {
    position: relative;
    width: 10000px;
    margin: 0px;
    padding: 0px;
    border: none;
.SlidingPanelsContent {
    width: 221px;
    height: 260px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: none;
.SlidingPanelsAnimating * {
    overflow: hidden !important;
.SlidingPanelsCurrentPanel {
.SlidingPanelsFocused {
TEST.PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://www.guaranteedprofit.co.uk/Scripts/SprySlidingPanels.js" type="text/javascript"></script>
<link href="http://www.guaranteedprofit.co.uk/sandbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
Has anyone got any suggestions please as I know it's something simple, I just can't work it out. I've tested it in FF and IE6
Thanks in advance, Adam

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

Sliding panel inside tabbed panel - onclick both

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

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

Sliding Panels Help for Javascript Idiot

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

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

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

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

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

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

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

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 PAnels

HI,
I am trying to incoperate the "Spry Sliding" feature in my
website.But problem is coming that I have to define the height of
the container of each sliding panel(So,its not giving the
flexibilty) If I am removing the height than the all panels are
showing (So,the effect of sliding panel is lost).
So help me how to define the same feature without the
"HEIGHT".I am using the examples/demos given on the spry offical
website.
Thanks,

Yes that sounds about right. As usual I am trying to figure
out ways to have a nice navigation and be able to have a good
amount of copy live on the page and keep the web pages footer
within the viewers browser window. The search continues.

Sliding Panel needs feedback

Here is my class for a sliding panel. The class is released as open source. Please feel free to feed this into your IDE and provide feedback for improvement.
Known issues include: double clicking the component2 to be shown, some flickering in graphics.
import javax.swing.*;
import java.awt.*;
public class JSlidingPanel extends JPanel{
     private JComponent component1, component2;
     private Dimension dim1, dim2;
     private int rate = 30, delay=35;      //deals with showing speed. How smooth should animation occur. default 7. delay = 5;     //also deals with showing speed. How fast to show component2.          default 10
     private boolean shown, showing, hiding, newComponent;
     private GridBagLayout grid;
     private GridBagConstraints c;
     static JPanel p2;
     public static void main(String[] a){
          final JSlidingPanel s = new JSlidingPanel();
          JLabel label = new JLabel("Put Mouse HERE");
               label.addMouseListener(new java.awt.event.MouseAdapter(){
                    public void mouseEntered(java.awt.event.MouseEvent e){
                         s.showComponent2();
                         if(s.getComponent2() == null){
                              s.setComponent2(p2);
                              s.getComponent2().setSize(new Dimension(100, 100));
                    }public void mouseExited(java.awt.event.MouseEvent e){
                         s.hideComponent2();
          JPanel p1 = new JPanel();
               p1.add(label);
               p1.setOpaque(true);
               p1.setBackground(Color.red);
          p2 = new JPanel();
               p2.setOpaque(true);
               p2.setBackground(Color.green);
               p2.setLayout(new BoxLayout(p2, BoxLayout.Y_AXIS));
               JPanel p2_1 = new JPanel();
                    p2_1.add(new JLabel("HELLO Olvin"));
                    p2_1.setOpaque(true);
                    p2_1.setBackground(Color.white);
               JPanel p2_2 = new JPanel();
                    p2_2.add(new JLabel("HELLO Olvin"));
                    p2_2.setOpaque(true);
                    p2_2.setBackground(Color.gray);
               JPanel p2_3 = new JPanel();
                    p2_3.add(new JLabel("HELLO Olvin"));
                    p2_3.setOpaque(true);
                    p2_3.setBackground(Color.black);
               p2.add(p2_1);
               p2.add(p2_2);
               p2.add(p2_3);
               p2.setMinimumSize(new Dimension(100, 200));
               p2.setMaximumSize(new Dimension(100, 200));
               p2.setPreferredSize(new Dimension(100, 200));
               p2.setSize(new Dimension(100, 200));
                    s.setComponent1(p1);
                    s.setComponent2(null);
                    //s.getComponent2().setSize(new Dimension(100, 100));
               JPanel panel = new JPanel();
                    panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
                    panel.add(new JLabel("Hola"));
                    panel.add(s);
                    panel.add(new JLabel("<html><div style='height: 40px; background:#0000FF;'> </div></html>"));
               JFrame f=new JFrame("");
                    f.setContentPane(panel);
                    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    f.setSize(650,500);
                  f.setVisible(true);
     public JSlidingPanel(){
          super();
          newComponent=false;
          grid = new GridBagLayout();
          c = new GridBagConstraints();
               c.fill=GridBagConstraints.HORIZONTAL;
               c.anchor=GridBagConstraints.NORTH;
               c.weightx=1;
               c.weighty=0;
          setLayout(grid);
     public void paintComponent(Graphics g){
          super.paintComponent(g);
          if(newComponent && component2 != null){
               try{
                    dim1 = new Dimension(component1.getSize().width, component1.getSize().height);
                    dim2 = new Dimension(component2.getSize().width, component2.getSize().height);
                    realizeDimensions();
               }catch(Exception ex){JOptionPane.showMessageDialog(null, "Component1 not set");}
               newComponent=false;
     public synchronized boolean isComponentShown(){
          return shown;
     public synchronized void setComponent1(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setOpaque(false);
          component1 = panel;
          c.gridx=0;
          c.gridy=0;
          c.gridwidth=1;
          c.gridheight=1;
          c.fill=GridBagConstraints.HORIZONTAL;
          grid.setConstraints(component1, c);
          add(component1, 0);
     public synchronized JComponent getComponent2() {
          return component2;
     public synchronized void setComponent2(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setName("null");
               panel.setOpaque(false);
          if(component1 == null){
               setComponent1(null);
          }if(component2 != null){
               this.remove(component2);
          newComponent=true;
          component2 = panel;
               c.gridx=0;
               c.gridy=1;
               c.gridwidth=1;
               c.gridheight=1;
               c.fill=GridBagConstraints.HORIZONTAL;
               grid.setConstraints(component2, c);
               add(component2, 1);
               updateUI();//repaint components. Needed
     public synchronized void hideComponent2(){
          if(showing || hiding || component2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    hiding=true;
                    int counter = dim2.height-rate;
                    while(component2.getSize().height > 0){
                         if( counter < 0 ){
                              int extra = counter;
                              int exact_amount = (counter - extra) ;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter -= rate;
                    hiding=false;
                    shown=false;
          };t1.start();
     public synchronized void showComponent2(){
          if(showing || hiding || component2==null || dim2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    showing=true;
                    int counter = rate;
                    while(component2.getSize().height < dim2.height){
                         if( counter > dim2.height ){
                              int extra = (counter-dim2.height);
                              int exact_amount = counter-extra;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+counter));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+counter));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+counter));
                         setSize(new Dimension(dim1.width, dim1.height+counter));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter += rate;
                    showing=false;
                    shown = true;
          };t1.start();
     private void realizeDimensions(){
          component2.setPreferredSize(new Dimension(dim2.width,0));
          component2.setMinimumSize(new Dimension(dim2.width,0));
          component2.setMaximumSize(new Dimension(dim2.width,0));
          component2.setSize(new Dimension(dim2.width,0));
          setPreferredSize(dim1);
          setMinimumSize(dim1);
          setMaximumSize(dim1);
          setSize(dim1);
          updateUI();
}

Im sorry guys for not replying it was probably because I didnt add this topic to my Watchlist. Now it is. Anyhow, I wrote a slightly different main() so you can test the custom JPanel again. This time it displays a red label. Once you place the mouse over it, it should make another JLabel (green colored) )visible. Known issues still include unwanted flickering, use of threads(instead of timers), and too many lines of code(7.5KB). This code is public domain so the community can make any changes. Please post your code modifications in this forum.
It runs fine under Java(TM) SE Runtime Environment (build 1.6.0_10-b33)
import javax.swing.*;
import java.awt.*;
public class JSlidingPanel extends JPanel{
     private static final long serialVersionUID = 1L;
     private JComponent component1, component2;
     private Dimension dim1, dim2;
     private int rate = 20;
     private int delay = 10;
     private boolean shown;
     private boolean showing;
     private boolean hiding;
     private GridBagLayout grid;
     private GridBagConstraints c;
     private boolean newComponent;
     public static void main(String[] a){
          final JSlidingPanel s = new JSlidingPanel();
          JLabel label = new JLabel("Put Mouse HERE");
               label.addMouseListener(new java.awt.event.MouseAdapter(){
                    public void mouseEntered(java.awt.event.MouseEvent e){
                         s.showComponent2();
                    }public void mouseExited(java.awt.event.MouseEvent e){
                         s.hideComponent2();
          JPanel p1 = new JPanel();
               p1.add(label);
               p1.setOpaque(true);
               p1.setBackground(Color.red);
          JPanel p2 = new JPanel();
               p2.setOpaque(true);
               p2.setBackground(Color.green);
               p2.setLayout(new BoxLayout(p2, BoxLayout.Y_AXIS));
               p2.add(new JLabel("<html><h1>My HTML Label</h1><p>This component is a JLabel inside a JPanel.</p>"));
                    s.setComponent1(p1);
                    s.setComponent2(p2);
                    s.getComponent2().setSize(new Dimension(100, 300));
               JFrame f=new JFrame("");
                    f.setContentPane(s);
                    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    f.setSize(650,500);
                  f.setVisible(true);
     public JSlidingPanel(){
          super();
          newComponent=false;
          grid = new GridBagLayout();
          c = new GridBagConstraints();
               c.fill=GridBagConstraints.HORIZONTAL;
               c.anchor=GridBagConstraints.NORTH;
               c.weightx=1;
               c.weighty=0;
          setLayout(grid);
     public void paintComponent(Graphics g){
          super.paintComponent(g);
          if(newComponent && component2 != null){
               try{
                    dim1 = new Dimension(component1.getSize().width, component1.getSize().height);
                    dim2 = new Dimension(component2.getSize().width, component2.getSize().height);
                    realizeDimensions();
               }catch(Exception ex){JOptionPane.showMessageDialog(null, "Component1 not set");}
               newComponent=false;
     public int getDelay() {
          return delay;
     public void setDelay(int delay) {
          this.delay = delay;
     public int getRate() {
          return rate;
     public void setRate(int rate) {
          this.rate = rate;
     public synchronized boolean isComponentShown(){
          return shown;
     public synchronized boolean isComponentHidden(){
          return !shown;
     public synchronized boolean isComponentShowing() {
          return showing;
     public synchronized boolean isComponentHiding() {
          return hiding;
     public synchronized JComponent getComponent1() {
          return component1;
     public synchronized void setComponent1(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setOpaque(false);
          component1 = panel;
          c.gridx=0;
          c.gridy=0;
          c.gridwidth=1;
          c.gridheight=1;
          c.fill=GridBagConstraints.HORIZONTAL;
          grid.setConstraints(component1, c);
          add(component1, 0);
     public synchronized JComponent getComponent2() {
          return component2;
     public synchronized void setComponent2(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setName("null");
               panel.setOpaque(false);
          if(component1 == null){
               setComponent1(null);
          }if(component2 != null){
               this.remove(component2);
          newComponent=true;
          component2 = panel;
               c.gridx=0;
               c.gridy=1;
               c.gridwidth=1;
               c.gridheight=1;
               c.fill=GridBagConstraints.HORIZONTAL;
               grid.setConstraints(component2, c);
               add(component2, 1);
               updateUI();
     public synchronized void hideComponent2(){
          if(isComponentShowing() || isComponentHiding() || getComponent2()==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    hiding=true;
                    int counter = dim2.height-rate;
                    while(component2.getSize().height > 0){
                         if( counter < 0 ){
                              int extra = counter;
                              int exact_amount = (counter - extra) ;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter -= rate;
                    hiding=false;
                    shown=false;
          };t1.start();
     public synchronized void showComponent2(){
          if(isComponentShowing() || isComponentHiding() || getComponent2()==null || dim2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    showing=true;
                    int counter = rate;
                    while(component2.getSize().height < dim2.height){
                         if( counter > dim2.height ){
                              int extra = (counter-dim2.height);
                              int exact_amount = counter-extra;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+counter));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+counter));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+counter));
                         setSize(new Dimension(dim1.width, dim1.height+counter));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter += rate;
                    showing=false;
                    shown = true;
          };t1.start();
     private void realizeDimensions(){
          component2.setPreferredSize(new Dimension(dim2.width,0));
          component2.setMinimumSize(new Dimension(dim2.width,0));
          component2.setMaximumSize(new Dimension(dim2.width,0));
          component2.setSize(new Dimension(dim2.width,0));
          setPreferredSize(dim1);
          setMinimumSize(dim1);
          setMaximumSize(dim1);
          setSize(dim1);
          updateUI();
}

Sliding Panels No Javascript Enabled,

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

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

Sliding Panels Height

Similar Messages

Maybe you are looking for