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)

Similar Messages

Spry Accordion menu opens on page load then closes

Hello,
I'm having issues with a SPRY Accordion menu loading with all of the tabs open, then closing once the page finishes loading.
Example page is here:
http://thesparkmachine.com/mca2009/academics
(site is still being worked on, so forgive any oddities)
Is this something that is occurring because of the large amount of material loading on the page at once? The site is Joomla!-based, and there are close to a dozen modules on the page, plus an random background image script.
Any advice would be helpful.
Thanks!

I see you have also fixed your menu sections linking..
But i still wanted to give you some advice on why it opens and closes.
If you check out the source of your page, you will see that the constructor for your accordion is at the bottom of the page. When the browser loads the page, it parses from top to bottom, so it has parsed the accordion markup. But not yet the constructor for the accordion, so once it finally done with parsing the rest of the markup it finds the constructor and executes it.
What would have helpt, if you just moved the <script> with the constructor to directly under the accordion. So when the accordion markup has been parsed the brower directly executes the scripts.

Spry accordion menu

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,
Dave

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

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;

How do I make my Spry Accordion menu scroll *with* my webpage?

Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
HTML of same div class:
<div class="contentright">
                            <div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?

Here is my HTML Coding
<html>
    <head>
        <title>BetsyMarvin.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <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="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
                <span class="toplogo"></span>
                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
            </div>
            <div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="theme_02_design.html">Home Page</a></li>
                    <li><a href="blog_design.html">Blog</a></li>
                    <li><a href="lessons_design.html">Lessons</a></li>
                </ul>
                <div class="content">
                    <div class="contentleft">
                        <h1>Welcome to my Website</h1>
                        <img class="imageright" src="images/faith reason.jpg" border="0" />
                        <p>text</p>
                    </div>
                    <div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
                                    <div class="accordion_340_tab">CONTACT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                      <p> <a href "mailto:[email protected]"> Email</a></p>
                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">ABOUT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <p>text</p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">PASSIONS</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />
                                             <p>text</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">© 2013 Betsymarvin.com | All rights reserved.</div>
            </div>
        </div>
<script type="text/javascript">

        </script>
    </body>
