Spry sliding panels widget - panel auto height problem - javascript problem

[twiztidmonkee]

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 approaches that i believe if implemented should work,

could you help me do these fixes on the js?

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 (http://cookbooks.adobe.com/post_Spry_Sliding_Panels_Group_Navigation_Buttons-18411.html)


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, im sure 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 (http://node.id/)==current.id (http://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.