Scrolling within Accordion panel

Hi, I have an Accordion panel with a lot of text within one of the panels. The panel is pinned and the text flows below the browser baseline when opened on smaller screen sizes. Would be great to have a mini scroll bar included as an option in future to get around this problem. Thanks!

Hi kundalani,
If you are using Spry.Utils.updateContent() to load the
contents of the panel, you can pass in a callback that sets the
height of the AccordionPanelContent to "auto" after the new content
has loaded:
function LoadContent(ele, url)
ele = Spry.$(ele);
Spry.Utils.updateContent(ele, url, function() {
ele.style.height = "auto"; });
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag1.html'); return false;">Frag 1</a> |
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag2.html'); return false;">Frag
2</a></p>
<p> </p>
<div id="example1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 1
</div>
<div id="e1p1" class="AccordionPanelContent">
<p>Panel 1</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 2
</div>
<div id="e1p2" class="AccordionPanelContent">
<p>Panel 2</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 3
</div>
<div id="e1p3" class="AccordionPanelContent">
<p>Panel 3</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 4
</div>
<div id="e1p4" class="AccordionPanelContent">
<p>Panel 4</p>
</div>
</div>
</div>
<script type="text/javascript">
var example1 = new Spry.Widget.Accordion("example1", {
useFixedPanelHeights: false });
</script>
--== Kin ==--

