24 Replies Latest reply: Jan 14, 2010 3:01 PM by janken71 RSS

    Change Accordion To OnMouseOver

    PJC_Dragon Community Member
      How can I make the Accordion widget's behavior change to OnMouseOver instead of OnClick?
        • 1. Re: Change Accordion To OnMouseOver
          Donald Booth Community Member
          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
          • 2. Re: Change Accordion To OnMouseOver
            PJC_Dragon Community Member
            Excellent!

            Thank you for the quick reply, Donald. Most appreciated.
            • 3. Change Accordion To OnMouseOver
              karonz Community Member
              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?
              • 4. Re: Change Accordion To OnMouseOver
                kf420 Community Member
                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>
                ...
                • 5. Re: Change Accordion To OnMouseOver
                  ometiclan
                  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
                  • 6. Re: Change Accordion To OnMouseOver
                    kf420 Community Member
                    Works indeed. Thank you!
                    • 7. Re: Change Accordion To OnMouseOver
                      ometiclan Community Member
                      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.
                      • 8. Re: Change Accordion To OnMouseOver
                        karonz Community Member
                        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
                        • 9. Re: Change Accordion To OnMouseOver
                          thewebcolors
                          Apple uses this effect on the their updated web site, click on the support page and you will see it.

                          Wade
                          • 10. Change Accordion To OnMouseOver
                            kinblas Community Member
                            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 ==--
                            • 11. Re: Change Accordion To OnMouseOver
                              Neil Eisenberg Community Member
                              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?
                              • 12. Re: Change Accordion To OnMouseOver
                                Neil Eisenberg Community Member
                                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.
                                • 13. Re: Change Accordion To OnMouseOver
                                  Neil Eisenberg Community Member
                                  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?
                                  • 14. Re: Change Accordion To OnMouseOver
                                    karonz Community Member
                                    works perfectly.......exactly what I needed, but I knew I would not know how to code it myself........thanks so much
                                    • 15. Re: Change Accordion To OnMouseOver
                                      Neil Eisenberg Community Member
                                      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
                                      • 16. Re: Change Accordion To OnMouseOver
                                        kinblas Community Member
                                        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 ==--
                                        • 17. Re: Change Accordion To OnMouseOver
                                          Neil Eisenberg Community Member
                                          Ahhh... thanks! I made a few guesses, but I didnt have it quite right. I appreciate it!

                                          Neil
                                          • 18. Re: Change Accordion To OnMouseOver
                                            Neil Eisenberg Community Member
                                            Are you supposed to substitute the name of the tabbed panel in there somewhere? As is it isnt working for me?
                                            • 19. Re: Change Accordion To OnMouseOver
                                              kinblas Community Member
                                              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 ==--
                                              • 20. Re: Change Accordion To OnMouseOver
                                                Neil Eisenberg Community Member
                                                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
                                                • 21. Change Accordion To OnMouseOver
                                                  karonz Community Member
                                                  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

                                                  • 22. Re: Change Accordion To OnMouseOver
                                                    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
                                                    • 23. Change Accordion To OnMouseOver
                                                      karonz Community Member
                                                      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>
                                                      • 24. Re: Change Accordion To OnMouseOver
                                                        janken71 Community Member

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