Spry Accordion one level link
Hi to all,
I have a small issue with a website using a Spry Accordion Widget to create a collapsible menu. I have several items of navigation, for example:
Link 1
Link 1.1
Link 1.2
The Accordion works well, but in some level there is only one item, and no subitems.
Link 2
Link 3
When I try to add a hyperlink to that level, nothing happens. I removed the div of the content, leaving only the panel tab, but the spry tries to make the animation to open the content tab, which is no longer there. I only want to add a link in the panel tab to open another page.
Any suggestions? Newbie here...
Thanks in advance...
Accordion are not ment to be used as menu bars. They are ment for hiding / displaying content.
That is why Spry cancels all "native" events that are fired on the tabs. So the accordion will still
operate if you changed your markup from divs to <a> elements and <p> tags.
You can overwrite this behaviour by adding the following attribute on your <a> element that you have
placed inside the accordion tab:
onclick="window.location=this.href;"
Similar Messages
-
Spry Accordion Menu Tab Link css - totally confused
Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Photo Gallery</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="PhotoGallery.html">Gallery 1</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Unit Newsletters</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="Newsletter.html">February 2010</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Forms</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="">Joining Instructions</a></li>
<li><a href="">Enrolment</a></li>
<li><a href="">Next of Kin</a></li>
<li><a href="">Volunteer Blue Card</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="WhatsOn.html">Whats On</a></li>
<li><a href="PSG.html">Parent Support Group</a></li>
</ul>
</div>
</div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none; -
Spry accordion for CS5 links not working
Hi everyone!
I build a Spry accordion for my website, and while the functionality of it works beautifully, the links do NOT work. I have double and triple checked that my links are correct, and when I am in a preview mode, the text is changing to my a:hover specifications. Does anyone have any useful suggestions? Please be gentle when answering, I know my way around HTML and Dreamweaver, but am trained as a designer, not a coder.
Thank you!Please upload your site and supply a link.
Gramps -
Hello,
I have a Spry Accordion menu with links inside the Accordion
Panel Content. I’m trying to style them using CSS, but
can’t figure out how. I tried this(below) but doesn’t
work.
#AccordionPanelContent a {
font-size:9px;
color:#FF6600;
font-weight:bold;
text-decoration:none;
padding-left: 2px;
padding-right:15px;
Here's the HTML code:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Places</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="jordan.html">Jordan</a></li>
<li><a
href="bhutan.html">Bhutan</a></li>
<li><a
href="london.html">London</a></li>
<li><a
href="spain.html">Spain</a></li>
<li><a href="rocky.html">Rocky Nat'l Park,
USA</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">WildLife</div>
<div class="AccordionPanelContent">Content
3</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Close-ups</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="flowers.html">Flowers</a></li>
<li><a
href="insects.html">Insects</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">People</div>
<div class="AccordionPanelContent">Content
4</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Thanks for any help on how to style these link,
DaveLinks are not coded into the CSS for the Accordian panel. You
could add the lines in yourself.
Here is what I would recommend. If you want the same link
color regardless of where it is on the document, make another css
document on your own, attach it to the document, and put the
following in it:
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
That would just change the color of the links. Active and
Link can be the same if you want even though this example does not
show it. If you need something else, like underlining or bold, you
could use the Reference Panel of DW or post here, and you could
also check out this example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2
This comes from a very good tutorial located at:
http://www.w3schools.com/css/default.asp
(the Hyperlink stuff is under "psuedo-class" under advanced on the
left menu)
Or if you just need this code to work on the panel only you
would need to do this:
#AccordianPanelContent a:active,
#AccordianPanelContent a:link { CSS CODE HERE }
#AccordianPanelContent a:visited { CSS CODE HERE }
#AccordianPanelContent a:hover { CSS CODE HERE }
Hope this helps some. -
How to create anchor links within a spry accordion?
I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser? -
The underline is in the middle of the links in my spry accordion
I created a spry accordion menu in Dreamweaver CS4, and when I test it the underline is in the middle of the links in my spry accordion. This is not happening when I test it in a browser on the Mac I'm working on, but when I test it on a PC my rollover links have the line going through the center verses being underlined. The rest of the links on my page are fine, this is just happening when I rollover my submenu links in my Spry accordion when I test it in a browser on a PC. I am a "spry virgin," so please help!!!
Hello Em_needs_help,
You posted this message in the InContext Editing Web Developer discussion. I'm going to move your post to the Spry forums where more spry experts will be able to help.
Best regards,
Corey -
I want to link certain text from a homepage to a second page
that contains a SPRY Accordion with three panels. But I want to
link to the second panel open, even though this is not the default
open panel if you load that page independantly. Is there a way of
telling the widget to open a specific panel through the link code
on the homepage? I am trying to avoid the visitor having to click
the panel for the selected topic on the homepage.We have that feature built into our widgets, which are much
different than
spry:
http://www.projectseven.com/products/tools/accordion/tweaks/params/
If you don't have a development budget for add-ons, you can
look through the
spry docs:
http://labs.adobe.com/technologies/spry/docs.html
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"RGracia" <[email protected]> wrote in
message
news:fn55pk$htn$[email protected]..
>I want to link certain text from a homepage to a second
page that contains
>a
> SPRY Accordion with three panels. But I want to link to
the second panel
> open,
> even though this is not the default open panel if you
load that page
> independantly. Is there a way of telling the widget to
open a specific
> panel
> through the link code on the homepage? I am trying to
avoid the visitor
> having
> to click the panel for the selected topic on the
homepage.
> -
Greetings:
I am attempting to change the link color to "none" within a
Dreamweaver CS3 Spry Accordion navigational element and I am unable
to make the changes I need. I have tried to change the internal
link page properties within my HTML document and also set the "a"
properties in the linked CSS file to "text-decoration: none" and
the link color still remains in the Accordion navigational element.
Do you have any suggestions on how I can fix this?
Thanks for your help!in your spy accordian css file, put:
a:link
text-decoration:none;
or, even better
.nolinkunderline
text-decoration:none;
and then apply the style to your accordians hyperlinks
i am assuming it's the underline element that you want
removed -
Desperate help needed in understanding SPRY accordion CSS
hello everybody
like many out there im stumbling through some home/self tuition on DW. I've recently checked out the spry accordion. It all went well up to the part where I wanted to improve the outlook of the accordion. I luckily found some templates on the adobe site with an accordion with the general idea as to how I would like an accordion to look, or at least a platform for future ideas. (Design #2 at: http://www.adobe.com/devnet/dreamweaver/?view=samples )
I've had a look through the code and have found great difficulty understanding a few of the div classes that are contained within it, i.e. what they are attributed to etc.
Here is the HTML and the Spry CSS docs that I downloaded from the link above:
HTML code (my issues are highlighted in red)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OurCompany.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="#" >Contact Us</a> | <a href="#" >Site Map</a></div>
<div class="toplogo"><a href="#"><img src="images/transparent.gif" width="365" height="90" border="0" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="#" >This is definitely navigation item 1</a></li>
<li><a href="#" >Item 2</a></li>
<li><a href="#" >Item 3</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Lorem Ipsum dolor sit amet</h1>
<img class="imageright" src="images/content_photo_1.jpg" border="0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id <a href="#">velitvitae ligula</a> volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet. </p>
<img class="imageleft" src="images/content_photo_2.jpg" border="0" /><p>Consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Nulla libero. Vivamus pharetra pos uere sapien. Nam consectetuer. Sed aliq uam, <a href="#">nunc eget euismod ullamcorper</a>, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">
TELLUS PROIN EU ERAT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
UMA NON TEMPLUS NUNC
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.</p>
<p>Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
CONSECTETUER ADIPICING ELIT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class="imageright" src="images/accordion_photo.jpg" border="0" />
<p>Cras tempor. Morbi egestas. Tempus, nunc arcu mollis enim, eu aliqu mam erat nullanon nibh consectetuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p>
<p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2009 Our Company. All rights reserved.</div>
</div>
</div>
<script type="text/javascript">
<!--
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:true, defaultPanel:2});
//-->
</script>
</body>
</html>
I'n terms of the <div class="accordion_340_tab"> i'm really not sure what these mean. I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean. There is no reference to them in any of the code/ CSS sheets i downloaded.
Plus, i'm not quite sure what the two <div style="clear:both;"></div> are clearing.
I know these will be really basic questions and I apologise for having to trouble you but any help would be really really appreciated
This is the spryCSS that came with the link to accompany the HTML file...
@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 {
overflow: hidden;
width: 255px;
/* 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 {
color: #394867;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
/* 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 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
/* 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 {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
/* 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-image: url(../images/accordion_255_tab_over.gif);
/* 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: #000000;
/* 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: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif);
Thank you to anybody again who may be able to assist me with this. I'm very new to DW (and some may say not the brightest) so any low level explanations will be really appreciated.
Kind regards
Andrea xHeya, I hope my response will help.
First off, I'd like to say that you are correct in being unable to find the " <div class="accordion_340_tab"> " anywhere in the project. I went through and checked all the code and couldn't find a reference anywhere. Also, I downloaded the project from your link, deleted the <div class="accordion_340_tab"> as well as the </div> right after the TELLUS PROIN EU ERAT" (as the opening div and closing div work together and must be added or deleted together) and it had absolutely no impact from what I could see in internet explorer 8 and firefox.
Therefore, I believe, that it was originally intended to do something or in fact did something but they took that out and then forgot to take out the div. Even within the internal .js file I couldn't find a reference. Maybe they forgot to upload a third stylesheet. Either way, it appears to work just fine without it.
"I'm not quite sure what the two <div style="clear:both;"></div> are clearing."
In regards to this, this div style tag is a less frequently used tag that can divide content. Do you know what the HR tag in html is? If not, try putting a <hr> tag (just like that, by itself) in your web page somewhere. HR stands for Horizontal Rule- it makes a horizontal line across the page. This div style clear both tag is basically an invisible HR that helps separate different divs or content or whatever else is on the page. Think of it as an invisible page break.
"I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean."
You should check out some CSS tutorials for the basics, but in a nutshell I'll go ahead and explain what I believe you are having trouble with.
Let's put it this way:
HTML is the core of your web page. It is the content and substance.
CSS is the style of your web page. It is the color, alignment, and format of your page.
The "div" tag by itself is simply <div>. However, you MUST close a div tag somewhere on the page with a </div> A div tag by itself, however, will do absolutely nothing. How do you get it to do something? By making a CSS rule, the two most common of which are known as a "div id" and "div class".
The differences between div id and div class are pretty small- div id is mainly used for a div tag that will only be used once on the web page. Div classes are used for something that will be repeated, in this case, the accordion tabs.
Therefore, when you see something like <div id="content"> text blah blah blah </div>, then you know that the "text blah blah blah" is your content, and that content is being modified to the specifications of the id "content". Where is this "content" div? This is what you as the designer make (or there will already be one in a template) and can usually be found in an external STYLESHEET, which holds all of your css rules, and is then linked to the main web page's html document (where your content is) with a link tag in the header of the html, usually right after the title and before the end of the <header> tag. You will find <link href="example.css" rel="stylesheet" type="text/css" /> but with a different name in the part i put as "example.css"
Within that css document you have different things you can do. Let's say I want to make one div id and one div class. I want to name the ID "example1" and the class "example2". It would look something like this (note that you must ALWAYS start an ID with # and a class with a period)
#example1 {
width: 450px;
margin:auto;
color: #fff;
.example2 {
width: 900px;
margin: 10px;
color: #000;
I hope this helped.
-Matt -
Spry: Accordion does not close properly
Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
ChuckHey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!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>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
-->
</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
<div id="NavBar">
<div id="SmallerNavBar">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
<p><em><strong>Friday Night :</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
<p><em><strong>Saturday:</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
<br> <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
<p><em><strong>Sunday:</br>
<br> <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
<p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><strong>Content 5</strong></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent"><strong>Content 6</strong></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
<div class="AccordionPanelContent">
<p>2007</p>
<p>2008</p>
</div>
</div>
</div>
<div id="Cover">
<p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
<br>Cover Designed By:</br>
<br>Andrea Pagenkopf</br>
<br>Rolling Rockets 4-H</p>
</div>
</div>
</div>
</div>
<div id="MainContentBox">
<div id="BoxForText">
<p align="center">Welcome to the new</p>
<p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
<p align="center">Webpage</p>
<p align="center"> </p>
<p align="center"><strong><em><u>News:</u></em></strong></p>
<p align="center"><em>Buttons for 2009 are on sale now! </em></p>
<p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
<p align="center"> </p>
<p align="center"><strong><em><u>Updates:</u></em></strong></p>
<p align="left"><em>7/10/2009</em> - New Homepage</p>
<p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
</div>
</div>
<div id="BottomBox"></div>
<!-- end #container -->
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , defaultPanel: -1 });
//-->
</script>
</body>
</html> -
Using an image as label in Spry Accordion Menu
I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32) -
Colour problem with Spry Accordion
Hi, I'm trying to create a website with a spry accordion. I've had some trouble with it (as I'm not good at CSS, it's new to me) and I've solved them all except for one: a problem with the colour of the bar when the section is open.
This is my website: http://s313354774.mialojamiento.es/saibe/design3/Publish/INICI.html
When the menu is closed everything is ok, but when you open it then the colour changes, making a gradation between the new colour and the original one. I've checked the stylesheet and there the original colour doesn't appear anywhere, so it's wierd to me.
Does anyone know why is it happenning? If i'ts because something stupid forgive me, as I told you this is quite new to me and I'm trying to learn day by day.
SergiSegi,
This one has got me stumped. If I copy your SpryAccordion.css and apply my copy to the document, there is no problem. Have a look here http://pleysier.com.au/sergi/
I know this will not help except to say, that if you change
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
to
<link href="http://pleysier.com.au/SpryAccordion.css" rel="stylesheet" type="text/css" />
see what happens.
Gramps -
A simple Spry Accordion Question (I think)
Hi all:
I've searched but can't find, but I think this is a simple one.
I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's 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//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="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(this, opts, true);
// Unfortunately in some browsers like Safari, the Stylesheets our
// page depends on may not have been loaded at the time we are called.
// This means we have to defer attaching our behaviors until after the
// onload event fires, since some of our behaviors rely on dimensions
// specified in the CSS.
if (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors();
else
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', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, 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" + className + "\\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" + className + "\\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)
var panelA = this.currentPanel;
var panelB = panel;
if (!panelB || panelA == panelB)
return;
var contentA;
if( panelA )
contentA = 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(this, panelB, { duration: this.duration });
this.animator.start();
else
if(contentA)
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(e)
// this.element.focus();
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
// 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(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return 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();
return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, 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);
else
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 doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// 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(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { 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 == panels[i] )
return i;
return 0;
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return 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(this, opts, true);
// If caller specified speed in terms of frames per second,
// convert them into steps.
if (this.fps > 0)
this.interval = Math.floor(1000 / this.fps);
this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
else if (this.steps > 0)
this.interval = this.duration / this.steps;
// Set up the array of panels 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 == undefined)
h = 0;
if (p == panel || h > 0)
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "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're killing the timer, restore the overflow
// properties on the panels we were animating!
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";
else
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 yourpage you have this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Change it to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
Ken Ford -
Spry accordion widget not playing nicely with IE7
Good day.
The answer to this issue may be on this forum somewhere already, but I cannot take the time to scour the several hundreds of posts.
I've build and customized my first spry accordion, which can be viewed at http://www.brianfisherart.com/Bio/Contact/
In Firefox and Safari, it works perfectly! IE7 however has some issues. the panels get too large on mouseovers, and jumpy and even larger when opening lower level panels.
Just hoping to find a quick fix.
Thanx in advance.I'm certainly not going to do your search for you, but you might want to see if using the current version 1.6.1 works better.
http://labs.adobe.com/technologies/spry/
If that doesn't work, you might want to go to the Spry forum.
Of course, now that you've posted, I wonder if any of the links in that "More Like This" box apply?
Mark A. Boyd
Keep-On-Learnin' :-)
If you are reading this via email, be aware that it may not be an accurate representation of my message. Login to read the actual message and/or to reply. -
Spry accordion subpage troubles
Hello all,
I used DW CS4 to set up a spry accordion for my site (www.apposite.us) navigation menu. I was able to change some of its behaviors and appearance and am mostly satisfied, but I have two lasting issues:
1. I want the 'Home' tab to share the style and behavior of the rest of the accordion, but since it does not have any content, DW seems to interpret it as 'broken' and refuses to return the index page upon selection. I tried to fix the issue by defining an empty content panel, which fixes the 'broken' issue, but the change messes up spacing relative to the rest of the menu.
2. I want a particular panel to remain open upon selection of its content (right now, the panel reverts to collapsed when a content page is opened). I found a solution that involves working with several templates, but I would like to avoid this if at all possible.
Any suggestions on either improving the function of this accordion or setting up the menu more effectively using a different method would be greatly appreciated.
JaneSorry, my followup message should read:
Hi Gramps,
Your suggestion for part one of my problem worked (thank you!), but I am still having problems implementing part two.
As it is currently constructed, all pages are set up with the same template, which includes
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { useFixedPanelHeights: false });
in its code. Is there a way to make any selected content return its parent panel? Or is there a way to make an editable code region within the template (I have tried but not succeeded in doing this)? If the code you suggested
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { defaultPanel: 2, useFixedPanelHeights: false });
must be added to each linked content page, how do I achieve this without divorcing it from the template?
Thanks again,
Jane
Maybe you are looking for
-
Bought a mac mini and it's the wrong machine for my needs
HI all I bought the solid state drive mini mac - stupidly didn't realise that it had such low storage - then I made my biggest mistake - I left it in the box for 2 months over xmas as I wanted plenty of time to make the transition from my old mac pro
-
Microsoft word does not exist. Please installe Microsoft Word 2000 or later
Hi, I am running RoboHelp X3 and recently upgraded to Windows XP running Word 2003 and now cannot generate printed documentatation because of problems with Word. Despite changing the registry as suggested in another forum post (which I think was actu
-
Backed Up to External HD, Now can't put files back to C drive
Before my daughter's computer went in for service, I backed up her Itunes to an external HD. Tonight I moved the "Itunes Music Folder" from the ExHD to C:\Documents and Settings\Compaq_Administrator\My Documents\My Music\iTunes\iTunes Music, which is
-
TS1424 my i phone write connect with itunes
i write my password wrong more times and write connect with itunes
-
Create a new DB user like APPS user
Hi all, I want to create a database user that have [select] and [execute] privilages for all tables under all schemas in eBusiness Suite database instance. My aim, is to create a safe user that can execute any query like APPS user do, but he can not