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

Similar Messages

  • How to make spry tab open or scroll horizontally.

    I saw a bunch of spay panels that scrolls horizontally. But
    dont know how this is achieved.
    There is a slide effect in Dreamweaver Behavior panel but it
    only goes up and down or vertically.
    I'm trying to create a bunch of Spry Tab panels, basically I
    hide the tabs using CSS display none property, then I add a "next"
    and Prev button, this allows the user to browse the panels without
    the tabs.
    The problem is, I need the spray content area to open or
    scroll horizontally instead of vertically or up and down.
    Any ideas? Thanks
    Patrick

    Webethics wrote:
    > I saw a bunch of spay panels that scrolls horizontally.
    But dont know how this
    > is achieved.
    > There is a slide effect in Dreamweaver Behavior panel
    but it only goes up and
    > down or vertically.
    >
    > I'm trying to create a bunch of Spry Tab panels,
    basically I hide the tabs
    > using CSS display none property, then I add a "next" and
    Prev button, this
    > allows the user to browse the panels without the tabs.
    >
    > The problem is, I need the spray content area to open or
    scroll horizontally
    > instead of vertically or up and down.
    >
    > Any ideas? Thanks
    Sounds like you really should be using the Spry Sliding
    panels:
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    You can make them go vertical, horizontal, or even a
    combination. This widget isn't built into Dreamweaver, so you'll
    need to add the appropriate markup manually. FOr more info check
    out the Spry API docs:
    http://labs.adobe.com/technologies/spry/articles/data_api/index.html
    Select Sliding panels on the left, and then start off with
    Overview.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • How to make Spry Accordion Content Panel with a variable content fit

    I have a problem.  The content panel has a fixed length so I changed it to auto so I can view all the content of each panel.  The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels.  So as you click from one to the other, some are practically empty with all the space, while others seem full. 
    The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size.  This is the way I have the CSS for that.  How can I achieve the variable heights?
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 5px 4px 6px 15px;
    height: auto;
    background: url(../images/backgrcolor0033.png);
    color: #FFF;
    Thank you.

    <!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">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
    </body>
    </html>
    Gramps

  • Spry accordion open on mouseover with extra content if too fast

    So I already did this and got the spry to open with a hover,
    Go to line 213 (or thereabouts) to find
    Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    and change that to
    Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
    but if you move too fast up and down the menu it opens the other contents and leaves it there see webpage:  move your mouse fast up and down the menu to see.  How do I make sure it is completely closed.  I noticed this does happen to on a Click if you switch too fast between tabs.
    http://www.abbottsportslincoln.com/index.php
    Thanks for any help!
    Jacey

    so is there really no way to fix it? My client already has that, and it's not practical, we want to be able to see all the options for the sub-menus open when we are in one of the tabs.
    Let me know if there is really no way around it.  I'm actually pretty sure that the background for the next tab is stuck behind the content.  Take a look at this site and see how they have a delay in there accordion.
    http://www.targetcenter.com/
    Thanks, Jacey

  • How to make photoshop cs4 open dng files?

    How to make photoshop cs4 open dng files?

    They are opened by Photoshop through the ACR plug-in you should make sure the ACR 5.7 update is installed for your CS4.
    Adobe - Photoshop : For Macintosh
    Adobe - Photoshop : For Windows

  • How to make no panels on Spry accordion open by default?

    I have a Spry Accordion with several panels.  I want the default behavior for none of the panels to be opened until one is clicked.  Currently the default behavior is for the first panel to be automatically expanded when the page is first visited.  How do I correct this?

    It's here:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    Under the sub heading "starting with all panels closed".
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    Martin

  • Spry Accordion open on page load

    How do you stop the Spry Accordion from being open while the page is loading - as soon as the page loads the Accordion closes to the way it has been designed - it is just annoying!

    Starting with All Panels Closed
    This feature is only supported when using variable height panels, so  you must pass a false into the Accordion's constructor for the  "useFixedPanelHeights" constructor option, and a -1 for the  "defaultPanel" option.
    Gramps

  • How to make the scrollbar function with mouse scroll wheel?

    Is there a way how to make my content scroll even with the mouse scroll wheel?... I have to edit the coding??

    Hey!
    You shouldn't have to edit any code.
    There is an active player bug surrounding this issue however, which causes the following:
    1) It should work on windows.
    2) It may not work on Mac.
    We're continuing to pursue this issue, we know it's important to our users.
    Thanks,
    Tara

  • How to make only some open Invoices visible in Incoming Payments Wizard ?

    I want only to make only some Open Invoices visible in Incoming Payment. Can i use series (Document Numbering) ? Lets say I have SBO in 2 cities and want to user of city A only se open invoices of city A in incoming Payments , and user of city B to see only invoices created in city B . Any ideas ?

    You may use Project code to reach your goal.
    Thanks,
    Gordon

  • How to make WMV files open in in Windows Media Player not Flip4Mac/QT

    I just installed Safari 4. With Safari 3 when I clicked on a WMV file on a web site it would automatically open in Windows Media Player. I liked this arrangement just fine. When I installed Safari 4, instead of this happening WMV files started to download instead. I installed Flip4Mac and now they play in QuickTime but I don't like the controls... i.e. I cannot adjust the volume except from the keyboard.
    Is there any way to make WMV files open in Windows Media Player the way they used to in Safari 3 instead of either downloading or opening in QuickTime with Flip4Mac?

    Not very easy but it could be done.
    If the file opens in QuickTime (via Flip4Mac) you can use the Movie Inspector window to "find" the URL. Then open that URL directly in WMP.
    You could also dig through the page source code or use the Safari Activity window to find the URL.

  • How to make save dialog open up folder where document originates as default

    Hello
    I was wondering if there is a way to make save dialog open up the folder where document originates as default. I feel Like I am wasting a lot of unnecessary time navigating through menus saving certain documents.
    Example : I open an Excel document in a folder called 2009. I make some changes and then do a "save as" -- I want it to automatically bring me first to the folder where I opened it, not the last place where I saved to.
    I recall being able to set this preference in macs a looong time ago. Now I can't seem to find it. Thank for your help

    Rick,
    Sorry about the misgiving adresses, folders and access rights. My question is not about these three (they were just here to tell the story). You're perfectly right to say that in a local network, there's not need to complete the full IP or ".com" name of the PCs (even if it works all the same).
    When I said "of course" for the perms, it was just to mean, in the same way, that it's not this kind of problems here.
    My question is much more a human/mac graphic interface problem than a network problem. I want the people (as well as myself) to be able to go in a folder on the pc network with a simple click on an smb link in an email message (as they do now on an ftp or afp link).
    Thanks for the bother,

  • How to make Spry Collapsible Panels open one at a time?

    Hello,
    I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

    GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
    I was told you would probably help me find the right answer by Hans-g!
    Thanks again!

  • How to make Spry menu and submenu backgrounds different

    Hi all. I have a horizontal spry menu bar, and i'm using a gradient image for the background of the main menu, but I want the submenu to just be a solid color. I figure i should just be able to use css for this solid BG, but I can create an image no problem if need be. I just think it looks unprofessional to have multiple segments of a horizontal gradient stacked vertically. I know this is possible, the second to last example on this link demonstrates but doesn't explain:
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
    I would greatly appreciate any available help on this subject!  Thanks again!

    Thanks for asking, no that is not my complete css file. Those are only *additional* lines to place adjacent to existing styles in your "SpryMenuBarHorizontal.css", but in each case as the next style, in the location I have indicated. Here, I'll put my complete file here for you:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* 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: 100%;
         position: relative;
         text-align: left;
         cursor: pointer;
         width: 8em;
         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: 8.2em;
         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: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
         position: absolute;
         margin: -5% 0 0 95%;
    /* 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 #CCC;
    /* 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 0.75em;
         color: #333;
         text-decoration: none;
    ul.MenuBarHorizontal ul a {
         background-color: yellow;
    /* 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: #33C;
         color: #FFF;
    /* 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: #33C;
         color: #FFF;
    ul.MenuBarHorizontal ul a.MenuBarItemHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarSubmenuVisible {
         background-color: green;
    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(SpryMenuBarDown.gif);
         background-repeat: no-repeat;
         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-image: url(SpryMenuBarRight.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 a.MenuBarItemSubmenuHover
         background-image: url(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(SpryMenuBarRightHover.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
         position: absolute;
         z-index: 1010;
         filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
         ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;
    .fleft {
         clear: none;
         float: left;
    The idea with putting the new styles *after* the original styles is that they are logically similar to but 'sub' styles to existing styles. In fact, you could probably put them way at the bottom, but if you wanted to edit them you might not find them again easily. I was trying to keep similar style rules together.
    Z

  • How to make a menu (opened by an on click event) stay open on the following pages

    Hi,
    I have a side menu that shows the main headings only, when clicked it displays the rest of the menu using and slide effect, with an option to close the menu, on reversing the slide. This all works perfectly but what i want to be able to do is, when a users opens a menu and then uses that menu to navigate to another page, on that new page i want that menu that was opened to stay open on this next page.
    The code i have so far is below:
    // the function for the effect
    function MM_effectBlind(targetElement, duration, from, to, toggle)
        Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    // the function to ensure the menu is unopened on page load
    function myFuncDisplay (){
    document.getElementById ('menu1').style.display='none';
    document.getElementById ('menu2').style.display='none';
    document.getElementById ('menu3').style.display='none';
    document.getElementById ('menu4').style.display='none';
    document.getElementById ('menu5').style.display='none';
    <body onload="myFuncDisplay ();">
    // the first menus code in the side menu that creates the on click and close menu actions
    <p onclick="MM_effectBlind('menu1', 1000, '0%', '100%', false)"  onMouseOver="this.style.color='#FFFFFF';" onMouseOut="this.style.color='#333333';">Menu One </p>
        <div id="menu1">
              <p class="close" onclick="MM_effectBlind('menu1', 1000, '100%', '0%', false); " onMouseOver=" this.style.color='#333333';" onMouseOut="this.style.color='#FFFFFF';"> close menu </p>
            <p><a href="firstLink.php">First Link</a></p>
            <p><a href="secondLink.php">Second Link</a></p>
            <p><a href="thirdLink.php">Third Link</a></p>
    I have tried setting a variable in the on click event then in the function myFuncDisplay() doing if else clauses to check if the variable was set and if so displaying the div as block in that function, expecting just that menu to display opened in sunsequent pages, it didn't work, itstead it displayed all menus open?
    Please can someone help me with a suggestion of how I can make this work, thank you in advance, i look forward to any replies.

    Hi,
    thanks for your reply, i am not actually using the spry menu, i am using the 'blind' effectthat I have adapted as per the code given, I wanted to make a menu that would open on click and the effect i have used works well, now  however I want the effect to remain open on different pages, as explained. i am looking for a way of adapting the function that makes the rest of the menu hidden on page load. So on page load the menu is hidden as per adapted code, apart from the menu heading, if the menu heading is clicked the menu opens, with an option to close it, if the user clicks on a link in the menu the new pages loads and the menu is   closed as per the onload instruction , I want a way to distinguish if the menu was clicked in one page it will recognise that and in the next page will not hide that particular menu until the user closes it themselves.
    Hope that makes it a bit clearer? look forward to any further help.

  • How to make InDesign files open by default in CC, not CC 2014

    Now that I have 2 version of InDesign on my mac (10.8.5 - Mountain Lion), both CC and CC 2014, how can I make my .indd files open by default in CC instead of the new 2014 version?
    I've tried selecting a .indd file, opening the Info panel and changing the "Open with:" option to "Adobe InDesign CC.app 9.2.2.103". I then click Change All.. and confirming. However, this does not work. Double-clicking any .indd file still opens in the 2014 version and the Info panel for any .indd file still shows the 2014 version as the "Open with:" default.
    Any ideas?

    Here are three methods. The first two are free but don't give you exactly what you want. The third requires a third-party utility and works perfectly.
    (1) Right-click on a file and from the menu choose Open With... then choose the version of InDesign you want.
    (2) Create an alias for your InDesign versions and place them on your Desktop. Drag your InDesign file onto the alias of the version you want to open.
    (3) Purchase Soxy from Rorohiko:
    Soxy | Rorohiko Workflow Resources
    NOTE: Rorohiko says the version that supports InDesign CC 2014 is coming soon, they're waiting to test the new version before they release it.

Maybe you are looking for