Question of the accordion Spry tabs

Similar Questions

• A question on the accordion in Muse on the positioning

  A question on the accordion in Muse - for example, I put an accordion, a web page with an anchor position and use a menu button to point to the location. However, when I resize the browser, as it is closer to that before, the accordion actually moves to the left side when I use the menu button to go to the accordion. I don't want that, in fact, I would like to the accordion keeps a certain distance from the left of the edge of the browser, instead of from the right. Could you please help?

  Maybe, I'm not decsribAn example is on the Site of the day: http://corlessmason.com/#portfolio , when I resize the closest browser, the photo panel maintains its position and it is only be trimmed rather than be pushed to the left - which is pretty much I would achieve.

  Thank you.

  in fact, I found the solution:

  The Vertical shift muse Web site

  It works perfectly now!

• Question of the accordion, widget...

  I use Muse 2014.0.0.328, CL 784653 and when I try to change the content in the tabs of the accordion, I can't because the accordion just opens and closes when I click on a tab and I can't go to the content of the tab. (see below)

  

  He seems to have "Can close all" checked. unchecked and he stopped.

• Questions about the accordion component

  I have a few questions about the use of the accordion component:
  
  1. when my accordion is created it shows the first container child, this child is created at this time and if you go to another child it is also created (but only until it is first accesed). The thing in the first child, I need to access the properties and components located in other children, so it marks an exception to NULL, because I am trying to access the properties or the components that have not yet been created, but I really need to access and transmit values to other children containers at the moment (without their first navigation) , then it is possible to create all the children while creating the accordion although I would'nt need to navigate through its children to create them?
  
  2. is it possible to disable the functions of click of an accordion, so the only way to change bewteen her children is programmatically? I mean, you can click the buttons on the accordion to navigate through his children, but you can also do this programmatically by using the selectedIndex property, so I'll try to disable accordion buttons so the only way to navigate is programmatically.
  
  All the ideas of these two questions?
  

  You can use creationPolicy = "all" on the accordion and it will create all children, not only the first condition. The downside of this is that your application will have a little more time to start. Consider this:

  Child 2:
  

  If you try to set child2.input = 'something', a better solution would be to use data binding:

  Child 2:
  [Bindable] public var inputValue:String;
  

  Now you can do: child2.inputValue = 'something '; If the user interface of child2 have not been created, the inputValue parameter has without adverse consequences; as soon as the 2 child controls are created, data binding will assign the value. If child 2 has already been created, the data binding will also affect the value.

  You can disable the click event to the accordion by intercept and stop its spread, but you must do this in ActionScript, you can't do this in MXML.

  myAccordion.addEventListener ('change', accHandler, true); true means to use the capture phase

  private void accHandler (event:flash.events.Event): void
  {
  If (event.target is mx.containers.accordionClasses.AccordionHeader) {}
  Event.stopImmediatePropagation;
  }
  }

  The idea is that intercept you the click event, as it moves down through the components (capture phase). If the target of the event is an AccordionHeader, prevent you the event to go further - it is to reach the AccordionHeader itself.

  You can put this handler on accordion or its parent up to the Application.

• tab panel accordion Spry, link to a page of diferent

  Hello

  I have sort of a section of my site catalog of a few pages, one for each category in my catalog (tables, chairs, lighting, etc.).

  Each of these pages has a spry accordion, which looks the same on all pages.

  When I click on the tab of the Panel accordion, accordion (for this category) Panel content arises, which is very good.

  But when I click on the Accordion Panel tab, I would, first of all for this page is displayed, then for the accordion panel content appears.

  This is what happens:

  I am on the page TABLES. When I click on the Panel accordion tab "CHAIRS" the Panel content Accordion with the different types of Chairs opens / shows, but I'm still on the TABLES page.

  I would like this brings me to the page of CHAIRS without having to choose one of the sections content panel.

  I can't be able to do it with a simple link.

  What should I do?

  Thank you.

  It seems that you have to attach an event onclick (see below)

  At the point where your code probably looks something like:

  Chairs

  You must encapsulate the AccordionPanelTab

  in an anchor as tag below:

  Chairs

