0

I'm trying to get the Jquery Selectmenu plugin to expand when I mouse over but close again when I leave it.

I decided to use the MouseOver and MouseOut events along with the open and close commands.

Problem is with how it works. It seems to create a some sort of fake menu outside of the div so as soon as I move over the options the menu closes again.

I reproduced this in JsFiddle: http://jsfiddle.net/jc2bs/

I would love to be able to get this to work.

Also I would love if I was able to get it to close on mouseout if it was activated by a mouseover but not if it was activated by a click ( so if user clicked the menu it would stay open until he picked a option or clicked outside). But I guess that's a much more difficult scenario to solve.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ingó Vals
  • 4,788
  • 14
  • 65
  • 113

2 Answers2

1

For the first (sub)question you can use the solution below. That work fine for me:

$("body").on("mouseenter", "#sel-button", function() {
    $('#sel').selectmenu('open');
});

$("body").on("mouseleave", "#sel-button, #sel-menu", function() {
    if (!$('#sel-menu').is(':hover')) {
        $('#sel').selectmenu('close');
    }
});

So, ​what I did. First, I changed deprecated delegate methods with new on method. Then, I used mouseenter and mouseleave events instead of mouseover and mouseout (you can check in the docs why). Consider that submenu has ID (#sel-menu) which is created by concatenating your select element ID with "-menu". The same works for select button.

DEMO: http://jsfiddle.net/jc2bs/6/

Regarding the second (sub)question, we can use couple of tricks. One is using data to store a flag if the menu was clicked, and based on this decide whether to hide submenu on mouse leave or not.

DEMO: http://jsfiddle.net/jc2bs/7/

Community
  • 1
  • 1
VisioN
  • 143,310
  • 32
  • 282
  • 281
  • Thank you. I had to update my Jquery script from 1.5 to 1.7 to get it to work. I also looked closer into the classes and ids the selectmenu comes up with and that will help me with modeling the look a little bit. (beyond what themeroller does). – Ingó Vals May 22 '12 at 17:27
  • @IngóVals Good if my answer was helpful for you. – VisioN May 22 '12 at 17:29
  • Could you think of a reason why the mouseleave wouldn't work properly on IE 9 (apart from IE being junk). He always seems to get true from the hover boolean and closes the menu. – Ingó Vals May 23 '12 at 13:23
  • @IngóVals I think because IE is junk mostly :) In the solution I used fast trick of checking whether cursor is over the element -- `:hover` selector which is not documented in JQuery docs (most probably because it is not supported by IE). If you really need IE support, you can replace `is(':hover')` with [more comprehensive method](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery). – VisioN May 23 '12 at 14:24
  • Well it didn't even work in Firefox either. I'll check out that other solution later. – Ingó Vals May 24 '12 at 12:19
1

You can accomplish this by using the mouseleave event on the selectmenu itself to close the menu.

$('.ui-selectmenu-menu').on('mouseleave', function() {
    $('#sel').selectmenu('close');
});

Live: http://jsfiddle.net/5wExe/1

While your second requirement is theoretically possible I personally don't think that it's a good idea. Users wouldn't think to click the menu if it shows up onmouseover.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • Yes you are right about the second one, why would you click. But your fiddle doesn't close the menu if you leave via the #sel-button, it could be used as a similar feature :) – Ingó Vals May 22 '12 at 17:28