Accordion Issues: JS or CSS & ?, Set accordion panels to custom heights Options

[UptonGirl]

Using Dreamweaver CS3

I need to set my accordion panels to custom heights. There are two accordions on each page. See WORK IN PROGRESS

Things to notice:

Acordion1 and Accrodion2 -- set separately. Ideally, I'd like to have the panels in the accordion that is not being used all closed, but I already seem to have command conflicts.

Each panel will have a height that corresponds to its content so that all content will be visible when the panel is open.


Example of source code from a page related to Accrodion1

<!-- InstanceBeginEditable name="SWApannel" --><script type="text/javascript">
<!--
var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2");
//-->
</script><!-- InstanceEndEditable -->


In addition to the default panel open, I want custom panel height.


These are the instructions for custom panel heights:

Set variable panel heights

By default, when animation is enabled, Spry forces all accordion content panels to use the same height. Spry derives this height from the height of the default open panel of the accordion, which is determined by CSS or by the height of the content in the panel.

The accordion also supports variable height panels. To turn this support on, pass a useFixedPanelHeights: false option to the accordion's constructor.
Pass a useFixedPanelHeights:false option as follows:

<script type="text/javascript">
var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false });
</script>

For an example, see the Accordion sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs.

To have Spry set the panel height to a set value in JavaScript (rather than CSS code), pass the fixedPanelHeight option that programatically sets the content panel heights. Pixels are used for this option.

<script type="text/javascript">
var acc7 = new Spry.Widget.Accordion("Acc7", { fixedPanelHeight: "300px" });
</script>

Note: When using Variable Panel Heights, the cursor will turn to a hand for the open panel. This is expected because the panel can still close onclick. It can be overridden by editing the accordion class:

.AccordionPanelOpen {
cursor: auto;
}

I can't seem to find a Spry download other than one for Ajax. Is that the one I want?

The layout instructions here are not clear. Do I start another <script type="text/javascript"> for each command?

Also, in my case, the name "Acc7" doesn't seem to work. Sorry if this is garbled - I'm feeling a bit garbled myself!

BTW - when I try to add this:

<script type="text/javascript">
var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false });
</script>

I get an error message that says that it refers to an accordion that no longer exists. What am I missing?



This post has been edited by UptonGirl: Jan 22 2009, 02:34 PM

[UptonGirl]

My problem was that I needed to update SPRY.

All is well now.

This post has been edited by UptonGirl: Jan 22 2009, 08:55 PM

[pandy]

Have you made your avatar yourself? It's funny!

[UptonGirl]

Have you made your avatar yourself? It's funny!

No - I actually found it as a free download. And - it was so EXACTLY how I feel at some point on most days . . .

[Frederiek]

Get a Mac!

[pandy]

What's that? A hamburger?

[UptonGirl]

Get a Mac!

It's so funny how that's the Mac-o-philes answer to everything. Even when it's not relevant. This is an Adobe issue - and my JS illiteracy issue. Neither of those things will change by getting a MAC!

And -- I REFUSE to go to the Dark-Side!



Ev

[Darin McGrew]

And -- I REFUSE to go to the Dark-Side!

Yeah, that's how I feel about Microsoft...