Spry Accordion on mouse over or hover

I am searching the documentation to see how to make an
accordion respond to mouse over or hover over the panel title
rather than the default click behavior. I know it's possible as
Adobe does it currently on their homepage. Can someone point me to
any documentation discussing that?

Use the .js file from Adobe's homepage.

Similar Messages

  • Spry Menu bar mouse-over?

    Hi there,
    I have created a spry menu bar and it's almost finished but I am having trouble with these 2 things:
    1. Only the buttons that have submenus change when the mouse pointer moves over it. This happened when I applied a background image to the buttons.
    2. I don't want the background image to be applied to the submenu items. I want those to have just 1 color and another color when the mouse pointer moves over it. (If this last part isn't possible, I would just like the first part to happen: I want it to have a color and not the background image that I applied)
    Could you please have a look at my CSS and tell me what I did wrong? Or what I should add?
    Thank you very very much.
    EC
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    padding: 0;
    list-style-type: none;
    font-size: 155%;
    cursor: default;
    width: auto;
    font: "Bell MT";
    margin: 0;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 90%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 204.8px;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 204.8px;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 204.8px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #151515;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 2.5em;
    color: #C3C2C2;
    text-decoration: none;
    background-image: url(Skyline/images/Background%20Menu%202.png);
    background-repeat: repeat-x;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #414040;
    color: #C3C2C2;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #414040;
    color: #C3C2C2;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(Skyline/images/Background%20Menu%202.png);
    background-repeat: repeat-x;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #414040;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryAssets/SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryAssets/SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

    http://foundationphp.com/tutorials/sprymenu/customize2.php
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Delay Accordion tab mouse over

    Right now I have my accordion set to change on mouseover, however I would like it to only open if it is on a tab for a certain time.  Someone else on the forums did this with a tab spry, but I was wondering how to do this with an accordion.  Here is their solution for a tabbed one:
    Re: Need a delay for showPanel in the Tabbed Panels
    You basically want something like this then:
    gShowTabTimer = 0;
    function ShowTab(tab)
    gShowTabTimer = setTimeout(function(){ gShowTabTimer = 0; tp1.showPanel(tab); }, 1000);
    function KillTabTimer()
    if (gShowTabTimer)
    clearTimeout(gShowTabTimer);
    gShowTabTimer = 0;
    <li class="TabbedPanelsTab" onmouseover="ShowTab(this);" onmouseout="KillTabTimer();">
    How should I change my code and where do I insert it?
    Thanks Jacey

    still looking for any help?
    Jacey

  • How to make spry accordion open on mouse hover ?

    hi everybody i have just a simple question about spry accordion in cs4 it try to open it using mouse hover not onclick
    can anyone help me plz ?

    This is one way
    <!DOCTYPE HTML>
    <html>
    <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" onMouseOver="Accordion1.openPanel(0); return false;">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(1); return false;">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    Another way is to have a SpryEventListener. Look that up for further info.
    Ben

  • Spry Accordion Hover/Active Issue

    I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional.  The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded.  Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver.  Thoughts?
    The problem page:
    http://pauldhart.com/RideTTF_website/faq.html
    Spry CSS
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * 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 {
        border-top: solid 1px black;
        border-bottom: solid 1px gray;
        margin: 0px;
        padding: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        background-image: url(/content-opaque.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        color: #FFF;
        background-color: #300;
        font-size: 12px;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px;
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
        color: #FFFFFF;
        background-color: #003;
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #FFFFFF;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        background-color: #003;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    Layout CSS
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Donate Today!</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="_css/donatepage.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
      <div id="navigation">
        <ul id="donatemenu" class="MenuBarHorizontal">
          <li><a href="profile.html">home</a>      </li>
          <li><a href="theride.html">the ride</a></li>
          <li><a href="donate.html">donate</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">gallery</a>
            <ul>
              <li><a href="photo-gallery.html">photo</a></li>
              <li><a href="video-gallery.html">video</a></li>
            </ul>
          </li>
          <li><a href="faq.html">FAQs</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </div>
      <span class="AccordionPanel">
      <div class="AccordionPanelTab"></div>
      </span>
      <div id="faq-content">
        <div id="faq-accordion" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Is this ride still going on?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
            <div class="AccordionPanelContent">A: Saturday, September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
            <div class="AccordionPanelContent">A: Online registration will begin in May.  Check-in at 8:00am on September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Where is check-in?</div>
            <div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will the route be the same?</div>
            <div class="AccordionPanelContent">A: We have changed the route this year few a few reasons.  You can visit the route map to see.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by.  What time will you be on our street?</div>
            <div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
            <div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What does that give me?</div>
            <div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
            <div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis.  However, as we got larger, the costs associated with putting the ride together grew immensely.  The minimum donation allows for us to cover the costs for the ride.  However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
            <div class="AccordionPanelContent">A: Of course. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors.   Those will be announced at a later date.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
            <div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
            <div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are scooters allowed?</div>
            <div class="AccordionPanelContent">A: Eh, sure, why not?</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
            <div class="AccordionPanelContent">A: Probably.  We usually do not know about their appearance ahead of time. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
            <div class="AccordionPanelContent">A: A little</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
            <div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: There will.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is my cost?</div>
            <div class="AccordionPanelContent">A: General Public $40. Student $20.  Bikers the day of $40.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
            <div class="AccordionPanelContent">A: No.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
            <div class="AccordionPanelContent">A: Food - $5,  Drink - $2,  Beer - $5</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
            <div class="AccordionPanelContent">A:  Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: That’s awesome.  I love you.</div>
            <div class="AccordionPanelContent">A: Control yourself.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
            <div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
            <div class="AccordionPanelContent">A: Click here and fill out our application.  It’s a lot easier than taking the S.A.T.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Certainly!  Click here for our sponsorship packet.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
            <div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
            <div class="AccordionPanelContent">A: Yup</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
            <div class="AccordionPanelContent">A:  We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
            <div class="AccordionPanelContent">A: We admit it was slow.  We know, we know.  Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little.  Also, the new route allows us go faster through town.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
            <div class="AccordionPanelContent">A: The base will not allow that.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
            <div class="AccordionPanelContent">Content 34</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
            <div class="AccordionPanelContent">A: Negatory.  Every individual is his/her own team. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
            <div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the WHF?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
          </div>
        </div>
      </div>
      <div id="footer">This is the content for Layout Div Tag "footer"</div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
    </script>
    </body>
    </html>
    Screenshot of how it looks locally in Dreamweaver:

    SpryAccordion.css
    You have an error that is killing the rest of your code shown below in red.  Remove it.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px; /**suggest using 12px or more**/
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;  /**suggest using 16px or more**/
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    Nancy O.

  • Xcelsius/Dashboard Design - mouse over capability doesn't work/losing hover

    Hello there,  I am currently in a tough situation.  If any Xcelsius gurus can provide me with a solution, I would very much appreciate your help.
    I currently have a dashboard with pie chart component in the default view.  It has a radio button with two values.  The mouse over doesn't work when the dashboard is loaded.  However, when I make a selection in the radio button, the mouse over works for both the options.  I have noticed this is a bug but if anyone has a solution or way around it, let me know.
    Another issue - I have a 'All' view and 'Region' views in the menu bar.  When a user clicks on a particular Region, then clicks all and goes back to a region, I lose the drill down capability on the pie chart thats on the Region view.  initially, the mouse over and drill down works fine.  However, after going to the All view and coming back to a region, this capability is lost.  It acts the same way as the problem above.  User can't hover nor drill down.  If anyone has a solution to this, let me know.

    FYI this is the article on the main forum page:
    Announcement: New to Spry, or  the Spry forums?
    Hide Details
    Before you post a topic please verify that:
    You are using the latest Spry files
    The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
    After that we will have a look at your code.
    Ben

  • How do you create the 'cream pop-up info text boxes' that appear when you hover mouse over?

    Hi people,
    I really need to know how you create the 'cream pop-up info text boxes' that appear when you hover your mouse over an object on a webpage (and often in any program e.g. Photoshop) for more than a second. I need to know because the logo on my website is the navigation tool used to return to the homepage. It is always found in the top left so the user can always click it to return.
    The only problem is im the only one who knows that when you click my logo, you return to the homepage. I need one of these 'cream info boxes' (forgive my lack of knowledge) to appear so the user will figure it out.
    Thanks for taking the time to read my question...

    Using your code it should look like this where title attribute is in red:
    <div id="apDiv2"><a href="index.html"><img src="divs_dw/jtgd_logo_trans.png" alt="jtgd_logo" title="your description goes here" width="176" height="163" /></a></div>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • Why Does Spry Horizontal Menu Bar Move On Mouse Over In IE 6?

    Greetings:
    www.marketscholar.com
    Can someone please take a look at the pages in this site and
    help me figure out why the menu moves around the page when
    moused-over in IE6? It works fine for me on IE7.
    I am new to DWCS3, Spry, etc. and don't have the first clue
    how to fix this.
    Thanks in advance for any help.
    Glenn

    It sounds like the path to the support files - SpryMenuBar.js and/or SpryMenuBarHorizontal.css - is not correct.
    Gramps

  • I'm using Firefox on a Windows 7 OS, and I want to know how to disable the small window that appears when I hover my mouse over a tab, bookmark, etc.

    Okay, so when I'm using Firefox, say I have multiple window open, I hover my mouse over a window's panel at the bottom of the screen and a small box appears telling me about the webpage on that panel. The same thing occurs when I hover over a tab or a bookmark, it's very annoying and frequently blocks my cursor when I'm trying to work. How can I disable this feature?

    I do not use Adobe Reader, but use Foxit Reader in its place, and had the same problem. In Foxit Reader, I right-clicked in the area at the top where you would expect the toolbar to be (it was a blank area immediately above the displayed PDF file), and chose which toolbars to display and that has "stuck" and I still see the Foxit toolbars when I load a PDF file after system shutdown overnight. The only problem is that the area where you would expect the toolbars is still there and blank, but the toolbars that I selected appear immediately below that blank area. See if that works in Adobe Reader for you.

  • Hover mouse over a group photo & individual image pops up?

    My project is to do a mouse hover over individual faces on a group photo and display an image of what that person looked like back in high school.
    So far I am able to display the persons name as I hover over their face but don't know how to also display their individual image.
    I set up an image map with circular hotspots for each face.
    Please visit www.phsclassof1956.com/50th_group.html
    Any help would be appreciated.

    You could do this very easily with Tooltips on an Image Map.  See example below and mouse over Image Map of South America.
    http://alt-web.com/testing.html
    Scripts and documentation here:
    http://www.walterzorn.com/tooltip/tooltip_e.htm
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Under Tools/Error console, I keep getting a load of error messages. How do I stop this? Also, when I hover my mouse over something, I get a small blank box instead of expected info.

    How do I stop all of the error messages under; Tools/ error console?
    Why do I get a small blank box instead of the expected information when I hover the mouse over something?

    Hi,
    Try the following steps:
    1. Check windows updates.
    2. Try the Microsoft Fix it in this kb to remove previous install completely:
    http://support.microsoft.com/kb/2739501/en-us
    3. Reboot.
    4. Try installing again.
    This seems helpful on the issue.
    As always, thank you for your suggestion, Don:)
    Regards,
    Melon Chen
    TechNet Community Support

  • How do I disable the webpage preview that pops up when I hover my mouse over a tab?

    I don't know why this started today, but it is driving me nuts!
    I was surfing the net, when all of a sudden I noticed that whenever I hovered my mouse over one of my tabs, a (poorly rendered) preview of the webpage popped up from my mouse. I really do not need this feature. I don't need to have a mini-webpage preview of another tab.
    Please, how do I disable this feature?
    *note: I have disabled all my add-ons, and still nothing. I disabled my hardware acceleration, and still nothing. Please!

    I've never noticed that. Do these old threads shed any light?
    * [https://support.mozilla.org/en-US/questions/924758 Disabling the tab drop down preview window??] - FVD suite
    * [https://support.mozilla.org/en-US/questions/884412 How can I disable the tab preview when I hover over a tab?] - other add-ons/settings

  • Set Default Spry Tabbed Panel As Close Until Mouse Over

    Dear All,
    Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
    here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
    How to fix??
    Below is my SpryTabbedPanel.js
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
    this.element = this.getElement(element);
    this.defaultTab = 0; // Show the first panel by default.
    this.bindings = [];
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    Spry.Widget.TabbedPanels.setOptions(this, opts);
    // If the defaultTab is expressed as a number/index, convert
    // it to an element.
    if (typeof (this.defaultTab) == "number")
      if (this.defaultTab < 0)
       this.defaultTab = 0;
      else
       var count = this.getTabbedPanelCount();
       if (this.defaultTab >= count)
        this.defaultTab = (count > 1) ? (count - 1) : 0;
      this.defaultTab = this.getTabs()[this.defaultTab];
    // The defaultTab property is supposed to be the tab element for the tab content
    // to show by default. The caller is allowed to pass in the element itself or the
    // element's id, so we need to convert the current value to an element if necessary.
    if (this.defaultTab)
      this.defaultTab = this.getElement(this.defaultTab);
    this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
      return document.getElementById(ele);
    return ele;
    Spry.Widget.TabbedPanels.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.TabbedPanels.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.TabbedPanels.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.TabbedPanels.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.TabbedPanels.prototype.getTabGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length)
       return children[0];
    return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
    var tabs = [];
    var tg = this.getTabGroup();
    if (tg)
      tabs = this.getElementChildren(tg);
    return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length > 1)
       return children[1];
    return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
    var panels = [];
    var pg = this.getContentPanelGroup();
    if (pg)
      panels = this.getElementChildren(pg);
    return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
    ele = this.getElement(ele);
    if (ele && arr && arr.length)
      for (var i = 0; i < arr.length; i++)
       if (ele == arr[i])
        return i;
    return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
    var i = this.getIndex(ele, this.getTabs());
    if (i < 0)
      i = this.getIndex(ele, this.getContentPanels());
    return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
    return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
    return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.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.TabbedPanels.prototype.onTabClick = function(e, tab)
    this.showPanel(tab);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
    this.addClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
    this.removeClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
    this.hasFocus = true;
    this.addClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
    this.hasFocus = false;
    this.removeClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.ENTER_KEY = 13;
    Spry.Widget.TabbedPanels.SPACE_KEY = 32;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
    var key = e.keyCode;
    if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
      return true;
    this.showPanel(tab);
    if (e.stopPropagation)
      e.stopPropagation();
    if (e.preventDefault)
      e.preventDefault();
    return false;
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
    var stopTraversal = false;
    if (root)
      stopTraversal = func(root);
      if (root.hasChildNodes())
       var child = root.firstChild;
       while (!stopTraversal && child)
        stopTraversal = this.preorderTraversal(child, func);
        try { child = child.nextSibling; } catch (e) { child = null; }
    return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
    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.
      // Find the first element within the tab container that has a tabindex or the first
      // anchor tag.
      var tabIndexEle = null;
      var tabAnchorEle = null;
      this.preorderTraversal(tab, function(node) {
       if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
        var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
        if (tabIndexAttr)
         tabIndexEle = node;
         return true;
        if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
         tabAnchorEle = node;
       return false;
      if (tabIndexEle)
       this.focusElement = tabIndexEle;
      else if (tabAnchorEle)
       this.focusElement = tabAnchorEle;
      if (this.focusElement)
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
    var tpIndex = -1;
    if (typeof elementOrIndex == "number")
      tpIndex = elementOrIndex;
    else // Must be the element for the tab or content panel.
      tpIndex = this.getTabIndex(elementOrIndex);
    if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
      return;
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var numTabbedPanels = Math.max(tabs.length, panels.length);
    for (var i = 0; i < numTabbedPanels; i++)
      if (i != tpIndex)
       if (tabs[i])
        this.removeClassName(tabs[i], this.tabSelectedClass);
       if (panels[i])
        this.removeClassName(panels[i], this.panelVisibleClass);
        panels[i].style.display = "none";
    this.addClassName(tabs[tpIndex], this.tabSelectedClass);
    this.addClassName(panels[tpIndex], this.panelVisibleClass);
    panels[tpIndex].style.display = "block";
    this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var panelCount = this.getTabbedPanelCount();
    for (var i = 0; i < panelCount; i++)
      this.addPanelEventListeners(tabs[i], panels[i]);
    this.showPanel(this.defaultTab);

    You may be better off asking this question over at the forum dedicated to the Spry Widgets:
    Spry forum.

  • Why cant I see the blue guide lines of my paths when I hover my mouse over them?

    I'm using illustrator CC(2014) and all of a sudden I cant see the thin blue lines that show me where my paths and anchor point are.
    Below is a picture of the blue lines I am talking about. They don't appear when my mouse hovers over them, but does if I select them.
    Thanks
    Andy

    It's fine when i select the path.
    I am talking about when I hover my mouse over the path

  • The "text in a yellow box" that appears when I hover the mouse over a selection or help tag.

    The "help tag" (Or in most cases the unwanted tag)  often is in the way of what I want to look at.
    This is especially true when you are looking at an item that has it's own pop up giving you a description or information.
    When you hold the mouse over say.... a movie icon in XFinity, the icon of the movie expands and gives a brief synopsis, date and actors of said movie. 
    Unfortunately, I cannot read the synopsis for the "Help Tag" blocks all the content forcing you to try different ways of pointing to the movie icon so you can read parts of the discretion from every angle of approach then piece it altogether in your mind.
    I DO NOT want "help tag".  It is extremely annoying and time consuming ergo it des not "help" it hinders.
    Can it not be disabled (Like balloon help in OS 9) so you do not have to feel anger and frustration every time you see that yellow tag?

    Ooo, I did not notice the article was from 2007.  Thansk for pointing that out.  I don't think I am going to try it.  It seems that with all the "little" apps the seem to keep growing in numbers, someone will come up with a solid program that would wok through system prefs.  I would pay the normal $20.00 for an app like that.

Maybe you are looking for