javascript - jquery combobox behind embedded object (IE only)

Question

In Internet Explorer, I have a jquery combobox which opens behind an embedded object (for example a pdf document). How can I make sure the combobox is always in front of the embedded object?

See this fiddle for an example: http://jsfiddle.net/RDd3A/258/ (updated fiddle containing my attempts to solve it)

HTML:

<select id="combobox">
  <option value="">Select one...</option>
  <option value="23">Really long stuff that might wrap</option>
  <option value="25">Normal Stuff</option>   
</select>
<br/>
<embed src="https://www.xs4all.nl/media/transparantie/Transparantierapport-2012.pdf"/>

Javascript:

$("#combobox").combobox();

(I've stripped all css)

I've already tried the following:

• Use wmode="transparant" as attribute
• Use ?wmode=transparant in the url
• Use an iframe
• Use z-index

Unfortunately, this doesn't help, the combobox is still behind the embedded document. Anyone?

Answer 1

It is a known IE issue, I did an investigation some time ago and the only way I know is already mentioned by @Gyum Fox - another 'mask' iframe. However you don't have to put an iframe "between" the elements - you can put absolutely positioned iframe inside corresponding element with 100% height and width. CSS of an iframe to be placed inside of the element:

iframe.ie-fix {
   position: absolute;
   border: none;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: -1;
} 

The problem that jQuery constructs menu content dynamically, so we need to handle some events to insert the mask. This simple code adds mask to all menus on the page. Not a complete solution, however shows the approach:

$('.ui-button').click(function() {
     $('.ui-menu').append("<iframe class='ie-fix' src='about:blank'></iframe>" ); 
});
   

Ideally we need to update only corresponding menu, butI need to dig deeper into jQuery's sources to accomplish that, will try to address later.

JS Fiddle with complete example