• Error while having an accordion inside tabs

  Hello

  I use a menu of tabs. In one of the tabs, there's an accordion. When I go through the accordion, he used to "update" the height of the tab.

  I think I should "Refresh" tab just after an action has been filed in the accordion.

  Could someone help me solve this problem please.

  Thanks in advance

  < class li 'menuTab' = >

  < div class = "menuTab" >

  < a href = "#tabs - 1" >

  ...

  ///

  < div id = '4 legs' >

  < div id = "Accordion1" >

  ...

  < / div >

  < / div >

  < script type = "text/javascript" >

  {$(function()}

  . Tabs() $(«#Tabs1»);

  });

  {$(function()}

  . $(«#Accordion1») accordion();

  });

  < /script >

  Sorry, should have said that it is better to make an instance of the accordion before tabs as in

  {$(function()}

  $(«#Accordion1») .accordion ({heightStyle: "content"});

  . Tabs() $(«#Tabs1»);

  });

• The accordion control

  Hello
  
  I have a few questions on the accordion control. First of all at the moment, I have control of the Accordion with 2 heads. For the moment to open one of the headers of the accordion, you click this header and to close it, you click on the header of another. I want to be able to do is to click on the header which is open and be able to close this header and the other accordion header. Is this possible?
  
  Secondly, is it possible for the headers of the accordion of the skin? Or include images in the header?
  
  Thank you
  Katy

  That's what you want, but you may need to find a way to disable the default behavior.

• DW tutorial Question (accordion, Spry Widget) beginner... :-(

  Hi, I have just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html), but have a problem with my Spry Accordion Widget, when I saw the my footer site moves when I select a different panels in the widget, I read back and checked code/css but I still can't extra outside (don't laugh if it's something obvious!) Please can someone help me? I copied the code/CSS below.

  THANK YOU IN ADVANCE!

  INDEX OF...

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > The Yacht Club < /title >

  < link hand. CSS"rel ="stylesheet"type =" text/css"/ >

  <!-[if IE 5] >

  < style type = "text/css" >

  / * Place corrections for IE 5 css box model * in this conditional comment * /.

  #sidebar1 {width: 230px ;}}

  < / style >

  <! [endif]--> <!-[if IE] >

  < style type = "text/css" >

  / * place patches css for all versions of Internet Explorer in this conditional comment * /.

  #sidebar1 {padding-top: 30px ;}}

  #mainContent {zoom: 1 ;}}

  / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.

  < / style >

  <! [endif]-->

  < script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "

  < link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" / > "

  < / head >

  < body >

  < div id = "container" >

  < div id = "header" > < img src = "images/thanks" width = "290" height = "144" / > "

  <!-end #header->

  < / div >

  < div id = "sidebar1″" >

  Welcome < h3 > < / h3 >

  < ul id = "nav" > < li > < a href = "" javascript:; "> home < /a > < /li > < li > < a href =" "javascript:;" > about us < /a > < /li > < li > < a href = "" javascript:; "> membership < /a > < /li > < li > < a href =" "javascript:;" > our boats < /a > < /li > < li > < a href = "javascript" "" " : ; "> course races < /a > < /li > < li > < a href =" "javascript:;" > contact us < /a > < /li > "

  < /ul >

  < div id = "Accordion1" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Atlantic ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Pacific ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Indian ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < / div >

  < p > < / p >

  <!-end # sidebar1″--> < / div >

  < div id = "mainContent" >

  Luxury yachts < h1 > < / h1 >

  < p > < img src = "images/sailboat.jpg" alt = "Sailboat" width = "136" height "310" = class = "fltrt" / > Lorem ipsum dolor sit amet, adipiscing elit our. " Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. Donec and ipsum and vehicula nonummy sapien. Suspendisse potentialit. Surpassing varius urna id quam. SED neque mi, varius eget, tincidunt nec, so id, libero. In eget purus. Vestibule ut nisl. Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh.  Donec nec libero. < /p >

  < h2 > sailing to the Bahamas < / h2 >

  < p > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >

  <!-end #mainContent--> < / div >

  <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

  < div id = "footer" >

  < p > & copy; Luxury yachts 2009 - bring a cup for the rescue plan < /p >

  <!-end #footer--> < / div >

  <!-end #container--> < / div >

  < script type = "text/javascript" >

  <!--

  var Accordion1 = new Spry.Widget.Accordion ("Accordion1");

  ->

  < /script >

  < / body >

  < / html >

  CSS HAND...
  @charset "UTF-8";

  {body

  margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

  padding: 0;

  text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

  color: #000000;

  are-family: Verdana, Arial, Helvetica, without serif.

  are-size: 100%;

  background-color: #FDFDFD;

  background-image: url(images/body_BG.jpg);

  background-repeat: repeat-x;

  }

  H1, h2, h3 {}

  make-weight: normal;

  color: #00583F;

  }

  H1 {}

  -font size: 140%;

  }

  H2 {}

  are-size: 130%;

  }

  H3 {}

  are-size: 120%;

  }

  #container {}

  width: 780px;

  margin: 0 auto;

  text-align: left;

  border-top-width: 0px;

  border-right-width: 0px;

  border-bottom-width: 0px;

  border-left-width: 0px;

  border-top-style: none;

  border-right-style: none;

  border-bottom-style: none;

  border-left-style: none;

  background-image: url(images/container_bg.gif);

  background-repeat: repeat-y;

  }

  #header {}

  background-color: #DDDDDD;

  background-image: url(images/headerBG.jpg);

  background-repeat: no-repeat;

  padding-top: 0;

  padding-right: 10px;

  padding-bottom: 0;

  padding-left: 0px;

  }

  {#sidebar1}

  float: left; / * because this element is floating, it takes a width * /.

  width: 200px; / * the background color will be displayed for the length of the content of the column, but no further * /.

  padding: 15px 15px 20px 10px;

  }

  ul #nav {}

  background-image: url(images/buoy.jpg);

  background-repeat: no-repeat;

  background-position: left down.

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 20px;

  margin-left: 0px;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 153px;

  padding-left: 0px;

  list-style-type: none;

  }

  #nav li a {}

  are-size: 90%;

  color: #FFF;

  text-decoration: none;

  background-color: #09553F;

  display: block;

  padding: 4px;

  border-bottom-width: 1px;

  border-bottom-style: solid;

  border-bottom-color: #3574A 7;

  }

  #nav li a: hover, #nav li a: active, #nav li a: {emphasis

  color: #123464;

  background-color: #B7DAD8;

  }

  #mainContent {}

  margin: 0 0 0 250px; / on this div element left margin creates the column on the left side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the #sidebar1 content ends
  . */
  padding: 20px 0; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
  }
  #mainContent p, #sidebar1 p, #footer p {}
  are-size: 85%;
  line-height: 1.4;
  }
  #footer {}
  background-color: #00593D;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 270px;
  }
  #footer p {}
  margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
  padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
  color: #FFF;
  }
  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  margin left: 8px;
  }
  .fltlft {/ * this class can be used to float an element on your page to the left * /}
  float: left;
  right margin: 8px;
  }
  .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
  clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }
  SPRY CSS...
  @charset "UTF-8";

  / * SpryAccordion.css - version 0.4 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

  / * This is the selector for the main container of the accordion. For our style by default.

  * draw us left, right and bottom borders. The upper edge of the accordion

  * is made by the first AccordionPanelTab which never moves.

  *

  * If you want to limit the width of the Accordion widget, set a width

  * the accordion container. By default, our accordion expands horizontally to fill

  * a space available.

  *

  * The name of the class ("accordion") used in this switch is not necessary

  * make the widget function. You can use any class name you want to style the

  * Accordion container.

  */

  . Accordion {}

  overflow: hidden;

  border-right-width: 1px;

  border-bottom-width: 1px;

  border-left-width: 1px;

  border-right-style: solid;

  border-bottom-style: solid;

  border-left-style: solid;

  border-right-color: # 7-9297;

  border-bottom-color: # 7-9297;

  border-left-color: # 7-9297;

  }

  / * This is the selector for the AccordionPanel container which houses the

  * tab panel and panel content area. It is not make it visually, but we

  * ensure that it has zero margin and padding.

  *

  * The name of the class ("AccordionPanel") used in this switch is not necessary

  * make the widget function. You can use any class name you want to style a

  the container of accordion panel.

  */

  . {AccordionPanel}

  margin: 0px;

  padding: 0px;

  }

  / * This is the selector for the AccordionPanelTab. This container houses

  the Panel personnel. It is also the container where the user clicks

  * to open a specific panel.

  *

  * The name of the class ("AccordionPanelTab") used in this switch is not necessary

  * do the function widget
  . You can use any class name you want to style a
  the container of Accordion Panel tab.
  *
  * NOTE:
  * This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
  * the user to select the text in the AccordionPanelTab. Here is the browser owner
  properties that only work in Mozilla browsers (such as FireFox) and KHTML
  * browsers (such as Safari), so they will not pass the W3C validation
  . If you want your documents to
  * validate and don't care if the user can select text in an AccordionPanelTab.
  * You can remove these properties without affecting the functionality of the widget.
  */
  . {AccordionPanelTab}
  background-color: #00583F;
  margin: 0px;
  padding: 2px;
  cursor: point;
  -moz-user-select: none;
  -khtml-user-select: none;
  color: #FFF;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-bottom-color: # 7-9297;
  border-bottom-color: # 7-9297;
  }
  / * This is the selector for the content area of a Panel. It is important to note that
  * You should never put any padding on the content area of the group if you plan to
  * use the animations of accordion panel. Place padding non-zero on the content
  * area can cause accordion suddenly increase in height, while signs alive.
  *
  * Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
  * Content container.
  *
  * The name of the class ("AccordionPanelContent") used in this switch is not necessary
  * make the widget function. You can use any class name you want to style a
  the container of the accordion panel content.
  */
  . {AccordionPanelContent}
  overflow: auto;
  margin: 0px;
  height: 200px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  }
  / * This is an example of how to change the appearance of the tab of the Panel which is
  * currently open. The "AccordionPanelOpen" class is added and removed programmatically
  * to panels as long as the user clicks on the tabs in the accordion.
  */
  . AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #005b3E;
  }
  / * This is an example of how to change the appearance of the tab of the Panel as the
  * mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
  * and removed containers tab panel as the mouse enters and leaves the tab container.
  */
  . {AccordionPanelTabHover}
  color: #AAC7CE;
  }
  . 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 class "AccordionFocused" is programmatically added and removed
  * whenever the accordion wins or loses the keyboard focus.
  */
  . AccordionFocused. {AccordionPanelTab}
  background-color: #00583F;
  color: #FFF;
  }
  / * This is an example of how to change the appearance of the tab of the Panel which is
  * currently open when the accordion is in focus.
  */
  . AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #00583F;
  }
  My apologies in advance if I ask a stupid question!
  !
  

  Your footer is designed to move down account for the extra space created when you activate the menu accordion naviation. The turtorial example shows not happening? I can't find a link for the complete example on the page you mentioned to the check.

