Skip to content
This repository

Using Selectmenu with hidden elements #264

Closed
ChayaCooper opened this Issue · 7 comments

2 participants

Chaya Cooper Felix Nagel
Chaya Cooper

I'd like to use Selectmenu, but I'm having trouble getting it to work properly in hidden elements (my form has a lot of hidden

elements). I also have a problem with any Select fields that are below hidden elements (if the user mouses over a hidden element while a dropdown is open, the menu stays in the proper place and the options are displayed higher on the page)

I've tried using Peek, but it's conflicting with some of the other plugins that I'm using.

The documentation states that the issues with hidden elements were fixed since v1.2, but even though I have the latest version of jQuery and Selectmenu, the Select Options show up in the top left corner of the page.

Felix Nagel
Owner

Would you please add a demo fiddle (see #61) or post a demo link so Im able to reproduce your issue.

Chaya Cooper

I just added the demo fiddle :-) http://jsfiddle.net/chayanyc/GXtpC/587/

Felix Nagel
Owner

Accordion: This is a special case which cannot be fixed by selectmenu itself. You need to add a callback to your accordion which closes the selectmenu. Ive updated your fiddle: http://jsfiddle.net/GXtpC/589/

On hidden element: the problem is that the selectmenu button is hidden when the selectmenu menu is opened. Selectmenu uses the jQuery UI position plugin to position the menu. Its not possible to position an element relative to a hidden element. This is a technical limitation, which needs a conceptual solution.

Third problem: Ahem, you added the hover to the hidden element. So if a user hovers that, it splits the page. Its a problem of your JS code, not of selectmenu. The selectmenu widget only closes on click, just like a native one. If you need to close selectmenu on hovering another element just use the provided public methods.

You inialized selectmenu multiple times on the same elements. You should not do this and I corrected it in the updated fiddle.

Please consider a donation as all development and support is done in my spare time: http://www.felixnagel.com/donate

Chaya Cooper

I really appreciate your taking the time to address each point separately :-)

Would you mind walking me through the callback you added to my fiddle? I'm not at all familiar with callbacks (other than the research I've done this afternoon) and am having trouble combining it with the various jquery functions I'm using. I'd love to use it because it works a bit better than the jQuery changestart: function that I wrote.

$("#accordion_closed").accordion({
    event: "click hoverintent",  autoHeight: false, collapsible: true, active: false, 
    changestart: function(){ 
        $('select').selectmenu("close"); 
    } 
}).mouseleave(function() { 
    $(this).accordion({ active: false});  
}); 

I was actually planning on looking into how to close select elements onmouseleave, so this was a good impetus :-) The method that I found <select onmouseleave="this.size=1;" onclick="this.size=options.length;" > doesn't seem to work with selectMenu. Is there a way to integrate it or another method that you think would work?

Felix Nagel
Owner

A callback is just an event, a function which will be called to a specific time. Callbacks are useful when an external script (for example a jQuery UI widget like Selectmenu) should be implemented in own scripts and you need these script to interact with each other. Perhaps you should google for a tutorial, Im sure there are better explanations ;-)

You need to use mouseleave on the widget, not the original selectmenu.
Try using this:

$("#accordion_closed").accordion("widget").mouseleave(...

Using inline events in tags is bad (very bad) practice. Don't use it.

ps: please use working jsfiddles, its much easier for me to work with...

Felix Nagel
Owner

Any feedback on this issue?

Felix Nagel
Owner

Closed as issue seems to be solved. Please reopen if needed.

Felix Nagel fnagel closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.