SPRY accoridian variable Panel Heights

Hi,
I have used Accordion panels on one of the page. Content of
the panels are of different length so I have made it variable
height by " useFixedPanelHeights: false" . When I preview in the
browser all the panels are variable length but I still get scroll
bar on few panels. The scroll bar is for may be 1 or 2 lines only.
for example one of my panel is about 275px in height and I
get scroll bar of 1-2 lines. Other panel is 600px in height and I
still get scroll bar of 1-2 lines only. I think it happens when my
list has more than 3 bullets points inside the panel.
Can someone please help?
Thanks!

Hi Donald, I inserted <script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", {
useFixedPanelHeights: false });
</script> into my code. It's almost there, but not
quite. I can see that it is trying to re-ajust the panels' height,
but for panels that have a larger content it tends to show the
whole panel's content and then hides the half of it. Also for
panels with fewer content it doesn't seem to have an effect at all.
I don't know if I have to fix something in the CSS or place the
Acc1 ID in a different location within my accordion HTML code.
Thank you.
Here's the URL I'm working on if you want to take a look.
http://64.49.218.100/product_p/00-120-0ll.htm

Similar Messages

Spry Accordion Different Panel Heights

I'm building a Spry Accordion Widget as a left nav menu with
25 different panels. Some of my panels contain 10 different links
and others contain only 1 single link. Therefore I would like to
adjust the height of each panel individually according to the
number of links they contain, so I don't end up with huge white
spaces in panels that contain fewer links. My initial idea, in
addition to the .AccordionPanelContent class was to add an "id" to
each panel and control each panels height through CSS. But for some
reason I haven't been successful that way. It looks like all panels
tend to take the height of the first panel, regardless of their
individual set heights. I wonder if I can resolve my problem
uniquely with CSS, or I do I have to go and change something in the
SpryAccordion.js file.
Thanks.

Hi Donald, I inserted <script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", {
useFixedPanelHeights: false });
</script> into my code. It's almost there, but not
quite. I can see that it is trying to re-ajust the panels' height,
but for panels that have a larger content it tends to show the
whole panel's content and then hides the half of it. Also for
panels with fewer content it doesn't seem to have an effect at all.
I don't know if I have to fix something in the CSS or place the
Acc1 ID in a different location within my accordion HTML code.
Thank you.
Here's the URL I'm working on if you want to take a look.
http://64.49.218.100/product_p/00-120-0ll.htm

Accordion variable panel height got stuck

Hi,
I've a couple of collapsible (dynamically generated) panels
in a accordionpanel (the accordion has three panels in total). When
the page opens all is oké. When i open one of the collapsible
panels, the accordionpanel auto change its height.
But when i switch to an other accordion panel and then switch
back to my first accordionpanel, which has all the collapsible
panels, and i then open one or more collapsible panels, the conten
in that accordionpanel is partly hidden, because the accordion
panel doesn't change its height anymore.
Has anyone a clue???
I can't show you the page, it's stull on my localwebserver
Thanx
hans

See http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights

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

Variable accordion panel height

Hello,
I just started playing around with spry accordion today, and am not a javascript/css expert by any means :-)
I see that it is possible, from examples online, to have varying panel heights, depending on the contents of an accordion, but can't see how to make it happen. I see how to specify a fixed height for a panel, or how to have all panel heights be the same size as the panel with the most content, using the height specification in SpryAccordion.css under .AccordionPanelContent.
Any pointers much appreciated!
cheers,
Joan

See http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights

Resizing a JList with variable row heights, not updating the "picture"

Firstly I would like to apologize for posting this Swing question here, but I was unable to find the Swing category, if someone could direct me to that I would be most grateful.
Ok, so in abstract what I am trying to do is have a JList with resizable rows to act as a row header for a JTable (exactly like the row headers in OO Calc or MS Excel).
What I have is a RowHeaderRenderer:
public class RowHeaderRenderer extends JLabel implements ListCellRendererand it has a private member:
private Vector<Integer>        _rowHeights            = new Vector<Integer>();which contains a list of all the variable row heights.
Then there is my getListCellRendererComponent method:
    public Component getListCellRendererComponent(    JList         list,
                                                      Object        value,
                                                      int           index,
                                                      boolean       isSelected,
                                                      boolean       cellHasFocus)
        // Make sure the value is not null
        if(value == null)
            this.setText("");
        else
            this.setText(value.toString());
        // This is where height of the row is actually changed
        // This method is fed values from the _rowHeights vector
        this.setPreferredSize(new Dimension(this.getPreferredSize().width, _rowHeights.elementAt(index)));
        return this;
    }And then I have a row header:
public class RowHeader extends JList implements TableModelListener, MouseListener, MouseMotionListenerand you may be interested in its constructor:
    public RowHeader(JTable table)
        _table = table;
        _rowHeaderRenderer = new RowHeaderRenderer(_table);
        this.setFixedCellWidth                        (50);
        this.setCellRenderer                        (_rowHeaderRenderer);
        // TODO: grab this value from the parent view table
        JScrollPane panel = new JScrollPane();
        this.setBackground(panel.getBackground());
        this.addMouseMotionListener                    (this);
        this.addMouseListener                        (this);
        this.setModel                                (new DefaultListModel());
        table.getModel().addTableModelListener        (this);
        this.tableChanged                            (new TableModelEvent(_table.getModel()));
    }and as you can see from my mouse dragged event:
    public void mouseDragged(MouseEvent e)
        if(_resizing == true)
            int resizingRowHeight = _rowHeaderRenderer.getRowHeight(_resizingRow);
            _rowHeaderRenderer.setRowHeight(_resizingRow, resizingRowHeight + (e.getPoint().y - _cursorPreviousY));
            _cursorPreviousY = e.getPoint().y;
    }all I am doing is passing the rowHeaderRenderer the values the currently resizing row should be, which works fine. The values are being changed and are accurate.
