Skip navigation

Spry Framework for Ajax (READ ONLY)

PJC_Dragon Calculating status...

Currently Being Moderated

Change Accordion To OnMouseOver

Jul 5, 2007 11:44 AM

How can I make the Accordion widget's behavior change to OnMouseOver instead of OnClick?

1753 Views 24 Replies Latest reply: janken71, Jan 14, 2010 3:01 PM

Replies

Currently Being Moderated

1. Donald Booth,

Jul 5, 2007 1:38 PM in reply to PJC_Dragon

Report

Hi,
Adding onmouseover="accorionName.openPanel(panelnumber);" to the tab tag should do it.
<div class="AccordionPanelTab" onmouseover="Accordion1.openPanel(0);">Label 1</div>
Remember that Spry uses 0 based counting so '0' is the first panel.
Hope this helps.
Don

|
Mark as:
Currently Being Moderated

2. PJC_Dragon,

Jul 5, 2007 8:09 PM in reply to PJC_Dragon

Report

Excellent!

Thank you for the quick reply, Donald. Most appreciated.

|
Mark as:
Currently Being Moderated

3. karonz,

Jul 6, 2007 9:28 AM in reply to PJC_Dragon

Report

too cool, it works perfectly...every day it seems I come here and find one more thing that improves my pages :)

can you add a slight delay like in the tooltips?

|
Mark as:
Currently Being Moderated

4. kf420,

Jul 6, 2007 6:58 PM in reply to Donald Booth

Report

Didn't work for me. What am I doing wrong?

...
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab" onmouseover="Accordion1.openPanel(0);">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onmouseover="Accordion1.openPanel(1);">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
...

|
Mark as:
Currently Being Moderated

5. ometiclan,

Jul 8, 2007 11:08 PM in reply to PJC_Dragon

Report

Didn't work for me either.

But you can get the MouseOver by modifying the spryaccordion.js.
Search for
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
and copy/paste the onClick functions:

if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();

... it should look like this:

- - - - - - - - -

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
{
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();

/*
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
*/
};

- - - - - - - - -

Should work and you can restore the original later if you need it.

But I'm pretty sure there's a better way... without modifying the .js

|
Mark as:
Currently Being Moderated

6. kf420,

Jul 8, 2007 11:37 PM in reply to ometiclan

Report

Works indeed. Thank you!

|
Mark as:
Currently Being Moderated

7. ometiclan,

Jul 8, 2007 11:58 PM in reply to PJC_Dragon

Report

You are welcome :O)

And if anyone knows of a better way to do it... please tell me/us... i actually have no clue what the hell i'm scripting :o) ... i'm a designer.

|
Mark as:
Currently Being Moderated

8. karonz,

Jul 9, 2007 9:16 AM in reply to ometiclan

Report

does anyone know how to delay the mouseover, it is so quick that as you go across the page with the mouse windows are popping up all over

|
Mark as:
Currently Being Moderated

9. thewebcolors,

Jul 9, 2007 1:41 PM in reply to PJC_Dragon

Report

Apple uses this effect on the their updated web site, click on the support page and you will see it.

Wade

|
Mark as:
Currently Being Moderated

10. kinblas,

Jul 9, 2007 2:36 PM in reply to thewebcolors

Report

Regarding support for mouseover and delay, try this:

<script type="text/javascript">

</script>

Note that with the code above, you don't need to add onmouseover and onmouseout attributes to your accordion markup. The attachMouseOverBehaviors() will add the event handlers for you programatically.

FYI, the functions were written to be compatible with both the Spry 1.4 and 1.5 versions of the Accordion.

--== Kin ==--

|
Mark as:
Currently Being Moderated

11. Neil Eisenberg,

Jul 10, 2007 5:40 AM in reply to PJC_Dragon

Report

Kin,
I already had an accordion on the page - Acc1, so I tried adding your script to the head section of the page and changing where you had Accordion1 to Acc1... but that didnt do anything. What did I do wrong?

|
Mark as:
Currently Being Moderated

12. Neil Eisenberg,

Jul 10, 2007 5:45 AM in reply to PJC_Dragon

Report

Ooops.. I added it to the bottom within the ody tag like it should and it works great. I has the fixed panel heights set to false and it seems to mess up adding the scroll bars - depending on the browser, but changing it back to fixed height fixed that. Don't know why that is... but thanks.

|
Mark as:
Currently Being Moderated

13. Neil Eisenberg,

Jul 10, 2007 5:52 AM in reply to PJC_Dragon

Report

Also, If I use the above, I think its best to remove the on-click event...since there seems to be a difference between the size of the panel if I use mouse over or click and the scroll bar on the side wants to be there no matter what when using the mouse over.

What I mean is if I mouse over AND click on a panel it does some strange things... and some people may try that... not knowing what to do.

How would you do that?

|
Mark as:
Currently Being Moderated

14. karonz,

Jul 10, 2007 11:14 AM in reply to PJC_Dragon

Report