• A simple Question of accordion Spry (I think)

  Hi all:

  I searched but could not find, but I think that it is a simple.

  I created an accordion Spry menu base with DW/CS3-Insert/Spry/Spry Accordion. How to make the first "content 1" visible hidden/no loading of the page. Currently, the 'Lable 2' must be clicked to hide the "content 1"course which shows the "Content 2"? Guess it is in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 = "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 ("Accordion1");
  ->
  < /script >
  < / body >
  < / html >

  JAVASCRIPT

  var Spry;
  If (!.) Spry) Spry = {};
  If (!.) Spry.Widget) Spry.Widget = {};

  Spry.Widget.Accordion = function (element, opts)
  {
  This.Element = this.getElement (element);
  this.defaultPanel = 0;
  this.hoverClass = "AccordionPanelTabHover";
  this.openClass = "AccordionPanelOpen";
  this.closedClass = "AccordionPanelClosed";
  this.focusedClass = "AccordionFocused;
  this.enableAnimation = true;
  this.enableKeyboardNavigation = true;
  this.currentPanel = null;
  This.Animator = null;
  this.hasFocus = null;
  This.Duration = 500;

  this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
  this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

  this.useFixedPanelHeights = true;
  this.fixedPanelHeight = 0;

  Spry.Widget.Accordion.setOptions (, opts, true);

  Unfortunately, some browsers like Safari, style sheets in our
  page depends may not have been loaded at the time, we are called.
  This means that we must postpone attaching our behavior until after the
  OnLoad event is triggered, because some of our behaviors are based on dimensions
  specified in the CSS.

  If (Spry.Widget.Accordion.onloadDidFire)
  this.attachBehaviors ();
  on the other
  Spry.Widget.Accordion.loadQueue.push (this);
  };

  Spry.Widget.Accordion.onloadDidFire = false;
  Spry.Widget.Accordion.loadQueue = [];

  Spry.Widget.Accordion.addLoadListener = function (handler)
  {
  If (typeof window.addEventListener! = "undefined")
  window.addEventListener ("load", Manager, false);
  else if (typeof document.addEventListener! = "undefined")
  document.addEventListener ("load", Manager, false);
  else if (typeof window.attachEvent! = "undefined")
  window.attachEvent ("onload", handler);
  };

  Spry.Widget.Accordion.processLoadQueue = function (handler)
  {
  Spry.Widget.Accordion.onloadDidFire = true;
  var q = Spry.Widget.Accordion.loadQueue;
  var qlen = q.length;
  for (var i = 0; i < qlen; i ++)
  q [i] .attachBehaviors ();
  };

  Spry.Widget.Accordion.addLoadListener (Spry.Widget.Accordion.processLoadQueue);

  Spry.Widget.Accordion.prototype.getElement = function (ele)
  {
  If (ele & & typeof ele == 'string')
  return document.getElementById (ele);
  return ele;
  };

  Spry.Widget.Accordion.prototype.addClassName = function (ele, className)
  {
  If (! ele |! className |) (ele.className & & ele.className.search (new RegExp ("\\b" + NomClasse + "\\b"))! = - 1))
  return;
  ele.className += (ele.className? "": "") + ClassName; "
  };

  Spry.Widget.Accordion.prototype.removeClassName = function (ele, className)
  {
  If (! ele |! className |) (ele.className & & ele.className.search (new RegExp ("\\b" + NomClasse + "\\b")) ==-1))
  return;
  ele.className = ele.className.replace (new RegExp ("\\s*\\b" + className + "\\b", "g"), ' ');
  };

  Spry.Widget.Accordion.setOptions = function (obj, optionsObj, ignoreUndefinedProps)
  {
  If (! optionsObj)
  return;
  for (var optionName in optionsObj)
  {
  If (ignoreUndefinedProps & & optionsObj [Optionname] == undefined)
  continue;
  obj [Optionname] = optionsObj [Optionname];
  }
  };

  Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function (panel)
  {
  If (Panel)
  this.addClassName (this.getPanelTab (panel), this.hoverClass);
  };

  Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function (panel)
  {
  If (Panel)
  this.removeClassName (this.getPanelTab (panel), this.hoverClass);
  };

  Spry.Widget.Accordion.prototype.openPanel = function (panel)
  {
  panelA var = this.currentPanel;
  var panelB = Panel;
  
  If (! panelB | panelA == panelB)
  return;

  var contented;
  If (Pepita)
  Content = this.getPanelContent (panelA);
  var contentB = this.getPanelContent (panelB);

  If (! contentB)
  return;

  If (this.useFixedPanelHeights & &! this.fixedPanelHeight)
  {
  this.fixedPanelHeight = (contentA.offsetHeight)? contentA.offsetHeight: contentA.scrollHeight;
  }

  If (this.enableAnimation)
  {
  If (this.animator)
  This.Animator.Stop ();
  This.Animator = new Spry.Widget.Accordion.PanelAnimator (Thi, panelB, {duration: this.duration});
  This.Animator.Start ();
  }
  on the other
  {
  If (content)
  contentA.style.height = '0px ';
  contentB.style.height = (this.useFixedPanelHeights? this.fixedPanelHeight: contentB.scrollHeight) + 'px ';
  }

  If (panelA)
  {
  this.removeClassName (panelA, this.openClass);
  this.addClassName (panelA, this.closedClass);
  }

  this.removeClassName (panelB, this.closedClass);
  this.addClassName (panelB, this.openClass);

  this.currentPanel = panelB;
  };

  Spry.Widget.Accordion.prototype.openNextPanel = function()
  {
  var panels = this.getPanels ();
  var curPanelIndex = this.getCurrentPanelIndex ();
  
  If (panels & & curPanelIndex > = 0 & & (curPanelIndex + 1) < panels.length)
  this.openPanel (panels [curPanelIndex + 1]);
  };

  Spry.Widget.Accordion.prototype.openPreviousPanel = function()
  {
  var panels = this.getPanels ();
  var curPanelIndex = this.getCurrentPanelIndex ();
  
  If (panels & & curPanelIndex > 0 & & curPanelIndex < panels.length)
  this.openPanel(panels[curPanelIndex-1]);
  };

  Spry.Widget.Accordion.prototype.openFirstPanel = function()
  {
  var panels = this.getPanels ();
  If (panels)
  this.openPanel (panels [0]);
  };

  Spry.Widget.Accordion.prototype.openLastPanel = function()
  {
  var panels = this.getPanels ();
  If (panels)
  this.openPanel(panels[panels.length-1]);
  };

  Spry.Widget.Accordion.prototype.onPanelClick = function (panel)
  {
  If (this.enableKeyboardNavigation)
  This.Element.Focus ();
  If (Panel! = this.currentPanel)
  this.openPanel (panel);
  This.Focus ();
  };

  Spry.Widget.Accordion.prototype.onFocus = Function
  {
  This.Element.Focus ();
  this.hasFocus = true;
  this.addClassName (this.element, this.focusedClass);
  };

  Spry.Widget.Accordion.prototype.onBlur = function
  {
  This.Element.Blur ();
  this.hasFocus = false;
  this.removeClassName (this.element, this.focusedClass);
  };

  Spry.Widget.Accordion.KEY_UP = 38;
  Spry.Widget.Accordion.KEY_DOWN = 40;

  Spry.Widget.Accordion.prototype.onKeyDown = Function
  {
  key var = e.keyCode;
  If (! this.hasFocus |) (touche! = this.previousPanelKeyCode & & key! = this.nextPanelKeyCode))
  Returns true;
  
  var panels = this.getPanels ();
  If (! panels: panels.length < 1)
  Returns false;
  var currentPanel = this.currentPanel? this.currentPanel: panels [0];
  var nextPanel = (key == this.nextPanelKeyCode)? currentPanel.nextSibling: currentPanel.previousSibling;
  
  While (nextPanel)
  {
  If (nextPanel.nodeType == 1 / * Node.ELEMENT_NODE * /)
  break;
  nextPanel = (key == this.nextPanelKeyCode)? nextPanel.nextSibling: nextPanel.previousSibling;
  }
  
  If (nextPanel & & currentPanel! = nextPanel)
  this.openPanel (nextPanel);

  If (e.stopPropagation)
  e.stopPropagation ();
  If (e.preventDefault)
  e.preventDefault ();

  Returns false;
  };

  Spry.Widget.Accordion.prototype.attachPanelHandlers = function (panel)
  {
  If (! sign)
  return;

  var = this.getPanelTab (panel) tab;

  If (tab)
  {
  var self = this;
  Spry.Widget.Accordion.addEventListener (tab, "click", function {return self.onPanelClick (panel);}, false);
  Spry.Widget.Accordion.addEventListener (tab, "mouseover", function {return self.onPanelTabMouseOver (panel);}, false);
  Spry.Widget.Accordion.addEventListener (tab, "mouseout/mouseouthandler()", function {return self.onPanelTabMouseOut (panel);}, false);
  }
  };

  Spry.Widget.Accordion.addEventListener = function (element, eventType, Manager, capture)
  {
  VR;
  {
  If (element.addEventListener)
  element.addEventListener (eventType, Manager, capture);
  Else if (element.attachEvent)
  element.attachEvent ("on" + eventType, handler);
  }
  catch (e) {}
  };

  Spry.Widget.Accordion.prototype.initPanel = function (Panel, isDefault)
  {
  var content = this.getPanelContent (panel);
  If (isDefault)
  {
  this.currentPanel = Panel;
  this.removeClassName (Panel, this.closedClass);
  this.addClassName (Panel, this.openClass);
  }
  on the other
  {
  this.removeClassName (Panel, this.openClass);
  this.addClassName (Panel, this.closedClass);
  Content.style.Height = '0px ';
  }
  
  this.attachPanelHandlers (panel);
  };

  Spry.Widget.Accordion.prototype.attachBehaviors = function()
  {
  var panels = this.getPanels ();
  for (var i = 0; i < panels.length; i ++)
  {
  this.initPanel (panels [i], i == this.defaultPanel);
  }

  If (this.enableKeyboardNavigation)
  {
  XXX: IE does not allow setting tabindex property dynamically. This means that we cannot
  rely on the addition of the tabindex attribute if it is absent to navigate with the keyboard
  by default.

  var tabIndexAttr = this.element.attributes.getNamedItem ("tabindex");
  If (! tabIndexAttr) this.element.tabindex = 0;
  If (tabIndexAttr)
  {
  var self = this;
  Spry.Widget.Accordion.addEventListener (this.element, "focus", function {return self.onFocus (e);}, false);
  Spry.Widget.Accordion.addEventListener (this.element, "blur", function {return self.onBlur (e);}, false);
  Spry.Widget.Accordion.addEventListener (this.element, 'keydown', function {return self.onKeyDown (e);}, false);
  }
  }
  };

  Spry.Widget.Accordion.prototype.getPanels = function()
  {
  Return this.getElementChildren (this.element);
  };

  Spry.Widget.Accordion.prototype.getCurrentPanel = function()
  {
  Return this.currentPanel;
  };

  Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
  {
  var panels = this.getPanels ();
  for (var i = 0; i < panels.length; i ++)
  {
  If (this.currentPanel is panels [i])
  Return i;
  }
  return 0;
  };

  Spry.Widget.Accordion.prototype.getPanelTab = function (panel)
  {
  If (! sign)
  Returns a null value.
  return this.getElementChildren (panel) [0];
  };

  Spry.Widget.Accordion.prototype.getPanelContent = function (panel)
  {
  If (! sign)
  Returns a null value.
  return this.getElementChildren (panel) [1];
  };

  Spry.Widget.Accordion.prototype.getElementChildren = function (element)
  {
  the var children = [];
  child var = element.firstChild;
  While (child)
  {
  If (child.nodeType == 1 / * Node.ELEMENT_NODE * /)
  Children.push (Child);
  child = child.nextSibling;
  }
  return of the children;
  };

  Spry.Widget.Accordion.prototype.focus = function()
  {
  If (this.element & & this.element.focus)
  This.Element.Focus ();
  };

  /////////////////////////////////////////////////////

  Spry.Widget.Accordion.PanelAnimator = function (accordion, Panel, opts)
  {
  This.Timer = null;
  This.Interval = 0;
  this.stepCount = 0;

  This.FPS = 0;
  This.Steps = 10;
  This.Duration = 500;
  this.onComplete = null;

  This.Panel = Panel;
  this.panelToOpen = accordion.getElement (panel);
  this.panelData = [];

  Spry.Widget.Accordion.setOptions (, opts, true);

  
  If the caller specified speed in terms of frames per second.
  Convert them to steps.

  If (this.fps > 0)
  {
  This.Interval = Math.floor(1000 / this.fps);
  This.Steps = parseInt ((this.duration + (this.interval-1)) / this.interval);
  }
  ElseIf (this.steps > 0)
  This.Interval = this.duration / this.steps;

  Set up the table of signs we want to animate.

  var panels = accordion.getPanels ();
  for (var i = 0; i < panels.length; i ++)
  {
  var p = panels [i];
  var c = accordion.getPanelContent (p);
  If (c)
  {
  var h = c.offsetHeight;
  If (h is undefined)
  h = 0;
  If (p == Panel | h > 0)
  {
  var obj = new Object;
  obj. Panel = p;
  obj. Content = c;
  obj.fromHeight = h;
  obj.toHeight = (p == sign)? (accordion.useFixedPanelHeights? accordion.fixedPanelHeight: c.scrollHeight): 0;
  obj. Increment = (obj.toHeight - obj.fromHeight) / this.steps;
  obj. C.style.overflow = overflow;
  this.panelData.push (obj);

  c.style.Overflow = 'hidden ';
  h = c.style.Height + 'px ';
  }
  }
  }
  };

  Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
  {
  var self = this;
  This.Timer = setTimeout (function () {self.stepAnimation ()}; this.interval);
  };

  Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
  {
  If (this.timer)
  {
  clearTimeout() (this.timer);

  If we kill the timer, restore the overflow
  Properties on the panels that we animate!

  If (this.stepCount < this.steps)
  {
  for (i = 0; i < this.panelData.length; i ++)
  {
  obj = this.panelData [i];
  obj. Content.style.Overflow = obj.overflow;
  }
  }
  }

  This.Timer = null;
  };

  Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
  {
  ++ this.stepCount;

  This.Animate ();

  If (this.stepCount < this.steps)
  This.Start ();
  Else if (this.onComplete)
  this.onComplete ();
  };

  Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
  {
  var i, obj;

  If (this.stepCount > = this.steps)
  {
  for (i = 0; i < this.panelData.length; i ++)
  {
  obj = this.panelData [i];
  If (obj.panel! = this.panel)
  obj. Content.style.Height = '0px ';
  obj. Content.style.Overflow = obj.overflow;
  obj. Content.style.Height = obj.toHeight + 'px ';
  }
  }
  on the other
  {
  for (i = 0; i < this.panelData.length; i ++)
  {
  obj = this.panelData [i];
  obj.fromHeight += obj.increment;
  obj. Content.style.Height = obj.fromHeight + 'px ';
  }
  }
  };

  On the bottom of the yourpage you have this:

  var Accordion1 = new Spry.Widget.Accordion("Accordion1");
  

  Change to this:

  var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
  

  Ken Ford

