Opening Accordion Panels w/ MouseOver

I would like to customize an accordion widget so the panel contents open when I move my mouse over the panel tab. The default setting opens only with mouse click. How can I change this? Is it possible to add Dreamweaver behaviors to Spry widgets, or will I need to change the code directly? Thanks.

check this sample here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
this has been specifically programmed to open and close using onclick, but i guess it would work the same for onmouseover

Similar Messages

Using text links to open accordion panel

How do I use text links (from the page's main menu) to
programatically open a particular panel.
here is the page:
http://debrankin.com/tee/SITEDESIGN/
for example: I want to click on "Resumes and Cover Letters"
in the left hand menu to open the first accordion panel (by the
same name). I have this set this page so that all panels are closed
initially.
i know i'm missing something because this obviously does not
work: i've looked for documentation and this issue is inadequately
addressed!

twinflame wrote:
> i know i'm missing something because this obviously does
not work: i've looked
> for documentation and this issue is inadequately
addressed!
Not really. The problem is that you have attempted to create
a
JavaScript object called accordion1 before the accordion HTML
is even
loaded into the browser. Moreover, the script that
initializes the
accordion is already in your HTML where it should be (after
the
accordion), but it uses Accordion1, not accordion1
(JavaScript is
case-sensitive.
Remove this after your menu.
> <script type="text/javascript">
> var accordion1 = new
Spry.Widget.Accordion("Accordion1");
> </script>
Change the links in the menu to Accordion1.openPanel(0),
etc., and it
should work.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

How do I Hide open accordion panels, tooltips, etc. in Design view in Muse

I am adding tooltips and accordion panels in Muse. The problem is that, when I am editting the site in Design view, I cannot get the tooltips and panels to close... and so any other objects, text, etc is hidden by the open tooltip / accordion panel... I worked around this somewhat by creating another element in the accordion panel that contains no text, and so shrinks the whole accordion when that element is active, but this is cumberson, and I can find no comparable work-around for tooltips...

AppleScripts can be saved as run-only, which will keep a casual user from seeing the code, but there isn't a way to keep plain text from being seen. You should never place sensitive information in plain text in your script/application, or even use them with global variables, since those are also saved with the script.
The security shell utility can be used to get a password from the system keychain, for example:
getKeychainPass("Apple") -- example
on getKeychainPass(itemName)
return text 2 thru -2 of (do shell script "security 2>&1 >/dev/null find-generic-password -gl " & quoted form of itemName & " | awk '{print $2}'")
end getKeychainPass

Open Accordion Panel when on Active Page

I am trying program a panel tab to open based on which page
is active ... For instance I have five panels and each panel has
from one to 5 links. I would like to have the panel tab to stay
open if I am on that links current page ... Does anyone have the
time to explain how to do this?

Both the accordions should show the same colours and operate the same way. Yet on one page, the colours don't change and the accordion seems to be in a box (there is an outline all around).
It shows up the same in either firefox or IE. I didn't know I was using an old version of Spry, so will try upgrading and see what happens. Thanks for pointing that out.

Opened accordion panels in load

I've got 5 panels with links inside the panel content; on
initially loading the page, all panels appear opened for a second
ot two, then collapse, leaving panel 0 open.
Revisiting the page, they appear collapsed withe panel 0
open.
How can I make sure they are collapsed when the page
initially loads?
Frustrated, to say the least.

Its probably the coding of your page that is messed up.
Place the <script> element containing your constructor
right under your accordion. and se the defaultpanel to -1

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

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

Globally open and close all accordion panels

Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.

Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==--

Spry accordion panel won't open by default

Here is my code for spry accordion, I am trying to open the 1st inside accordion panel by default, i f not by default, as soon as its parent is opened, but none of them seems to work. Please let me know where I am going wrong.
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/view/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="/csm/view/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="main2ndAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;">System</a></div>
<div class="AccordionPanelContent">
<a id="kernelParamsAccordion">Kernel Parameters</a><br/>
<a id="diskUsageAccordion">Disk Usage</a><br/>
<a id="fileSystemAccordion">File System Statistics</a><br/>
<a id="osPatchesAccordion">Os Patches</a><br/>
<a id="networkAccordion">Network</a><br/>
<a id="userLimitAccordion">User Limit</a><br/>
<a id="environmentVariablesAccordion">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="productName" style="color:#ffffff;background-color: #2F5882;"></a></div>
<div class="AccordionPanelContent">
<a id="odbcAccordion">ODBC</a><br/>
<a id="bitmodeAccordion">Bitmode</a><br/>
<a id="versionAccordion">Version</a><br/>
<a id="licenseInformationAccordion">License Information</a><br/>
<a id="dumpshrAccordion">Dumpshr</a><br/>
<a id="dblistAccordion">DBList</a><br/>
<a id="showtimeAccordion">Showtime</a><br/>
<a id="serverStatusAccordion">Server Status</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("main2ndAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
Also the System panel, with id="systemAccordion" takes 2 clicks to open, every 1st time the page loads

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
#Accordion2 .AccordionPanelTab {
     background-color: #CCCCCC;
     color: #FFFFFF;
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/healthicon.gif">Health Check</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/conficon.gif">Configuration</div>
    <div class="AccordionPanelContent">
         <div id="Accordion2" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">System</div>
             <div class="AccordionPanelContent">
            <a href="#" id="kernelParamsAccordion">Kernel Parameters</a><br/>
            <a href="#" id="diskUsageAccordion">Disk Usage</a><br/>
            <a href="#" id="fileSystemAccordion">File System Statistics</a><br/>
            <a href="#" id="osPatchesAccordion">Os Patches</a><br/>
            <a href="#" id="networkAccordion">Network</a><br/>
            <a href="#" id="userLimitAccordion">User Limit</a><br/>
            <a href="#" id="environmentVariablesAccordion">Environment Variables</a><br/>
          </div>
         </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">Product</div>
             <div class="AccordionPanelContent">
            <a href="#" id="odbcAccordion">ODBC</a><br/>
            <a href="#" id="bitmodeAccordion">Bitmode</a><br/>
            <a href="#" id="versionAccordion">Version</a><br/>
            <a href="#" id="licenseInformationAccordion">License Information</a><br/>
            <a href="#" id="dumpshrAccordion">Dumpshr</a><br/>
            <a href="#" id="dblistAccordion">DBList</a><br/>
            <a href="#" id="showtimeAccordion">Showtime</a><br/>
            <a href="#" id="serverStatusAccordion">Server Status</a><br/>
          </div>
         </div>
       </div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js" ></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1, useFixedPanelHeights:false});
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: 0, useFixedPanelHeights:false});
</script>
</body>
</html>
Gramps

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

Allow accordion panels to open in more directions.

...to be able to have accordion panels that open upward to push page content down and 'reveal' content that appears to exist above the main load page.
Or have panels also open to the left or right for stylistic choices.

Totally agree...
I am trying to use an accordian to add news stories chronologically... so the latest story has to be on top... currently clicking + at the bottom then dragging the new accordian element to the top... also I would like to facility to "dim" the other stories...
Some issues too in applying format universally... not sure that graphic styles is working right for me

Link to move to specific accordion panel AND open this panel.

hi
would like to create a list of links at the top of a page,
the accordion is at the bottom.
i would like to be able to click on a link, that will then
move to the appropriate accordion panel (have been able to do this
by adding ID's to each panel.) BUT i would also like the panel to
open as well. at the moment when you click on the link at the top
of the page, you move to the appropriate panel, but then have to
click on the panel to open.
any way to get both actions with the one link?
thanks!
example is here, list of links on the right, accordion at the
bottom.
http://batemansbayosteopathy.com.au/testsite/osteopathy.php

hi diana,
this is very close to what i require, and tried this route
last night. however the situation that i am in is that the links
are further away from the accordion. The code you linked functions
properly, as it opens the correct tabs, but the user does not see
the tab opening (as the accordion is much further down the page!)
what im after is a link that when clicked, opens the correct
tab (as the link you sent does) BUT ALSO moves the page to show the
accordion and the (now) open tab.
i linked to my example site in an earlier post.
hope this is explained clearly enough!
thanks!

Open Particular Panel on Accordion in Detail Region

I am using the accordion to display details (detail region)
when a row on a separate table is selected. Panel 3 is showing
after I select one row on the table and then click on Panel 3 which
is the behavior I want and expect, but if I select another row on
the table, I want Panel 1 to be shown NOT Panel 3 (which was still
open from the previous selection). Is there a way when an accordion
is used as the detail (in a master/detail scenario) that when each
time a particular row in the master table is selected, that you can
program that a particular accordion panel (in the detail) will
display?
I know that there is a way to program a link to go to a
particular panel, but I couldn't get it to work when I tried
putting the "onclick" event on the TR of the "master" table.

Hi Bradley,
The onclick on a TR should work:
<tr onclick="acc.openPanel(0); return
false;">...</tr>
<div id="Accordion1" class="Accordion">
</div>
<script>
acc = new Spry.Widget.Accordion("Accordion1");
</script>
What was the problem you were having?
--== Kin ==--

Accordion panels open when website launches

All my accordion panels appear open for a second before my page completely loads. I have tried to find fixes in the forum but the only one that I have found is to use SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1...I am already using this version and I am still having the issue. It appears to work fine with firefox but I have the issue in IE8. I am quit the novice with web design, any help anyone can give woyld be greatly appreciated.
Here in the link to my site http://www.fcps.edu/southcountyss/

There is a whole heap of stuff between rendering the markup for the accordion and creating an instance of the accordion.
To eliminate the pause between render and instance, move the accordion constructor to just below the table that holds the accordion as in
                
                Student Services (MS):
                703-446-1640<br />
                Student Services (MS):                703-446-1630<br />
                </p>
</div>
            </div>
          </div></td>
      </tr>
    </table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
Don't forget to remove the constructor from the bottom of the document.
Gramps

Accordion Panels Open During Page Load

All my accordion panels appear open for a second before my page completely loads. http://home.comcast.net/~steven.kay/
I found this thread, but am still not clear on the solution given. http://forums.adobe.com/message/22365#22365
Thanks.

Never mind... I downloaded the new js file... (duh)

Opening Accordion Panels w/ MouseOver

Similar Messages

Maybe you are looking for