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 :)
>

Similar Messages

  • 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 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 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 Vertical Menu and sub menus not working correctly

    I am designing a website for a client and cannot get the spry vertical menu and submenus to work correctly.  The submenus will show on the index.html page, but not on any other pages, or when I preview in browser. Should I make it a library item then add it to the other pages? I am not sure what I am doing wrong.  I appreciate your help!

    URL to your site please

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

  • 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">&copy; 2013 Betsymarvin.com | All rights reserved.</div>
                </div>       
            </div>
    <script type="text/javascript">
    <!--
    var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:2});
    //-->
            </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);

  • IE renders spry accordion glitchy and unusable (FF works perfectly)

    Hi everyone, I'm making my Dad a website and I've adapted a spry accordion into a large table that expands the row over mouseover. The problem is that internet explorer (only tested in 7 so far) renders it almost unusable, however it looks fine in good old firefox which I was developing it on. Since I've spent so much time trying to make this damn thing I'm hoping somebody could come up with a solution to make it behave as it does in FF?!
    Here's the link http://www.photronics.co.uk/spry.htm
    Thanks!
    Nick

    Your problem stems from
    Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabClick(e, panel); }, false);
    But you already knew that. You just wanted to test us
    To get the panel to open on a mouseover event have a look here http://forums.adobe.com/message/2980659#2980659
    Gramps

  • Spry Accordion jerky and not content filling correctly after refresh

    Hello.
    I have a page I'm trying to make a Spry Accordion work smoothly.
    I've tried options such as, fixedHeight fps  from 30 - 500, timer from 100ms to 1000ms, disabling Keyboard navigation, all working somewhat, BUT....
    When opening and closing the panels sometimes they open to "fill content" and others no.
    For example in the LEgal panel there is only one line. I would like that panel open to a height equal to the line height. Some other pabnels open partially then fully, and back again.
    The animation can be pretty jerky.
    I've duplicated the page and while playing with a JQUERY UI accordion it is pretty smooth.
    IS there anything I can do to get the Adobe Spry to work?
    http://corporate.fr/ce/clientsSpry.html
    Ooops never mind. I will post this anyway as maybe other noobs will resolve the problem if they do as I did.
    I stuck this
    In the container after the div not realising the default <script> is put at the very end of the mark up just before the </body>
    Two things learned, one when the Adobe document says the script has to go in after the mark up, that means not just after the div with the Spry but all the way at the end,
    and two: if you modify the Spry options, note the var acc1 and the string "Acc1" have to be replaced with your Spry ID, in both places.

    Hello to all,
    I have spent HOURS trying to figure this out....
    I know the above code is messy, but it does correctly do the accordions via innerHTML.  I have a dropdown on my page and when the user changes the input there, I call "doSpryData" and it is supposed to 1) reload XMLDataSet and 2) redraw the Accordion (I would like to have different data displayed on the same page depending on what user selects).  For some reason, it will not redraw the accordion and show the data after it has been done once. 
    I am really desperate so any ideas would be much appreciated!
    Cheers,

  • Spry Accordion panels and Google search

    Hello! I have about 30 pages with at least 15 spry accordion
    panels on each. I've just implemented a local customized google
    search and it looks like Google is able to pull pretty accurate
    search on both the panels and panels content.
    Once presented with the search results, can a user get to an
    OPEN accordion panel, that relates to his search? I hope I've
    explained it clearly, THanks!

    highedwebby wrote:
    > Hello! I have about 30 pages with at least 15 spry
    accordion panels on each.
    > I've just implemented a local customized google search
    and it looks like Google
    > is able to pull pretty accurate search on both the
    panels and panels content.
    Yes, this happens because all of the content is on the page.
    > Once presented with the search results, can a user get
    to an OPEN accordion
    > panel, that relates to his search? I hope I've explained
    it clearly, THanks!
    I've seen some scripts that highlight Google search terms, so
    I suppose that getting the search terms on the destination page is
    possible, but making that leap to the proper panel to open may be a
    little more difficult.
    First you have to figure out which panel the words are
    in,then you have to figure out what if the user is searching for
    three terms and each of those terms is in a different panel, or if
    only one term, and that term is in multiple panels? How would you
    expect that work out?
    You can highlight the words using code such as that discussed
    on this page:
    http://www.kryogenix.org/code/browser/searchhi/
    I'd guess that someone could reverse that code that finds the
    text and then take that find and then walk up the DOM tree to see
    if you are within an accordion panel and then show that panel as
    the default panel on the page.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • 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 images and gaps

    I have a url at
    http://www.postersforschools.com/testing/events.php.
    There are a few problems.
    I am getting scrool bars in the first panel. I assume this is
    because I have an image there but I am pretty sure this has not
    happened before. Also this same panel does not show up at all on
    Firefox. There is a space for it but no image. I have trashed my
    Firefox prefs and installed a new Firefox application.
    The Taste of Downtown panel has a large white space after the
    paragraph that I cannot get rid of. I do not see anything in the
    code causing this gap.
    I have set the panels to auto height using "var Accordion1 =
    new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights:
    false });"
    Thank you.

    I finally figured it out. 2 hours later! Hopefully this will
    help some other print/web designer. The image was CMYK from the
    print project it came from. Duh!

  • Spry Vertical Menu and other problems

    Hi all, I'm having a hard time using DW efficiently.
    Right now I have 2 or 3 problems on this webpage: www.novaparentalidade.com
    From the simpler to the harder:
    How can I make my background grad stay on the bottom of the browser? Right night is set in the CSS for "bottom" but all it does is stay on the bottom, but from the content area, not the browser windows..
    Solution?
    2nd: The background image I'm using in the content area, is not displaying in FF, Opera and IE. Works fine in Chrome and Safari.
    Solution?
    3rd: I've done a lot of searching in google and Adobe but couldn't find an answer.
    My SpryMenuVertical is not working properly in IE.
    What should I do?
    I'll leave you a copy of CSS and SpryMenu.css
    I really need help solving this
    Tks.
    Celso Santos

    I dont know if you have fixed the issues, but the bg image is setting at the bottom and shows up fine in FF.  You can play with setting the bg image to fixed, it then makes your main content area appear to be gliding over the bg...works great with a nice shadow on the container.
    Try reducing the width of your
    .twoColFixLtHdr #sidebar1 {
    See if that does not fix you up.
    Gary

  • 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">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",{useFixedPanelHeights:false, enableAnimation: false, defaultPanel: 0 });
    //-->
      </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

Maybe you are looking for