• Delete lines of liaison on the spry tabs

  My apologies if this question is posted in the wrong forum.
  
  I use the function of panels to Spry tab. How can I remove the link onClick that apprear lines when you click on a tab?
  
  Thanks for your time.

  Thanks for trying but I found the answer. I hope this helps others with the same problem.

  
  

  • TAB 1
  
  
  • TAB 2
  
  
  • TAB 3

• The question "Adjust the location of the tab bar" has been closed, but the solution is not satisfactory

  Updates of version 29 on have moved the bar of tabs so that changed the position and function of the address bar. The 'solution' to the question in quotes above is not a solution, the question was just closed. The owner of the issue went back to 95% of the function of the way he had it & has set for that. I find not acceptable and opted to return to version 28. I'm worried, I could have spent the browser after using Firefox since the first beta version. Is there no way to keep the options of version 28 (mainly the position of the tab & address bar) in the updated versions? I tried the Restorer Classic theme, but it did not help. I am running Windows 7 Home Premium 64 bit & Firefox 28 right now without any problem, but I guess that Firefox is progressing certain features on the old version will fail. Help please?

  FJRRider,

  You can take a look at this theme.
  Firefox 2, the theme, reloaded
  https://addons.Mozilla.org/en-us/Firefox/addon/Firefox-2-theme-for-Firefox-3x/
  Large buttons, tabs under the location bar - just above the page content 'window', but the reload and Stop / Go button cannot be moved, however. It uses a combined stop / Go button which could take a volume of little getting used to.

  IMO, much simpler than the Restorer of classic theme and no need to tinker with a large number of settings to make it look 'right', but it has a very limited ability to be changed or reconfigured.

