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;

Similar Messages

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

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)

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

SPRY accordion and tabs not displaying in IE6

Hi everyone:
Even after clearing up some validation errors in my HTML, I
am experiencing issues with a SPRY accordion and another page with
a Tabbed SPRY widget not appearing in IE6. The pages all work fine
in IE7, Firefox and Safari. I would greatly appreciate anyone
taking a look (link below) and letting me know if you see any
errors or know of a bug I have not found the fix for. My CSS
validates 100% so I don't think I have made any style sheet errors.
Thanks very much.
www.ducksroofing.com
K.

Hi all:
After some more tinkering, I have discovered the real issue
is that my containing element is not containing the entire page and
therefore cutting off my SPRY elements on the pages which have
them. This is causing the SPRY widgets to fall apart and, of
course, for the page to only scroll partially down.
Does anyone have a suggestion as to why the SPRY tabbed
element and accordion element on my pages is not nesting within
document flow and remaining with the containing div? I appreciate
your help.
Once again, url is: www.ducksroofing.com
K.

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

.js update of spry accordion panel tab data for countdown functionality

Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!

Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.

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

Spry Accordion closed tabs by default

Hi, I have some issues with my spry accordion widget. I'd like to have all my tabs closed by default by using this code:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("linklist", { defaultPanel: -1} );
</script>
and seems that this doesn't work. All my tabs are closed thats true, but, when I click on them, they doesn't open at all. When I change it to "defaultPanel: 0" the widget works fine, but the first tab is opened as the code says.

You are addressing Accordion1, but not showing that id in the variable construction. Here is a similar implementation where all the panels begin closed:
<script type="text/javascript">

</script>
Usually, in the default Accordion Widget, the id of the Accordion is also used for the variable that constructs the widget. Note that I have also inserted the 'useFixedPanelHeights: false attribute:value pair.
Beth

Spry Accordion first tab

Hi, I am working on a Spry Accordion and I was wondering if it was possible to select which tab would be open when the website loads?

var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: -1 });

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 Panel Tab Link (not just the text but the whole tab)

I want the whole tab to be a link just like when you click on it and it opens instead of opening can i have it just link. I can get it so the text links, but when I put the <a> outside the div tab it first gives me validation errors and second my hover doesn't work, but I can get it to link I just want my hover to work. I need something like this
<div class="AccordionPanelTab" onclick=......... >
But if you're really up for a challenge I would love it if,
The first tab click opened up the content and the second time you tab clicked it links to a different page.
I'm using this as a side menu bar
any help would be appreciated
Thanks Jacey

<div class="AccordionPanelTab"><a href="about.html" onclick="window.location=this.href;return false;">Label 2</a></div>
Gramps

Spry Accordion Menu Tab Link css - totally confused

Similar Messages

Maybe you are looking for