Keeping at Least One Accordion Panel Open with Variable Heights

Hi -
Is there a way to keep at least one panel open when using {
useFixedPanelHeights: false }?
Here's an example:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights
If panel 4 is open, and you click the panel 4 heading, it
closes and no
panel is open.
Thanks,
Rod

Sorry, I didn't read my full message regarding wanting only
one panel to open.
What I ended up doing was using a PHP conditional to display
a message if a certain variable was not passed in the URL. See my
post on the Friends of Ed forum. Scroll to the bottom for my
solution.
http://friendsofed.infopop.net/4/OpenTopic?a=tpc&s=989094322&f=5283032876&m=3461018571

Similar Messages

Start with all Accordion panels closed with variable height panels

I inserted a Spry Accordion on this page: http://www.brucebarrdesign.com/video_new.htm
I want the panels to open to a size depending upon the content within them so I set the height to auto. The problem is that when you go to the page, the first panel is open. I want all of the panels to be closed when you first go to the page. Per the Help docs and some posts I've seen in the forum, I tried inserting this code:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
However, this only works with fixed height panels. If I use it with the variable height, it opens all of them, so I commented it out for now. How can I get this to work?
Thanks

GPDMTR25 wrote:
I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela
Hi Angela,
You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
Hope this helps.
Ben

Hi, I use two email addresses within one account with gmx. I created one account with the first email address now. How do I add the second one to this account? Now it looks like this. One account was opened with address A. I receive in this account email

Hi, I use two email addresses within one account with gmx.
I created one account with the first email address now. How do I add the second one to this account?
Now it looks like this.
One account was opened with address A.
I receive in this account emails for address A and B.
But I can only write and answer with address A.

Hi Rudegar,
Sorry for my late reply.
It s not the amount of accounts I'm struggling with.
When I create now for both email addresses one account, then I receive the same emails two times.
That is not what I want.
Because on gmx the two email addresses have the same inbox and outbox.
E.g. I can login to my gmx account either with email A or B. It doesn't matter.
Now I want to have the same on my ipad.
One account with both email addresses.

Accordion with variable height

Hi -
I have a 2-panel accordion with variable heights, and spry
data in both the top and bottom panels. Selections made in the top
panel will load data into the bottom panel, and the page opens to
the top panel by default. My problem is that the bottom panel will
only display enough height to show the initial HTML markup, and not
the spry data generated after the initial page load. Is there any
way to use an observer to "refresh" the accordion to reset its
height to accommodate the new data?
Also, is there a way to require that at least one panel
remain open when using variable heights?
Thanks in advance,
Rod

Hi,
We have a similar question on this
post.
To fit exactly with your request you should change the line:
regionHeight =
document.getElementById("myRegion").scrollHeight;
with:
document.getElementById("myRegion").style.height =
document.getElementById("myRegion").scrollHeight + 'px';
Diana

Tabular report with variable-height 2nd line?

I have a simple tabular (Tablix) report. The last field is a message (varchar(1000)) which I would like to place by itself on a second line (while still preserving the tabular format), with variable height.
The problem is, when I add a second row to the detail region, I can add the message field, but it is limited to the size of the field just above it. I'm trying to allow that message field to take almost the entire width of the second detail line. Can
this be done?
Thanks.

If you add a row inside the Details group, then select all cells inside the details group that are on the new row, you should be able to merge cells by right-clicking and choosing merge cells.
You cannot merge cells across different scopes (row groups, column groups, etc) so be certain that you are not selecting cells that span different groups.
"You will find a fortune, though it will not be the one you seek." -
Blind Seer, O Brother Where Art Thou
Please Mark posts as answers or helpful so that others may find the fortune they seek.

Try to keep accordion panel open when selected

Hello,
Could someone help me find the code to "keep the selected panel open" instead of having them closed on each pages.
There is 2 spry collapsed panels. Within the first one there is 1 Spry Accordion with 5 panels which need to stay open when selected.
You will find the site here : www.otaa.fr (but you may use Safari)
Here the codes:
<Head>
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<style type="text/css">
</head>
<body>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">PROJETS</a></div>
          <div class="CollapsiblePanelContent">
                <td><div id="Accordion1" class="Accordion">
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Logements</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td height="21" align="left"><a href="html/Vignoles.html">Rue des Vignoles</a></td>
                      </tr>
                    </table>
            <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Maisons</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Serrieres.html">Maison Serrières</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Bureaux et Sièges Sociaux </a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Tchad.html">Ambassade du Tchad</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Aménagements Intérieurs</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Martin.html">Appartement Martin</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Equipements</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Aquatonic.html">Centre Aquatique</a></td>
                      </tr>
                    </table>
< /body>
<script type="text/javascript">
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
var accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel:(params.panel?params.panel:-1)});
          </script>
Thanks for you help.

Forget about the tutorial by David Powers. There is an easier way to achieve what you want.
If I understand right, you want the about panel to be open when on the about page and the homw panel when you are on the home page. Simply set the default panel for each page as follows
For the Home page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<script src="SpryAssets/SpryAccordion.js"></script>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Home</div>
    <div class="AccordionPanelContent"><a href="index.html">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">About</div>
    <div class="AccordionPanelContent"><a href="about.html">About Us</a></div>
</div>
</div>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 0});
</script>
</body>
</html>
and for the About page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<script src="SpryAssets/SpryAccordion.js"></script>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Home</div>
    <div class="AccordionPanelContent"><a href="index.html">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">About</div>
    <div class="AccordionPanelContent"><a href="about.html">About Us</a></div>