• How to select an item in the Spry tabs Panel?

  I have a Pannel with Spry tab on my site and I'm having a very difficult time selecting div individual and images in the content. Whenever I click on the site, it selects all. Is there a way to get around this? It is combersome having to return to the code all the time.

  In this picture, it seems that I purposely chose the entire page, but I just have to click on the image.

  This is probably caused by overflow: hidden somewhere in your CSS code.  This property is often used to control elements floated.

  A few things to try:

  • Double-click in the content area.
  • Or, right-click in the content area > select View > select full.
  • Or, disable CSS by going to view > Style rendering > uncheck display Styles.
  • Alternatively, use a Sheet of Style to design time while editing.

  Nancy O.

• Width of the Spry tabbed panels

  The width of the tabs at the top of the Spry tabbed panels appear to be about 70% of the width of the Panel. Adding additional tabs can wrap around to create a new line of tabs.

  How is it possible to extend the first line of tabs at 100% of the width of the Panel to avoid the film?

  Thank you very much.

  I had a quick glance at your pages using the URL you provided private.

  The width of the tabs is affected by the style of #content ul rule that starts at line 242 of style.css. It sets the width of the bulleted lists in the content

  75%. The tabs of a group of Panel tabs are actually an unordered list that's why tabs are affected.

  To resolve this issue, remove the width of #content ul or add this new rule of style:

  #content ul. {TabbedPanelsTabGroup}

  Width: 100%;

  }

  This will make the tabs fit into a single line in two of your pages. The other page was always three lines of tabs (one on the last row), but you can fix this by reversing the order of Customer-centric competitive positioning"and"focus group interviews.