The issue I am having is that while this dragging is going on the row does not appear to be resizing. In other words the "picture" of the row remains unchanged even though I change the values in the renderer. I tried calling:
this.validate();and
this.repaint();at the end of that mousedDragged method, but to no avail, neither of them worked.
Again, I verified that I am passing the correct data in the RowHeaderRenderer.
So, anyone have any ideas how I should get the image of the RowHeader (JList) to update after calling my MouseDragged event?
Thank you for your time,
Brandon

I was able to fix this some time ago. Here is the solution:
     public void mouseDragged(MouseEvent e)
          if(_resizing == true)
               int newHeight = _previousHeight + (e.getPoint().y - _cursorPreviousY);
               if(newHeight < _minRowHeight)
                    newHeight = _minRowHeight;
               _rowHeaderRenderer.setRowHeight(_resizingRow, newHeight);
               _table.setRowHeight(_resizingRow, newHeight);
          this.updateUI();
     }

Setting accordion content panel height with hidden content

Following previous instructions, I set

at the bottom of the content page. However, some of the
accordion panel content is hidden until the user selects a radio
button. The panel height is not dynamically adjusted to the
content. FYI, the content is hidden using
style.visibility = 'hidden
In SpryAccordion.css, I commented out the height attribute.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
/* height: 200px; */
It appears to me that the panel height is still fixed, but by
what I am not sure. Any clues would be appreciated. Here's the demo
page:
http://www.phelpstek.com/cr/wildflower_wedding_favors/index.html
Thanks for any input/ideas.
Brian Phelps
www.phelpstek.com

graylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz

Contextual Panel Height Adjustment

I have a scenario:
There are 2 Contextual Panels in my application, left panel is a navigation panel and right panel is a content panel which depends on the viewswitch selected in the left panel.
The right panel height is variable depending on the contents. I have tried many properties settings like 100% height and stretchedVertically for the Transparent Container which is Matrix Layout to make both panels height equal during runtime, but i couldn't.
Any comment is appreciated. Thanks!

Hi Mary,
Even I faced similar problem , thought its not a permanent solution it might be of some help I guess.
Firstly, we can adjust the heights of free contextual area in your contextual panel . You can bind the content height property of the free contextual area to a variable or attribute and can set it accordingly. Further you need to make sure you put transparent containers in these free contextual area's which have auto scrollable mode, then you can fix the height of these containers.
P.S It'll take a number of hits and misses to finally get the two contextual panel to be of same height.
I hope it helps.
thanks and regards,
sunny

Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

Keyboard Shortcuts Missing / Variables Panel Error

This has been going on for at least a couple of weeks now. I'm currently using CS4, Windoxs XP (SP3) and Firefox. Every time I open the Illustrator program, the following message pops up:
"Error loading plugins. Variables Panel.aip."
So I click OK and the workstation screen opens up. Only problem now is that the keyboard shortcuts for Open, Close, Copy, Paste, etc. are missing and I can't even use the keyboard to zoom up and down on the layer section.
I have read several forums on how to fix the problem short of uninstalling and reinstalling the program. I tried going to:
C:\Program Files\Adobe\Adobe Illustrator CS4\Plug-ins\Extensions
...and removed the "Variables Panel" plugin, then went to CA Technologies and removed, then restored the Win32/FakeAlertYS files.
Opened the program. Not only did it not work, but it crashed in the process!
I then tried updating Firefox to 3.6. That didn't work either.
I'm running out of things to try but I guess my only resolution is to contact the tech support and shell out the 42 dollars in order to get the program working again.

That's what I ended up doing, with some technical help...and now it's
working properly.

Variables Panel not working 100%

Is anybody else having the problem; When you select a linked image on the artboard you should have the option to " Create a Linked File variable:
Select a linked file and click the Make Object Dynamic button in the Variables panel." That is right out of the Adobe Illustrator reference. When I select linked files the button to make object dynamic is greyed out.I see no other way to continue(CS6) also reading about similar problems in (CS5).
Every other feature seems to work just like the manual says.
Thanks

Yes that was exactly my problem. Thanks! I was just placeing the image and forgetting the Link checkbox. Worked like a charm my variables panel now has the option. Thanks again!

How do I read the actual height of the panel title bar (or actual total panel height)

In Flex 4.5:
I have panel which is reading panel.height as 159, however it contains a swf in a swfloader which is 400 in height so it should be more than 400.
I need to know what the actual height of the panel is so I can scaleX and scaleY it to full screen height eg. scale=screenheight/panelHeight.
I know the content container will be 400 (the size of the movie) but can't read the height of the titleBar, and the overall panel height is returning the wrong value.

Spark Panels don't clip. Maybe that's what is going on? Also check the
measuredHeight of the Panel.

Spry Widget Sliding Panel

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.
Attached, please find the code.

Also copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href=

How to make Spry Accordion Content Panel with a variable content fit

I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps

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 accoridian variable Panel Heights

Similar Messages

Maybe you are looking for