</div>
</div>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1});
</script>
</body>
</html>
Repeat this process for each of your pages.
Gramps

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

Accordion panels open when website launches

All my accordion panels appear open for a second before my page completely loads. I have tried to find fixes in the forum but the only one that I have found is to use SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1...I am already using this version and I am still having the issue. It appears to work fine with firefox but I have the issue in IE8. I am quit the novice with web design, any help anyone can give woyld be greatly appreciated.
Here in the link to my site http://www.fcps.edu/southcountyss/

There is a whole heap of stuff between rendering the markup for the accordion and creating an instance of the accordion.
To eliminate the pause between render and instance, move the accordion constructor to just below the table that holds the accordion as in
                
                Student Services (MS):
                703-446-1640<br />
                Student Services (MS):                703-446-1630<br />
                </p>
</div>
            </div>
          </div></td>
      </tr>
    </table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
Don't forget to remove the constructor from the bottom of the document.
Gramps

Pages comments panel open with every document

For whatever reason, Pages keeps opening up the comment panel on the left side of my Pages documents when I open them, even when there isn't a single comment added to the Pages document. I have to manually close the comment box and then save the file, for every file, to remedy the problem.
Any ideas?

Nope. I just opened a document from March 2012 to verify. It opens the document with comments panel open, but I never used the comments panel on the document.
I didn't start using comments until a couple weeks ago, which is when I started having this problem.
It does not, however, do so with every document. There seems to be a specific reason why some documents have this problem, and some do not. But I do not see the pattern.

How can I use the accordion panel widget with a footer?

Hi,
My question is may be not clear. So I'm gonna be more specific. I'm using a menu for my website with the accordion panel widget. The menu is working fine and when I'm opening it, it pushs the items below on the pages.
My problem is with the footer of the page. Because, when the items below the widgets are pushed, they go below the footer and the footer is not pushed.
Is there any way to pushe the footer when I use the accordion widget? I don t want to overlap it.

I assume this is what you want to achieve in the footer....
Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

Accordion Panel Opens, then Closes

First, here's the URL I'm working from...
http://www.jegs.com/test/randy/newlook/csIndex.html
Click on the Rebates button across the top. The default
panels are set to have all closed, but click on the first one. It
opens, then closes. The others work fine.
Any ideas?
Randy

The issue was with all browsers. Not sure what the problem
was, but the page has changed since this post. I've got it working
to what was requested of me.

Accordion Panels Open During Page Load

All my accordion panels appear open for a second before my page completely loads. http://home.comcast.net/~steven.kay/
I found this thread, but am still not clear on the solution given. http://forums.adobe.com/message/22365#22365
Thanks.

Never mind... I downloaded the new js file... (duh)

Having the info panel open with curves open

Hi,
Just switched from CS6 to PS CC. I usually set my white and black points using curves. Set the points then go to curves and adjust the points with the RGB channels. In PS CC, I cannot seem to have the curves and info panel open at the same time. Anyone know how to accomplish this?
Thank you,
Jim

Hi, c.pfaffenbichler, Here is a screenshot of the curves properties panel open. I would like to see the info panel open at the same time so I can drag the point on the curve to specific values of R,G and B. If I click on the info tab in this curves panel the info comes up but I do not see the curves properties anymore. I want to be able to see both open at the same time.
Thank you,
Jim

Panel collection with auto height for different screen resolution

Hi.
I created a page using panel collection by default height for 1024 * 768 screen resolution and works fine. When I change the screen resolution to 1152 * 864 then my page layout changes as I can see lot more space at bottom due to fixed height define for panel collection.
Here my question is how to make height as dynamic for panel collection which can changed based on screen resolution. Usually percentage for height attribute resolve the issue but JDev 11.1.1.4.0 doesn't support percentage its allows only pixel or em.
Please let me know to resolve this issue.
Thanks

If you want a table to occupy 80% of the height of the screen you should be able to do this with assigining % to the various panelStretch facets - like this:
    <af:form id="f1">
      <af:panelStretchLayout id="psl1" topHeight="10%" bottomHeight="10%">
        <f:facet name="bottom">
          <af:spacer width="10" height="1" id="s2"/>
        </f:facet>
        <f:facet name="center">
          <af:panelCollection id="pc1">
            <f:facet name="menus"/>
            <f:facet name="toolbar"/>
            <f:facet name="statusbar"/>
            <af:table var="row" rowBandingInterval="0" id="t1">
              <af:column sortable="false" headerText="col4" id="c1">
                <af:outputText value="#{row.col4}" id="ot1"/>
              </af:column>
              <af:column sortable="false" headerText="col5" id="c2">
                <af:outputText value="#{row.col5}" id="ot2"/>
              </af:column>
            </af:table>
          </af:panelCollection>
        </f:facet>
        <f:facet name="start"/>
        <f:facet name="end"/>
        <f:facet name="top">
          <af:spacer width="10" height="1" id="s1"/>
        </f:facet>
      </af:panelStretchLayout>
    </af:form>

TileList with variable height renderer example?

I am desperately searching for an example of how to implement
a TileList with a variable height renderer. Well I guess to be more
clear, I am sort of able to do this, but I have a renderer that
uses a VBox, then an mx:Image. My single column TileList will hold
a collection of images, that are all scaled to the same width. I
need the height of the renderer to be based on the scaled height of
the image.

Google "FlowBox".
Tracy

Keeping at Least One Accordion Panel Open with Variable Heights

Similar Messages

Maybe you are looking for