works perfectly.......exactly what I needed, but I knew I would not know how to code it myself........thanks so much

|
Mark as:
Currently Being Moderated

15. Neil Eisenberg,

Jul 10, 2007 3:38 PM in reply to PJC_Dragon

Report

One question - again...
Can this be adapted for the tab panel as well? I am using a tab group with the tabs on the side and I would like to use this there as well. I see how to use the standard mouse over - as in the example - but the slight delay is much niocer.
thanks again.
Neil

|
Mark as:
Currently Being Moderated

16. kinblas,

Jul 10, 2007 3:49 PM in reply to Neil Eisenberg

Report

Yes, it can be adapted for tabbed panels, but you have to make a few small tweaks to account for the different method names:

function attachTabbedPanelsMouseOverBehaviors(tp)
{
var tabs= tp.getTabs();
for (var i = 0; i < tabs.length; i++)
{
var tab = tabs[ i ];
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", getTabbedPanelsMouseOverFunc(tp, tab), false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e)
{
if (tp.mouseOverTimerID)
clearTimeout(tp.mouseOverTimerID);
tp.mouseOverTimerID = 0;
}, false);
}
}

function getTabbedPanelsMouseOverFunc(tp, t)
{
return function(e) {
if (tp.mouseOverTimerID)
clearTimeout(tp.mouseOverTimerID);
tp.mouseOverTimerID = setTimeout(function() { tp.mouseOverTimerID = 0; tp.showPanel(t); }, gMouseOverDelay);
};
}

--== Kin ==--

|
Mark as:
Currently Being Moderated

17. Neil Eisenberg,

Jul 10, 2007 7:04 PM in reply to PJC_Dragon

Report

Ahhh... thanks! I made a few guesses, but I didnt have it quite right. I appreciate it!

Neil

|
Mark as:
Currently Being Moderated

18. Neil Eisenberg,

Jul 10, 2007 7:15 PM in reply to PJC_Dragon

Report

Are you supposed to substitute the name of the tabbed panel in there somewhere? As is it isnt working for me?

|
Mark as:
Currently Being Moderated

19. kinblas,

Jul 11, 2007 7:02 AM in reply to PJC_Dragon

Report

Hi Neil,

You call attachTabbedPanelsMouseOverBehaviors() to attach the behavior to your tabbed panels, just as you did for accordion:

// Create an accordion:

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

// Attach the mouseover behaviors:

attachTabbedPanelsMouseOverBehaviors(TabbedPanels1);

The code works, I just tested it by cutting it and pasting it into a real example.

--== Kin ==--

|
Mark as:
Currently Being Moderated

20. Neil Eisenberg,

Jul 11, 2007 7:31 AM in reply to PJC_Dragon

Report

Kin,
It sure does work, now that I have all the pieces. Although I understand it when I see it, it takes me a lot longer to figure it all out on my own. I really appreciate your patience and guidance. It works perfectly, and now I can modify that for use elsewhere.

Neil

|
Mark as:
Currently Being Moderated

21. karonz,

Sep 11, 2007 2:13 PM in reply to PJC_Dragon

Report

I got the mouseover delay to work for my tabs and am implementing it now, but do you have any examples of mouse over delay with spry data? I can change the onclick to mouseover, but I don't know how to add a delay

http://www.nmprc.state.nm.us/als.htm

|
Mark as:
Currently Being Moderated

22. MARIN Cristian,

Sep 13, 2007 12:57 AM in reply to PJC_Dragon

Report

Hello karonz,

Do you mean something like this:

<a href="#" onmouseover="this.showTimeout = setTimeout(function(){/*here the code you need*/TabbedPanels1.openPanel(1)}, 200);" onmouseout="if (this.showTimeout) clearTimeout(this.showTimeout);">

?

Cristian

|
Mark as:
Currently Being Moderated

23. karonz,

Sep 13, 2007 6:44 AM in reply to PJC_Dragon

Report

I am sorry, again I was not clear in my question. I want to use onmouseover instead of onclick in my spry table, but I want a delay, because when I use onmouseover it makes the page look all jumpy when you go over it with the mouse. \
I am studying the code example, but I would not know exactly how to adapt it to the spry row below

<tbody spry:repeatchildren="dsAgents">
<tr spry:if="({ds_RowNumber} % 2) == 0" onclick="dsAgents.setCurrentRow('{ds_RowID}')" spry:hover="rowHover" spry:select="rowSelected">
<td class="eventName2TD"><span class="eventname">{name}</span><br /></td>
</tr>
<tr spry:if="({ds_RowNumber} % 2) != 0" onclick="dsAgents.setCurrentRow('{ds_RowID}');" spry:hover="rowHover" spry:select="rowSelected">
<td class="eventName2TD"><span class="eventname">{name}</span><br /></td>
</tr>
</tbody>

|
Mark as:
Currently Being Moderated

24. janken71,

Jan 14, 2010 3:01 PM in reply to kinblas

Report

I've been looking all over for this mouseover delay! Thanks Kinblas =)

|
Mark as: