Geek Answers Handbook

JQuery AutoComplete gets hidden jQuery Slider - jquery wmode equivalent?

I use the jQuery UI autocomplete found here and the Nivo slider found here on my website. AutoFill is located above the nivo slider. What happens on the first slide of my nivo slider, when I print something for autocompletion, offers appear without the banner below covering it. But when the second slide appears, offers are hidden under the banner. I mainly use the default settings for jquery ui autocomplete and nivo slider.

Here is the schedule:

enter image description here

I read about wmode, which is basically a fix if the banner was in Flash, but mine in jquery. I think this will be related to z-index. I'm right? How to fix it?

Thanks for the help!

+4
source share
1 answer

Dropdown (autocomplete) exiting the text field as part of jQuery UI autocomplete: dynamically creates a with z-index: 1 inside the shell, <ul class="ui-autocomplete" style="z-index: 1; ...etc">

You just need to make sure that all autocomplete objects (or even just specific ones) are much higher than the nivo slider.

jsFiddle DEMO (so that it appears, then inspect, you will see style="z-index: 99999;"

 $( ".autocompleteThis" ).autocomplete({ source: availableTags, open: function (event, ui) { $('.ui-autocomplete').css('z-index', '99999'); } });​

Use open: function (event, ui) {} to set the z-index autofill there.

+4
source

More articles:


All Articles