Accordian Panel content size

Hi,
I am using Accordian Panel in several pages. When I go to CSS styles paneland and change Accordion Panel content size/height to 600 for example, it changes all the Accordian panels throughout my site to 600.
Is there a simple way of changing each panel individually.Am I missing something very obvious. I am learning CSS but not quite there yet. Any help would be appreciated.
Michael

To start with, especially when you are a novice at CSS, do not alter the original Spry Style Sheets. You will thank me for this tip once you get into more complicated web sites.
To have variable panel heights use the following constructor
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>
If you want fixed heights per accordion then you have numerous options of which I will show one. Apply a unique ID to your accordion and style accordingly has follows.
<!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">
<style>
#Accordion600 .AccordionPanelContent {
    height: 600px;
</style>
</head>
<body>
<div id="Accordion600" 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("Accordion600");
</script>
</body>
</html>

Similar Messages

  • Spry Accordian panel content height for more than 1 accordian in site

    Hi,
    I have added a couple of accordians to my website on different pages.
    When I adjust the panel content height for 1 it automatically changes it for all of them on my site causing scroll bars to be visible - which I am trying to avoid.
    I'm new to Spry coding and am not sure what to change.
    Thank you for your help

    This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
    If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
    Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
    Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
    ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
    In the CSS stylesheet, do this:
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
        height: auto;
    #normalheight .AccordionPanelContent {
         height: 100px;
    #doubleheight .AccordionPanelContent {
         height: 200px;
    Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
    Beth

  • How to apply different styles to multiple spry accordian panels?

    Hi all,
    I have a website that I'm building that has multiple spry accordian features on it.
    I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
    I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
    When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
    I hope all this makes sence below is my source and CSS Code.
    I appriciate any help that can be given to help resolve this issue I am running in too.
    Source Code
    <div id="content">
    <p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
    <p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
    <p class="content_txt"> We have two packages available for our customers;</p>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
       <p>Text Goes Here</p>
        <div id="Accordion2" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
        <p>Text Goes Here</p>
        </div><!-- end #Accordion2 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion2 -->
        </div><!-- end #Accordion1 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion1 -->
    <div id="Accordion3" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
             <p>Text Goes Here</p>
          <div id="Accordion4" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
        <div class="AccordionPanelTab"></div>
        <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
        </div><!-- end #Accordion4 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion4 -->
        </div><!-- end #Accordion3 Content -->
      </div><!-- end #AccordionPanel -->
    </div><!-- end #Accordion3 -->
    </div><!-- end #content -->
    CSS
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* 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 black;
              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.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
              background-color: #CCCCCC;
              border-top: solid 1px black;
              border-bottom: solid 1px gray;
              margin: 0px;
              padding: 2px;
              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 {
              overflow: auto;
              margin: 0px;
              padding: 0px;
    /* 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;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg1.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/package_spry_tab_bg1_RO.png);}
    #Accordion2  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry1.png);}
    #Accordion2 .AccordionPanelTabHover,
    #Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/packages_spry1_ro.png);}
    #Accordion3  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg2.png);}
    #Accordion3 .AccordionPanelTabHover,
    #Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/package_spry_tab_bg2_RO.png);}
    #Accordion4  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry2.png);}
    #Accordion4 .AccordionPanelTabHover,
    #Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
    background:url(../images/packages_spry2_ro.png);}

    Okay guys,
    I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
    Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion1 Content -->
      </div><!-- end #Accordion1 .AccordionPanel -->
    </div><!-- end #Accordion1 -->
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion2 Content -->
      </div><!-- end #Accordion2 .AccordionPanel -->
    </div><!-- end #Accordion2 -->
    You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
    However if for some reason you want to put one accordion inside another like I did e.g.
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">
       <p>Content Goes Here </p>
    </div><!-- end #Accordion2 Content -->
      </div><!-- end #Accordion2 .AccordionPanel -->
    </div><!-- end #Accordion2 -->
    </div><!-- end #Accordion1 Content -->
      </div><!-- end #Accordion1 .AccordionPanel -->
    </div><!-- end #Accordion1 -->
    Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
    CSS
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg_RO.png);}
    #Accordion2  .AccordionPanelTab {
    height:44px;
    width:469px;
    background:url(../images/packages_spry.png);}
    #Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
    #Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
    height:44px;
    width:469px;
    background:url(../images/packages_spry_ro.png);}
    Normally when styling two seperate spry accordions you can just use the following code
    #Accordion1  .AccordionPanelTab {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg.png);}
    #Accordion1 .AccordionPanelTabHover,
    #Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
    height:75px;
    width:285px;
    background:url(../images/package_spry_tab_bg_RO.png);}
    The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
    Hope this helped anyone who was having the same issue I was.

  • Re: Spry Accordian Panels

    Hi.  I used Spry Accordian Panels in a new website I created using Dreamweaver CS6.  Most people can see and click the panel to open it and see the content in it.  However, I know someone that's blind that would like to use the site but is having a lot of trouble with it.  The panel tabs are not links so it doesn't tell him to click it.  I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped.  Any ideas?

    Hi.  I used Spry Accordian Panels in a new website I created using Dreamweaver CS6.  Most people can see and click the panel to open it and see the content in it.  However, I know someone that's blind that would like to use the site but is having a lot of trouble with it.  The panel tabs are not links so it doesn't tell him to click it.  I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped.  Any ideas?

  • Spry accordian panel not closing

    I have created a page using both the spry tabbed panels and
    accordian panels. The accordian panels are in the content sections
    of the tabbed ares. I want the accordian panels to be closed
    initially, and whenever you click on the tab of the panel it will
    open if it is closed, and close if it is open. I have modified the
    code (as described in the Adobe Resource section) at the bottom of
    the div. I got it to work on a simpler page (without the tabbed
    panels) but I can't get it to close when click on if open. It will
    close if another tab is clicked, but that isn't what I want. I'm
    thinking it has something to do with the fact that it is in the
    tabbed panels spry, or I am overlooking something. I am not very
    verse in javascript, so I can't troubleshoot it. Can someone look
    at the code and suggest a solution? The site is
    http://www.capitolphotointeractive.com/test

    Hi amilesslady,
    You'll need to replace the version of the SpryAccordion.js
    file on your site with a more recent one. You can get the the one
    from Spry 1.6.1 here:
    http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
    Or you can download the Dreamweaver 1.6.1 updater and use it
    to update the Spry related files in Dreamweaver and your sites.
    http://download.macromedia.com/pub/labs/spry/1/spry_p1-6-1_updater_022508.mxp
    --== Kin ==--.

  • Accordian panel widget dysfunctionality

    Before I added an accordian panel widget, I pulled the content area on my page down to enlarge it vertically and allow enough room for panels to close and expand. It works fine if you leave "can close all" and "close all initially" options unchecked, but I don't want that. They should all be closed initially, so the visitor to the site can decide which to open and view. Anyways, if these options are checked the widget will move all text and placed image objects that lie below it, up and down, along with the bottom-most panel as it is opened and closed. This is extremely annoying and dysfunctional and renders the widget pretty useless for what I would like to do. Obviously the (css?) code is jacked. I hope the coders can fix this because the accordian panels is one of the slickest widgets in the palette.

    I am getting an issue with the accordian as well. For me, my issue is that when I preview the page and I click on the accordians, everything underneath it sometimes moves and sometimes doesn't move and goes in front or behind the images. How does this stay consistant and always have the content that is underneath the accordian move? (look at the photo...I don't know if you can see it but the type and images is going over the dotted line and the dotted line is supposed to move when the accordian is open and closed).

  • Accordian Panels: want all CLOSED

    The Accordian panels I've installed are lower down in the page body, just high enough to begin to see without scrolling down.  Would like visitors to immediately see there's a list of topics - having the first panel open to start with, defeats that goal.
    Suggestions on how to have all accordian panels closed, initially?

    Thanks Ben, but aside from the fact I never use Design View in Dreamweaver (shudder), more to the point I am building this page in Drupal CMS and therefore (after testing the "base model" locally) am implementing and refining the code directly inside a page editor in my Drupal website.  Here's the precise code I've typed in for the 2nd Accordian panel:
    <code>
    <div class="AccordionPanel">
        <div class="AccordionPanelTabBG">
            <div class="AccordionPanelTab">MARKETING</div>
            </div>
            <div class="AccordionPanelContent">
            <br>
    Asgard Forge works with the Client to identify a clear consensus of what that company is and does, and shapes this into its Brand: a focused, concise, consistent Message about the Company.<br>
    <br/>
    <img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   WE'LL ASSIST IN REFINING YOUR GOALS</span><br>
    You may already know this cold – and then again it may help you sharpen your company focus;<br/>
    <img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   IDENTIFY COMPANY STRENGTHS & ASSETS</span><br/>
    <img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   DEFINE THE COMPANY PERSONALITY</span><br/>
    <img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   BUILD YOUR ONLINE BRAND</span>
    <br>
    Just because your company isn’t Nike or Apple, doesn’t mean you can’t take full advantage of having a brand that’s <strong>quickly recognized</strong> and <strong>enduringly remembered</strong>.
    <br/><br/>
    </div>
    </div>
    </code>
    Again, for quick reference:http://www.asgardforge.com/web-design/web-design-company/new-client
    As you can see, I've placed only two BR tags at the end of content in order to leave abit of padding there manually - and note the syntax.  When the page is viewed and you look at the page source, you see my 2 tags PLUS the 6 differently-syntaxed </br/> tags.
    If however you know for certain it's not someting SPRY does in constructing Accordian panels (I'm sorry but I don't yet know what your use or affiliation with SPRY is), then I would have to conclude it's something that Drupal does.  Your confirmation on this point would be appreciated.
    NOTE: As you can see in the above example, I've wrapped the AccordianPanelTab container inside another in order to maintain the Tab background all the way across while the + / - image to the left changes with toggle clicks.  That's the only place I've diverged from the standard Accordian structure, and here's the CSS for that container:
    .AccordionPanelTabBG {
        background-image:url(SpryAssets/bg-accordian-panel.gif); background-repeat:repeat-x; background-position:top;
        line-height:27px;
        border-left:1px solid #ccc; border-right:1px solid #ccc;
        margin: 0px;

  • Open Accordian Panel via anchor tag

    I have about 20 accordian panels stuffed with content. Is it
    possibe for a user to click a link on the same page and be carried
    to the specific panel? -- having it open would be a bonus.
    thanks for your time

    I had a similar question. I'm trying to use named anchors on
    one page in a site to to open specific panels on a different page,
    but I'm not having much success. Depending on where I place the
    anchor tags, I can get ALL of the panels with anchor tags to open
    when the link is clicked. However, I can't seem to make a single
    link open a single panel. My javascript skills are minimal -- I can
    edit from examples, but I don't have the knowledge to write code
    from scratch. Any help or advice is most appreciated.

  • Problems editing accordian panels

    Hi,
    Have an issue where InContext editing was capable last month of editing a page with Spry accordian panels, but recently weno longer can edit the panels.
    The subject page is
    http://www.peradance.com/Atlanta-Dance-Classes-Calendar.html
    which is a dance class calendar.
    Each class is defined as a repeating region consisting of a title and a description, both within a Spry accordian panel which when click expands the accordian detail window to show the description.
    I set this up for the client weeks ago and to my surprise it worked OK with InContext editing. However, now we find it is difficult to edit the text in the title windows -- perhaps some recent update to InContext editing has broken this ability.
    We can add or duplicate a repeating region to add a new class, but when we try to click inside the Title box for that class we can't seem to insert a cursor anymore to change the text -- InContext editing now seems confused and wants to expand/contract the description panel, rather than let us insert a cursor to edit the title.  We can insert the cursor in the description and edit it OK.
    This fails using Windows Firefox, IE8 and IE7 so trying another browser doesn't help.
    I tried to talk the client into a simpler calendar without the Spry expanding accordian (just have the class title and description always exposed) but he would rather abandon Adobe's software than give up that functionality. What he really wanted rather than the accordian was for the class description to appear in a popup window when the cursor hovers any title, but I discovered there is no way to use Spry tips or any javascript popup in a way that the client can edit with InContext editing. I was surprised to find the Accordian panel did work fine. Why it has now stopped working is a mystery.
    The code for a day on the calendar looks like this:
    <div class="day">
    <p class="title">Monday</p>
      <div id="Accordion2" class="Accordion" tabindex="0" ice:repeatinggroup="*">
          <div class="AccordionPanel AccordionPanelOpen" ice:repeating="true">
            <div class="AccordionPanelTab" ice:editable="*">
                <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">7:00 PM BELLY DANCE BASICS &amp; FITNESS</span></span></p>
            </div>
             <div style="height: auto; display: block;" class="AccordionPanelContent" ice:editable="*">
             Learn the fundamentals of the art of belly dance from multi award winning instructor Aziza Nawal. In this class, you will learn the basics of middle eastern dance, improve your tecniques, all while you get a nice workout and toning your body
             </div>
          </div>
      <div class="AccordionPanel AccordionPanelClosed" ice:repeating="true">
        <div class="AccordionPanelTab" ice:editable="*">
            <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">8:00 PM  FOCUS on CLOSE EMBRACE TANGO</span></span></p>
         </div>
         <div style="height: 0px; display: none;" class="AccordionPanelContent" ice:editable="*">
      In our Monday classes, we focus on concepts dealing with the technique of close embrace tango while always keeping a sharp focus on musicality and navigation. The moves that we teach in this class will be simple, musical and elegant. We will focus on different tango orchestras as well as  vals and milonga and give you specific tools and moves to interpret these in an interesting and satisfying way. We will try to always spend time focusing on the followers role in the dance.</div>
       </div>
    </div>
    </div><!-- end day -->

    The Accordion keyboard navigation feature (the ability to change the open panel using the keyboard keys )  is preventing InContext Editing to properly edit the contents of the editable region.
    You can disable to keyboard navigation feature of an Accordion by setting it to false in the constructor:
        var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:false});
    Note: to disable keyboard navigation when the page is loaded inside InContext Editing use:
    var useKeyboard = typeof(top.ice) == "undefined";
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:useKeyboard });
    This will make the editable regions editable only in Internet Explorer.
    There's a CSS rule used by the Accordion  widget to disable text selection on the panel titles in Firefox and Safari:search .AccordionPanelTab in the SpryAccordion.css file and remove:
        -moz-user-select: none;
        -khtml-user-select: none;
    See the InContext Editing known issues and limitations, the Editing section, from Adobe Labs InContext Editing page.
    Regards,
    Dan Popa

  • Maximum Content Size

    Dear all
    what is maximum of content size allowed in the request and is there any way to increase th size of the request content size.
    because iam doing one application which allows users to enter unlimited size of charecters,if the enter very large number of characters than the value not inserted in the database. please suggest me.
    thanks in advance

    There is no limitation, but according to your problem description, I think you actually mean the size of the query string. In case of GET you're dependent on the webbrowser and the appserver used. Usually this limit vary between 256 and 2048 characters. In case of POST this is less or more unlimited (although some servers will complain when you exceed 2GB~4GB).
    So your problem is probably more that you used GET to submit a form. Don't do that, better use POST for this.

  • Tabbed Panel content overflow problem

    Hi everyone,
    I'm a newbie to this, but have successfully used a few Spry
    elements and am loving them.
    My problem right now is that I'm trying to get a tabbed panel
    to work where the panel contents have different amounts of text. It
    works great in IE6 and looks fantastic, but in IE7 and Firefox 2
    the content is visible although it overflows beneath the styled
    content area.
    You can see it here:
    http://www.pranayogacollege.com/yoga-workshops.php
    I imagine it's a simple thing that I've overlooked, but I'd
    be very appreciative if someone could point me in the right
    direction.
    Thanks in advance,
    Jade

    "spiderjade" <[email protected]> wrote in
    message
    news:eqt5mt$d32$[email protected]..
    > You can see it here:
    >
    http://www.pranayogacollege.com/yoga-workshops.php
    >
    > I imagine it's a simple thing that I've overlooked, but
    I'd be very
    > appreciative if someone could point me in the right
    direction.
    .TabbedPanelsContent {
    padding: 4px;
    /*ADD NEW*/
    height: 276px;
    overflow: auto;
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"

  • Need help with horizontal accordian panels

    Hi,
    I'm wondering how I would re-create a horizontal accordian panel set, such as the one used in this website link, "http://www.thecapriapts.com/".
    When I insert a "spry accordian" panel set, the panels are stacked on top of each other. I guess you would consider that a "vertical" accordian. Is it possible to manipulate the CSS to have it display horizontally, like the link I attached? Or.. is this a common javascript that I sould look into?
    As always, thanks for your help out there...
    Chris

    With spry, there are two different kinds you can use: horizontal and vertical. What you're looking at in that site is horizontal. Usually, it appears as rectangles placed next to each other with the spry flying out below. In DW, you can go to your CSS rules for your spry menu and change the width and height of your boxes in your spry, depending upon which rule you have selected. Play around with that and see if you can just manipulate the horizontal accordian spry to where the rectangles end up being tall and thin. This will make it difficult, however, to get the text on its side like you see in that site. I'm not sure how you would go about doing that. But I would suggest trying to play around with the values in your CSS styles panel on the right (this is me looking at CS5 mind you. I'm not sure what you're running.)
    Either way, for times sake and also readability, might I respectfully suggest playing around with other sprys to see if any look more aesthetically pleasing for your site? It would also make it a lot simpler to tweak to your liking.

  • Panel contents overlap when using borderSkin style and layout=absolute

    This problem has been reported on several occasions
    (http://bugs.adobe.com/jira/browse/SDK-14806)
    and there are several articles that talk about this:
    http://dougmccune.com/blog/2008/01/17/followup-about-flex-panel-bug/
    http://dougmccune.com/blog/2008/01/12/calling-********-on-a-resolved-flex-bug/
    I´m not an expert but think I found a fix/workaround for this.
    frameworks\projects\framework\src\mx\containers\Panel.as
    Must to be changed in the viewMetrics() method.
    Line:
    973- if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) 974- {
    Replace by:
    if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) || (getQualifiedClassName(border) != "mx.skins.halo::PanelSkin") || (getStyle("borderStyle") != "default") ) {

    Hi Andres,<br /><br />I haven't tried to verify your fix, but would you be willing to fill out a contributor agreement and submit an official patch?<br /><br />Matt<br /><br /><br />On 4/25/08 12:34 PM, "Andres Serral" <[email protected]> wrote:<br /><br />A new discussion was started by Andres Serral in<br /><br />Developers --<br />  Panel contents overlap when using borderSkin style and layout=absolute<br /><br />This problem has been reported on several occasions<br />(http://bugs.adobe.com/jira/browse/SDK-14806)<br />and there are several articles that talk about this:<br />http://dougmccune.com/blog/2008/01/17/followup-about-flex-panel-bug/<br />http://dougmccune.com/blog/2008/01/12/calling-********-on-a-resolved-flex-bug/<br /><br />I´m not an expert but think I found a fix/workaround for this.<br /><br />frameworks\projects\framework\src\mx\containers\Panel.as<br />Must to be changed in the viewMetrics() method.<br /><br />Line:<br />973- if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) 974- {<br /><br />Replace by:<br />        if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) || (getQualifiedClassName(border) != "mx.skins.halo::PanelSkin") || (getStyle("borderStyle") != "default") ) {<br /><br />________________________________<br />View/reply at Panel contents overlap when using borderSkin style and layout=absolute <a href=http://www.adobeforums.com/webx?13@@.59b51731><a href=http://www.adobeforums.com/webx?13@@.59b51731><br />Replies by email are OK.<br />Use the unsubscribe <a href=http://www.adobeforums.com/webx?280@@.59b51731!folder=.3c060fa3><a href=http://www.adobeforums.com/webx?280@@.59b51731!folder=.3c060fa3>  form to cancel your email subscription.

  • Add rules under menu text in accordian panel?

    Hi,
    The client requested rules under the text, to go the entire width of the accordian panel. I can't figure out how to do this.
    For example, I need to add a dividing rule probably in a lighter tan/gold color the entire width of the accordian panel, between HOME and HOW IT WORKS:

    Select one submenu entry (in the top left of the Muse window "menu item" has to be indicated.
    Set "stroke" to "0". Then click onto the orange word "stroke". Here you can adjust all edges separately.

  • Spry tabed panel content group(yes I am a beginner)

    Hi,
    I created a tabed panel on a page. I can't change it's
    position on the page. No problems with anything
    elese,text,images,etc. Please help
    Thanks
    DW

    This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
    If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
    Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
    Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
    ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
    In the CSS stylesheet, do this:
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
        height: auto;
    #normalheight .AccordionPanelContent {
         height: 100px;
    #doubleheight .AccordionPanelContent {
         height: 200px;
    Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
    Beth

Maybe you are looking for

  • PI is not able to pick the file from the FTP folder

    This is the FILE TO IDOC scenario. We have configured the file adapter. But its not able to pick the file from the specified directory. We have tried changing the transfer mode from Binary to Txt & also we have tried to put advance selection for sour

  • Acrobat 9 Pro Extended and Adobe 3D Reviewer

    Good day, I just try to download the trial of Acrobat 9 Extended and try to use the new Adobe 3d Reviewer on this computer but after I try 4 time I still never get any success. On another computer he installation process went all ok without problem,

  • Problem in Using an URL in Exit Plug (NW 2004s SP12)

    Hi, I have a Webdynpro application to specify the terms and conditions for the users when they login to the portal for the first time. Upon Accepting the terms by the user, i used to loggoff the user and will redirect to the portal logon page again t

  • How do I sync outlook mail on my pc, iphone and ipad?

    I am trying to find out how to sync my outlook email on my iPad, iPhone and PC that operates with windows xp.  I would like to be able to read an email on one of the devices and then delete it and have it also be deleted on the other two devices.

  • What Is Edge Animate and What Can I Create with It? | Learn Edge Animate | Adobe TV

    Welcome to Edge Animate, a new motion graphics tool for the web. In this video you'll learn what you can do with Edge Animate, see some sample projects, and get a good idea of the potential fun you can have with this application. http://adobe.ly/SG2G