Question

I’m using Jquery UI’s autocomplete, found here, and Nivo slider, found here, on my website. The Autocomplete is above the nivo slider. What’s happening is on the first slide of my nivo slider, when I type in something for the autocomplete, suggestions appear without the banner below covering it. But when the second slide appears the suggestions are hidden underneath the banner. I’m basically using the default settings for both jquery ui autocomplete and nivo slider.

Here’s a graphic:

I read about wmode, which is basically a fix if the banner was in flash, but mines in jquery. I’m thinking it will have to do with z-index. Am I correct? How should I fix this?

Thanks for all help!

Answer 1

The dropdown (autocomplete) that comes out from the textbox, as part of jQuery UI’s autocomplete: gets dynamically created a with a z-index: 1 within it’s wrapper, <ul class="ui-autocomplete" style="z-index: 1; ...etc">

You’d simply need to make sure all autocomplete things (or even just that specific one) have a much higher one than nivo slider.

jsFiddle DEMO (get it to come up, then inspect, you’ll see style="z-index: 99999;"

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

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