Open JQuery UI SelectMenu on Hover

Question

I am using a JQuery selectmenu, and want to open it on hover and close it when the mouse leaves.

This is what I tried:

jQuery('.selectbox')
    .selectmenu()
    .selectmenu('widget').hover(function() { jQuery(this).selectmenu('open'); });

Error:

jquery-1.12.3.min.js:2 Uncaught Error: cannot call methods on 
   selectmenu prior to initialization; attempted to call method 'open'

But I can not access the selectmenu that way to open it. Also I think I would need to keep it open, when the mouse moves over the menu entries?

Use .on('mouseenter') instead of .hover(). hover() add the mouseout functionality — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Apr 14, 2016 at 11:33

Alex · Accepted Answer · 2017-08-10 20:20:43Z

edit

It turned out this provides a bad user experience anyways, so please consider that before using this code :-)

I was able to create a custom widget with that functionality like this:

jQuery.widget("custom.hoverSelectmenu", jQuery.ui.selectmenu, {
    _create: function() {
        this._super();
        var that = this;
        this._on( this.button, {
            mouseenter: function( event ) {
                that.open();
            },
            mouseleave: function( event ) {
                if (event.toElement != that.menu.get(0)) {
                    that.close();
                }
            }
        });

        this._on( this.menu, {
            mouseleave: function( event ) {
                if (event.toElement != that.button.get(0)) {
                    that.close();
                }
            }
        });

    }
} );

jQuery('.selectbox').hoverSelectmenu({

});

update

The following works in Firefox, Chrome and IE 11 (lower IE not tested)

_leaveWidget: function(event) {
    var target = event.toElement || event.relatedTarget || event.target;
    if (!(
        jQuery.contains(this.button.get(0), target) ||
        jQuery(this.button.get(0)).is(target) ||
        jQuery.contains(this.menu.get(0), target) ||
        jQuery(this.menu.get(0)).is(target)
    )) {
        this.close();
    }
},

_create: function () {
    this._super();
    var that = this;
    this._on(this.button, {
        mouseenter: function (event) {
            that.open();
        },
        mouseout: that._leaveWidget
    });

    this._on(this.menu, {
        mouseout: that._leaveWidget
    });
},

Collectives™ on Stack Overflow

Open JQuery UI SelectMenu on Hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related