• Spry tabbed the sign code where to place

  Hello

  I have a pb that makes me crazy... some pages use a widget spry Panel tabs, not others, when I put the spry in the model, whenever I open a page that does not use the spry, I get a message saying that the spry is no longer used, if dreamweaver must remove etc...

  Dreamweaver does not remove the tag... it is one thing, the second thing is that if I remove the spry of the m, model ain and it manually in the pages where it is used it is removed on each update... I have no idea how manage it... What's the trick? Thank you very much!

  Test Widget Spry page (view source in the browser to see the code)

  http://ALT-Web.com/sandbox/Spry-test.html

  If you use panels to Spry tab in all your pages, all code must be in your Template.dwt file.

  If you use panels to Spry tab in select pages, this code goes inside an editable area between theandTags on your page (s) child.  The rest of support code goes inside your Template.dwt file between theandTags.

  Tab 1

  Tested and works in IE7, 8, 9, Opera, Chrome and Safari.

  Lorem ipsum dolor sit amet, adipiscing elit computer. Surpassing sapien, porttitor eget, sodales libero sed pretium vitae lacus. Maecenas non urna lacus, sollicitudin justo ac. UT erat mi, ac accumsan ac, congue EU dui hendrerit. Pellentesque condimentum elit, and id 195kgs to porta urna eleifend. Phasellus blandit dignissim ullamcorper. In dapibus, ante no congue fermentum.

  Tab 2

  Nulla facilisi. Vestibule ipsum elit, sed tristique tincidunt sit amet, faucibus in orci. Nunc sit amet elit lorem. SED eget arcu ipsum, pharetra ullamcorper, lectus. SED ac diam ac mattis tortor mollis. Etiam felis vel augue tempus in elementum ligula lectus mattis.

  Tab 3

  Tested and works well in Firefox, MS IE 7, 8, 9, Chrome, Safari and Opera.

  Hope this helps,

  Nancy O.

  ALT-Web Design & Publishing

  Web | Graphics | Print | Media specialists

  http://ALT-Web.com/

  http://Twitter.com/ALTWEB

• Accordion Spry with no content &amp; how to make a link to the new window within the accordion

  First of all, I have an accordion spry without content and Dreamweaver tells me that the accordion seems to be damaged b/c I deleted the code from content.  Why?

  Secondly, I want to insert a link in my AccordionPanelTab and open this link in a new window.  I finally got the link actually work by inserting onclick = "window.location = this.href", but it opens in the same window and I want it to open in a new window. I thank everyone's help!

  Here is my code accordion:

  < div id = "Accordion1" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Subscriber < / div >

  < / div >

  < div class = "AccordionPanel" >

  "< div class ="AccordionPanelTab"> < a href ="http://linklink"onclick ="window.location = this.href"> associated subscription < /a > < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > pricing Center < / div >

  < / div >

  < / div >

  Try

  http://LinkLink"onclick =" window.open ('http://linklink', 'external'); return false; ' > Underwriting associate

  GRAMPS