CSS Style Sheet
body {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #545454;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a          { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover    { color: black; }
.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
    width: 980px;height: 145px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
.bannernav {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
    color: white;
    text-decoration: none;
.bannernav a:visited {
    color: white;
.bannernav a:hover {
    color: #ECBB7B;
.toplogo {
    position: absolute;
    z-index: 100;
    padding-right: 0px;
    float: right; margin-left: 675px;
    padding-top: 10px;
.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 10px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;
    z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #CCA72F;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
.leftnavigation a:visited{
    color: #5C4C17;
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
    width: 400px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;
.imageleft {
    margin-right: 10px;
    float: left;
/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #cfcfcf;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    color: #666666;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
    overflow: hidden;
    width: 255px;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    color: #CCA72F;
    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);
.AccordionPanelContent {
    overflow: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
    background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
    background-color: #000000;
.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;
    useFixedPanelHeights = null;
.AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);

Spry Accordion Menu - Content Height

Hey everyone,
I have a (hopefully simple) problem. I have a spry accordion with 3 tabs. Two of them have the same number of lines in them, but the "what" tab only has 2 lines so there's a lot of white space underneath it. I've tried changing
this.useFixedPanelHeights to false in the spry java script... and it does resize the content area properly, but the open and close on mouseover gets really messed up. Things don't open when they should, and close randomly. It makes it impossible to navigate. I've tried several other things as well, but nothing seems to fix the problem
The website:
http://jmb2-arch.com
Thanks in advance for any help!
-Cameron

You might try playing with the height specification as stated in the Spry CSS:
.AccordionPanelTab { -moz-user-select: none; -khtml-user-select: none; height: 76px; border: 2px solid #027dc3; width: 76px; color: #027dc3;
Setting a height is usually not necessary, unless there is a specific design reason (as there is here, with the main tabs and the sub tab area apparently intended to be identically sized).
Chris

Spry Accordion menu - How do you make tabs without content and make panel height fit the content?

I have an Accordion Menu on my site and I would like to put a tab at the top that links to my homepage when clicked, instead of sliding open to show a content panel. I don't have any extra info to put in the content panel, so it would look kind of redundant to have it there.
Also, each panel has a different amount of content, but they all default to the same height to fit the largest content. I want them to fit to the content of each panel. The only thing I've read said to set the height of the content panel to 100% in the CSS, but it didn't change anything.
Thanks!
Andrea
http://www.andreamutsch.com

You make it look so simple but it doesn't seem to be working for me...
My first thought with getting rid of the tab content was to simply delete it, but when I do that I get a warning that 'The structure of the accordian appears to be damaged'. Then when I preview none of the tabs will open.
This is what my accordian structure looks like with the tab content code deleted...
<div id="Accordion1" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">home</div>
        </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">graphic design</div>
        <div class="AccordionPanelContent">
          <p align="center">identity </p>
          <p align="center">print </p>
          <p align="center">packaging</p>
          <p align="center">web </p>
        </div>
      </div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">photography</div>
        <div class="AccordionPanelContent">
          <p>traditional</p>
          <p>digital</p>
          <p>retouch</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">contact</div>
        <div class="AccordionPanelContent">
          <p>email me</p>
          <p>design quote</p>
          <p>purchase photography</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">resume</div>
        <div class="AccordionPanelContent">download resume (.pdf)</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">design blog</div>
        <div class="AccordionPanelContent">2009</div>
      </div>
Also, getting rid of the height in the CSS had no effect (I did this before I did the above)
Below is my current CSS for the Panel Content
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: large;
    background-color: #633408;
    font-weight: normal;
    word-spacing: normal;
    text-align: center;
Also there is a note in the CSS that says this...
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
I'm not sure how accurate that is since I don't have a height in there and it worked (although not how I wanted) but I just thought I would throw it in.

Spry Accordion Menu and Frames?

I have created a simple two column layout. On the right hand
side I have placed an accordion spry menu which seems to work well.
However rather than click on any one of the links and go to a new
page I want the new content to appear on the same page in another
frame.
Now from what I understand the use of frames is not W3C
compliant anymore and I know there is some way with DW CS3 to do
this, but this being my first real use with DW I'm not sure how.
Could someone please advise what the best solution for me
would be or at least point me to some online tutorial?
Thanks :)

> Now from what I understand the use of frames is not W3C
compliant anymore
That's not correct. But frames are a dirty trick to play on
your visitors,
and on yourself.
> Could someone please advise what the best solution for
me would be or at
> least
> point me to some online tutorial?
The best solution would be not to use frames. Other than
that, we would
really need to know more about what you are trying to
accomplish to direct
you to some learning resources.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"art_is_my_life" <[email protected]> wrote
in message
news:f8n86g$3ud$[email protected]..
>I have created a simple two column layout. On the right
hand side I have
>placed
> an accordion spry menu which seems to work well. However
rather than click
> on
> any one of the links and go to a new page I want the new
content to appear
> on
> the same page in another frame.
>
> Now from what I understand the use of frames is not W3C
compliant anymore
> and
> I know there is some way with DW CS3 to do this, but
this being my first
> real
> use with DW I'm not sure how.
>
> Could someone please advise what the best solution for
me would be or at
> least
> point me to some online tutorial?
>
> Thanks :)
>

Accordion menu spry link not working

I built an accordion menu spry using Dreamweaver CS5. I noticed that the navigation labels on the accordion menu cannot be linked to pages. Please see the Overview link on the accordion menu and notice that it does not not go to 'overview.html' as I added in the code. What am I doing wrong?
Thanks. Any help is greatly appreciated.

I see this in your spry css file - you might try removing the two user-select entries
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
     background-color: #FFF;
     border-bottom: dotted .5pt gray;
     margin: 0px;
     padding: 6px;
     cursor: pointer;
     -moz-user-select: none;
     -khtml-user-select: none;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 9pt;
     background-image: url(../images/mykcurve_expand.gif);
     background-position: right;
     background-repeat: no-repeat;

Wobbling image under accordion menu

So the saga continues :)
I am using an accordion menu (about 150px x 300px) on the
right hand side of my page. It has three items when each one opens
downward they contain separate links within. Directly beneath this
accordion menu is a simple jpeg image. The problem is when I use
the accordion menu the image underneath it (not a background image,
it's positioned under the menu) wobbles as the accordion effect
animation of opening takes place. It looks almost as though the
accordion effect is coming out from the top of the image (which it
is not because the image is placed some distant from the bottom of
the menu.
Is there a way I can prevent this from happening?

Well it seems this anomaly only occurs in Safari. What I have
noticed in Firefox though is a white dotted border goes around the
spry accordion menu after it's been activated, presumably because
it's Ajax. I'm not sure how to prevent that from happening.
So far I'm not terribly satisfied with this spry
widgets.

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

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">

</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(or Template?) error

I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
It's telling my contentA is null.
Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

codeOutsideHTMLIsLocked="false" -->
That says that anything outside of that area can't be modified, right?
Nope. It says anything outside that area is editable, i.e., it's treated as an editable region. This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page.
Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

Spry Accordion just stays open in IE8

I'm using Spy 1.6.1 and Dreamweaver CS5. The Spry Accordion menu on the left side of my page looks funky in IE and it's absolutely kiiiiiilling me.
~o~ On a PC using IE8 the panels all begin in the open position at first load and won't close no matter what. This is WRONG!
~o~ On a Mac using Safari, FireFox and Opera the accordion is working fine with one panel opening at once. This is CORRECT!
Ahhh I'm pulling out my hair. Previous threads have mentioned a similar problem but their solution has been to upgrade to Spry 1.6.1 and that's how I started off so presumably no issue for me.
So what the heck am I doing wrong? Thousand thanks for a moment of your time!
The website with problems: www.documentarymakers.com
Index of Spry Assets for this site: http://www.documentarymakers.com/SpryAssets/
Adam

Change the following line in your main document
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
to
<script src="http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js" type="text/javascript"></script>
Either the online version of the JS is corrupt or there is a problem with version 0.17, Adobe uses version 0.15
Gramps

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

Using an image as label in Spry Accordion Menu

Similar Messages

Maybe you are looking for