Similar Messages

  • Accordion - Ajax within accordion panel resize issue

    Hi,
    I'm in a little bit of a fix.
    I have an accordion whose panels have ajax enabled regions
    within them.
    The ajax enabled regions have search forms which give a
    search result within the same page (which is basically within the
    panel as well) once a button is clicked.
    My issue is that once I click search, my result set increases
    the size of the page causing the accodion panel to enable a scroll
    bar. Is there some way in which I can have spry resize the panel
    instead of it enabling a scroll bar?
    If I open and close the tab ofcourse, the region is resized
    to cater to the search results as well with no scroll bar.
    Incase this is not possible, is there a way to reopen the
    selected panel on a page refresh event as all the tabs are closed
    when a refresh occurs.
    Thanks!
    When the accordion opens up, it shows

    Hi kundalani,
    If you are using Spry.Utils.updateContent() to load the
    contents of the panel, you can pass in a callback that sets the
    height of the AccordionPanelContent to "auto" after the new content
    has loaded:
    function LoadContent(ele, url)
    ele = Spry.$(ele);
    Spry.Utils.updateContent(ele, url, function() {
    ele.style.height = "auto"; });
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag1.html'); return false;">Frag 1</a> |
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag2.html'); return false;">Frag
    2</a></p>
    <p> </p>
    <div id="example1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1
    </div>
    <div id="e1p1" class="AccordionPanelContent">
    <p>Panel 1</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2
    </div>
    <div id="e1p2" class="AccordionPanelContent">
    <p>Panel 2</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3
    </div>
    <div id="e1p3" class="AccordionPanelContent">
    <p>Panel 3</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4
    </div>
    <div id="e1p4" class="AccordionPanelContent">
    <p>Panel 4</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var example1 = new Spry.Widget.Accordion("example1", {
    useFixedPanelHeights: false });
    </script>
    --== Kin ==--

  • Slideshow Image Order of Go AND Problem with Sizing an Accordion Panel

    SLIDESHOW Is there a way to set the start, middle, and end in a slideshow? I have tried arranging the position of the triggers (nothing happened); and moving the targets in the layers panel (again, nothing happened). I would like the slideshow to begin and end with specific slides.
    ACCORDION PANEL Will not allow me to size it smaller than 962 pixels. The content area of the accordion panel is filled with one slide show per panel or tab, and I've checked all of the elements within the slideshow to make sure nothing exceeds 960 pixels. Nothing I can find exceeds 960 pixels, but when I remove all the elements from the content area, BOOM, I can make the panel any width I want.

    Slide show sorting:
    No, Mylenium, you are definitly wrong, You can choose any image order you want within slideshows:
    1. Make thumbnail temporarily visible and drag the thumnail to the position you want.
    or
    2. Identify the slides in layers panel and drag their panel entries to the position you want.
    Accordion panel:
    You can choose whatever size you want – even with a slideshow within:
    You have to make sure, that all element of the slideshow (caption, prev, next, counter) fit within the accordion panel. And – since the single accordeon panels don’t allow individual sizes – you have to make sure, that the content of every(!) accordeon panel does not exceed the size you want.

  • How do I collapse all the accordion panels

    The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
    I have looked at the  Accordion.closePanel() , but that throws an error
    http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
    here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
    see the code below. Any help would be greatly appreciated. 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>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="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
    <div class="AccordionPanelContent">
    <img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="3" />
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
    <div class="AccordionPanelContent2">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"Accordion"});
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"AccordionPanel"});
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
    //-->
    </script>
    </body>
    </html>
    css
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
    width: 174px;
    overflow: hidden;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    .AccordionPanelTab {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_blue.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTop {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_top.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelBot {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_bot.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    margin: 0px;
    .AccordionPanelContent2 {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: auto;
    margin: 0px;
    height: 200px;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
    background-color: #EEEEEE;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    color: #555555;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
    background-color: #3399FF;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #33CCFF;

    Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
    Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
    Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
             Accordion1.closePanel();
    The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
    I hope this helps.

  • Accordion Panel problem in IE

    Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
    that contains the Spry Accordion. I have tried EVERYTHING, and
    although it works perfectly in Firefox, the panels open slightly as
    soon as you mouse over or open any of them. I have tried editing
    everything I can think of in the code, the CSS and even editing in
    doc type in the panel page.... but it still does it....just
    slightly. Also...I can only use fixed height... becuase if I use
    the auto-height... it slides up sluggishly, but ONLY if there is a
    LOT of content. I am pulling my hair out.
    I figured the only people who can help me at this point have
    to live in Romania.... if any are watching this post... please
    help!!!
    Thanks guys, and gals.

    Here is the CSS for that area: I tried setting margins in
    every state just as an experiment? Maybe I need to use the
    !important comment?
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    /* This is the selector for the main Accordion container. For
    our default style,
    * we draw borders on the left, right, and bottom. The top
    border of the Accordion
    * will be rendered by the first AccordionPanelTab which
    never moves.
    * If you want to constrain the width of the Accordion
    widget, set a width on
    * the Accordion container. By default, our accordion expands
    horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector
    is not necessary
    * to make the widget function. You can use any class name
    you want to style the
    * Accordion container.
    .Accordion {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px gray;
    overflow: hidden;
    /* This is the selector for the AccordionPanel container
    which houses the
    * panel tab and a panel content area. It doesn't render
    visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this
    selector is not necessary
    * to make the widget function. You can use any class name
    you want to style an
    * accordion panel container.
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the AccordionPanelTab. This
    container houses
    * the title for the panel. This is also the container that
    the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this
    selector is not necessary
    * to make the widget function. You can use any class name
    you want to style an
    * accordion panel tab container.
    .AccordionPanelTab {
    background-color: #DFDEB0;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-weight: bold;
    /* This is the selector for a Panel's Content area. It's
    important to note that
    * you should never put any padding on the panel's content
    area if you plan to
    * use the Accordions panel animations. Placing a non-zero
    padding on the content
    * area can cause the accordion to abruptly grow in height
    while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on
    the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in
    this selector is not necessary
    * to make the widget function. You can use any class name
    you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 150px;
    /* This is an example of how to change the appearance of the
    panel tab that is
    * currently open. The class "AccordionPanelOpen" is
    programatically added and removed
    * from panels as the user clicks on the tabs within the
    Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
    background-color: #EEEEEE;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* This is an example of how to change the appearance of the
    panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover"
    is programatically added
    * and removed from panel tab containers as the mouse enters
    and exits the tab container.
    .AccordionPanelTabHover {
    background-color: #DFDEB0;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelOpen .AccordionPanelTabHover {
    background-color: #DFDEB0;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* This is an example of how to change the appearance of all
    the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is
    programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
    background-color: #DFDEB0;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* This is an example of how to change the appearance of the
    panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #EEEEEE;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;

  • Adding dynamic content to accordion panels

    Hello,
    and thank you in advance for any help.
    I need to make a new web page for my girlfriend. She's a
    photographer which means she needs to update her page pretty often.
    The usual small systems however were way too complicated for her.
    After seeing Spry, I decided to use it, along with Relay
    which gives an easy option for updating content. So here's my plan:
    - I install Relay so she has sort of a back-end to update her
    pictures.
    - I have a php script which reads out the directories and
    makes an xml file to use with spry.
    However I find it very difficult to understand how I should
    use this xml file. Additionally, she wants to have the accordion
    panels, so I have to put the code (probably the same code with only
    a different xml filename for each directory) into every panel.
    Could anybody help me with that? Please note that I haven't
    started anything yet and am right now trying stuff locally.
    Thank you again.
    Mete

    Hello again,
    I'll try to describe the case once again, this time more
    clearly:
    - I will install Relay onmy server to enable uploading
    pictures. Relay stores the upload pictures in different directories
    which are created by the user and the path to each directory is
    known.
    - A PHP-Script reads out the content of these directories
    (names, paths etc) and gives a list as an XML-File.
    What I want to do is:
    Make an HTML-Page and use Spry Accordion Panels in it.
    Let's say I have 5 panels. Each panel (in itself) shall use
    the XML-file (one file per directory) to display the pictures. The
    styling will be made by using the CSS.
    My problem is:
    I just can not figure out how to use the regions etc in Spry.
    I have to admit that so easy it is to use, it 's also pretty
    difficult to understand the logic behind it for non-skilled users
    (especially for those who do not have Dreamweaver etc). I can't
    find the answers to my questions like: Why do the datasets get the
    prefix "dsXXXX"?
    I only want to read the XML-File and display these pictures
    in an Accordion Panel without floating, which means it has to
    scroll left and right.
    I hope this makes it easier to understand :)
    Thank you once again!
    Mete

  • Accordion Panel

    I currently have 5 different category names in my Accordion
    Panel, each with a varying number of items within those categories.
    Is there a way of making a particular category panel stay open,
    depending on the particular link item that has been clicked. For
    example, if I click on "pendants" in the "Jewellery" category
    panel, can I make the "Jewellery" category panel appear "opened"
    when directed to the "pendants" page?
    Thank you,
    Caryl

    i will join in on that question and add a question of my own
    to the Accordion Panel..
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1305849&enterthread=y

  • Scrolling semi-transparent panels

    I have a parent panel that paints a custom background. Within that panel, I embed another panel held by a JScrollPane. My intent is to have the custom background show through on the panel that is being scrolled.
    To accomplish this, I set both the scrollpane and the viewport to non-opaque and then I set the panel held by the scrollpane to non-opaque as well.
    When I run the program everything works fine and the panel can be scrolled and displayes the background image just as I want it.
    Next, I want to set the panel in the scrollpane to be semi-transparent. I set the panel to opaque and give it a semi-transparent background color(ie alpha value or .5). This gives me a see-through effect and when I run the program it initially looks good. However, when I scroll the panel, the refresh is not handled correctly. The problem appears to be that the paint method of the parent panel is not being called.
    I think the scrollbar code incorrectly assumes that since the embedded panel is defined as opaque that the parent panels do not need to be painted. However, this assumption is only valid if the background color of the embedded panel has an alpha value of 1.0
    Does anyone have a workaround for scrolling semi-transparent panels?

    On second thought, that's going to cause a stack overflow. You are going to need a flag to not call it. Something like so:public void paint(Graphics g) {
        if (someflag) {
            someflag=false;
            bgPanel.paint(bgPanel.getGraphics());
            someflag=true;
        // do my painting stuff ... super.paint(g); ???
    }Just a thought, I haven't tested it.

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

  • Spry Accordion panels and Google search

    Hello! I have about 30 pages with at least 15 spry accordion
    panels on each. I've just implemented a local customized google
    search and it looks like Google is able to pull pretty accurate
    search on both the panels and panels content.
    Once presented with the search results, can a user get to an
    OPEN accordion panel, that relates to his search? I hope I've
    explained it clearly, THanks!

    highedwebby wrote:
    > Hello! I have about 30 pages with at least 15 spry
    accordion panels on each.
    > I've just implemented a local customized google search
    and it looks like Google
    > is able to pull pretty accurate search on both the
    panels and panels content.
    Yes, this happens because all of the content is on the page.
    > Once presented with the search results, can a user get
    to an OPEN accordion
    > panel, that relates to his search? I hope I've explained
    it clearly, THanks!
    I've seen some scripts that highlight Google search terms, so
    I suppose that getting the search terms on the destination page is
    possible, but making that leap to the proper panel to open may be a
    little more difficult.
    First you have to figure out which panel the words are
    in,then you have to figure out what if the user is searching for
    three terms and each of those terms is in a different panel, or if
    only one term, and that term is in multiple panels? How would you
    expect that work out?
    You can highlight the words using code such as that discussed
    on this page:
    http://www.kryogenix.org/code/browser/searchhi/
    I'd guess that someone could reverse that code that finds the
    text and then take that find and then walk up the DOM tree to see
    if you are within an accordion panel and then show that panel as
    the default panel on the page.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • 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

  • Spry accordion panel not lining up with top of viewport in FF3.5

    I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights  - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
    In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
    I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
    **UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
    Please feel free to check out the code here:
    http://www.pjamedia.com/?page=modeladvice
    Any help would be very much appreciated.
    Thanks, Paul A

    so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
    <script type="text/javascript">
    function goToAnchor() {
    location.href = "#unilist";
    </script>
    paste this script in <head> tag.
    <a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                      <div id="Accordion1" class="Accordion">
                        <div class="AccordionPanel">
                          <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                          <div class="AccordionPanelContent">content</div></div>
      <div class="AccordionPanel">
                          <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                          <div class="AccordionPanelContent">content</div></div>
    </div>

  • MyFaces Accordion Panel issue

    I have implemented a Accordion Panel as given in example under Sandboxes under MyFaces. The problem faced by me is that i am trying to put 2 text boxes within <t:paneltab> under accordion panel tag. The 2 text boxes are appearing horizontally next to each other . I want them to appear vertically one below another...I have tried using <tr><td> but it does not work....please help me out

    Well, I went into my site and discovered I "worked around" that issue. So, I don't feel like messing with the accordion panel as it has 8 seperate panels and it took me a very long time to redo (alot of typing) it. If I messed it up or crashed.... I would not be a happy camper. Anyhow thanks for the response. If I create a new one I will check it out.
    Thanks,
    Ed

  • Close all accordion panels

    Hi,
    By default when I use spray accordion the first panel is
    always open. Is it possible to have all Accordion panels closed?
    thank you

    this does not work in FireFox for mac. it starts with all
    panels closed for sure, BUT when you open one, it opens but (1) not
    all the way showing all of the panels content and (2) nor does it
    give you a scroll bar to see all of the content and (3) if you open
    a panel it pushed lower panels down so low you cannot see them any
    longer.
    in Safari it opens the panel and 'sometimes' just elongates
    your page so no scroll bar needed, but all the content is there IF
    you designed a page that can grow. but sometimes it does not grow
    and exhibits same above behavior.
    so, not so sure this is a solid cross browser method to
    achieve.

  • Accordion Panel Widget - open and close speed.

    Hello,
    Is there any way to change the speed that an Accordion Panel Widget opens and closes?
    I would like it to be slower than it is now.
    For my project it would be more relaxed and graceful.
    Thanks,
    Chris.

    HI Chris
    With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
    Thanks,
    Sanjit

Maybe you are looking for

  • Solution WebLogic 6.0 on Linux RedHat 7.1

    Here's the link that helped me solve my installation problems. http://newsgroups.bea.com/cgi-bin/dnewsweb?cmd=article&group=weblogic.support.install&item=7267&utag= Thanks Dude!!!

  • Using IOS 5, but no camera from lock-screen or Week view in Calendar, as promised. What can I do?

    Using IOS 5, but no camera from lock-screen or Week view in Calendar, as promised. What can I do?

  • RE: No data being extacted from R3 to BW

    Hi Gurus, Problem:   When data is extracted from R3 to BW. In the Monitor, I see that no records have been extracted and this is the error I see in details: (Yellow) Overall status :Missing Messages or Warnings. (Green) Requests(Messages): Everything

  • FAGL_FC_VAL and GLT0

    Hi, The only way to use new valuation program(fagl_fc_val) is to activate new general ledger property and use faglflext table, am I right? In an upgrade project, they decided to not to activate faglflext table and new g/l property and they decided to

  • Best practise for SAP users who leave the company

    Hi Could anyone reccommend a best practise document or give advice on how to deal with SAP user ID's when employee's/contractors/consultants leave? I am the basis admin just starting an SAP implementation and we have no dedicated authorisation team a