Skip navigation
PJC_Dragon
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?
 
Replies
  • Currently Being Moderated
    Jul 5, 2007 1:38 PM   in reply to PJC_Dragon
    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
    Jul 6, 2007 9:28 AM   in reply to PJC_Dragon
    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
    Jul 6, 2007 6:58 PM   in reply to Donald Booth
    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">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    ...
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 8, 2007 11:08 PM   in reply to PJC_Dragon
    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
    Jul 8, 2007 11:37 PM   in reply to ometiclan
    Works indeed. Thank you!
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 8, 2007 11:58 PM   in reply to PJC_Dragon
    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
    Jul 9, 2007 9:16 AM   in reply to ometiclan
    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
    Jul 9, 2007 1:41 PM   in reply to PJC_Dragon
    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
    Jul 9, 2007 2:36 PM   in reply to thewebcolors
    Regarding support for mouseover and delay, try this:

    <script type="text/javascript">
    <!--
    //
    // Create your accordion.
    //

    var Accordion1 = new Spry.Widget.Accordion("Accordion1");

    //
    // Attach mouse over behaviors.
    //

    attachMouseOverBehaviors(Accordion1);

    //
    // Utility functions to support mouse over delay.
    //

    gMouseOverDelay = 250; // msecs

    function attachMouseOverBehaviors(acc)
    {
    var panels = acc.getPanels();
    for (var i = 0; i < panels.length; i++)
    {
    var tab = acc.getPanelTab(panels[ i ]);
    Spry.Widget.Accordion.addEventListener(tab, "mouseover", getMouseOverFunc(acc, panels[ i ]), false);
    Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e)
    {
    if (acc.mouseOverTimerID)
    clearTimeout(acc.mouseOverTimerID);
    acc.mouseOverTimerID = 0;
    }, false);
    }
    }

    function getMouseOverFunc(acc, p)
    {
    return function(e) {
    if (acc.mouseOverTimerID)
    clearTimeout(acc.mouseOverTimerID);
    acc.mouseOverTimerID = setTimeout(function() { acc.mouseOverTimerID = 0; acc.openPanel(p); }, gMouseOverDelay);
    };
    }

    //-->
    </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
    Jul 10, 2007 5:40 AM   in reply to PJC_Dragon
    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
    Jul 10, 2007 5:45 AM   in reply to PJC_Dragon
    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
    Jul 10, 2007 5:52 AM   in reply to PJC_Dragon
    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
    Jul 10, 2007 11:14 AM   in reply to PJC_Dragon
    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
    Jul 10, 2007 3:38 PM   in reply to PJC_Dragon
    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
    Jul 10, 2007 3:49 PM   in reply to Neil Eisenberg
    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
    Jul 10, 2007 7:04 PM   in reply to PJC_Dragon
    Ahhh... thanks! I made a few guesses, but I didnt have it quite right. I appreciate it!

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2007 7:15 PM   in reply to PJC_Dragon
    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
    Jul 11, 2007 7:02 AM   in reply to PJC_Dragon
    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
    Jul 11, 2007 7:31 AM   in reply to PJC_Dragon
    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
    Sep 11, 2007 2:13 PM   in reply to PJC_Dragon
    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
    Sep 13, 2007 12:57 AM   in reply to PJC_Dragon
    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
    Sep 13, 2007 6:44 AM   in reply to PJC_Dragon
    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
    Jan 14, 2010 3:01 PM   in reply to kinblas

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points