A div-et vagy css menüt eltakarja egy Applet vagy egy flash video

Gyakori probléma különböző böngészőkön, hogy a css+div+javascript menüket eltakarja egy Applet vagy Flash. Hogyan kell ezt megoldani? Ez a probléma érintheti az Internet Explorer 6.0, 7.0, 8.0 verziókat.

A megoldás lényege:

• A megjelenítendő DIV méretével pontosan megegyező méretű IFRAME-et teszek az Applet fölé a DIV területére olyan z-index értékkel, amely eggyel kisebb, mint a DIV z-index értéke.
• Megjelenítem a DIV-et.
• Ha ez egy menürendszer, akkor az onmouseover és onmouseout eseményekre teszem rá az iframe megjelenítését és eltüntetését.

Az alábbi példában egy jquery segítségével való megoldást mutatok be:

A Javascript menü kódja:

var timeout         = 500;
var closetimer        = 0;
var ddmenuitem      = 0;
function jsddm_open(){
    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $j(this).find('ul').eq(0).css('visibility', 'visible');
    alert(navigator.userAgent);
    ddmenuitem.bgiframe();
}
function jsddm_close(){   
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer(){   
  closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer(){   
  if(closetimer){   
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}
$j(document).ready( function(){   
    $j('#jsddm > li').bind('mouseover', jsddm_open);
    $j('#jsddm > li').bind('mouseout',  jsddm_timer);
}
);
document.onclick = jsddm_close;
A jquery.bgiframe a tulajdonképpeni megoldás. A függvény fejlécében van az a tesztrész, amely megmondja, hogy mely böngész?kre fusson le a trükk:
Jelen esetben IE6 és IE8 esetén fut le az Applet-es trükk.
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Version 2.1.2
*/
(function($){
$.fn.bgiframe = (  $.browser.msie && ( /msie 6\.0/i.test(navigator.userAgent) || /8\.0/i.test(navigator.userAgent ) )  ? function(s) {
    s = $.extend({
        top     : 'auto', // auto == .currentStyle.borderTopWidth
        left    : 'auto', // auto == .currentStyle.borderleftWidth
        width   : 'auto', // auto == offsetWidth
        height  : 'auto', // auto == offsetHeight
        opacity : true,
        src     : 'javascript:false;'
    }, s);
    var html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
                   'style="display:block;position:absolute;z-index:-1;'+
                       (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
                       'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
                       'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderleftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
                       'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
                       'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
                '"/>';
    return this.each(function() {
        if ( $(this).children('iframe.bgiframe').length === 0 )
            this.insertBefore( document.createelement(html), this.firstChild );
    });
} : function() { return this; });
// old alias
$.fn.bgIframe = $.fn.bgiframe;
function prop(n) {
    return n && n.constructor === Number ? n + 'px' : n;
}
})(jQuery);
A menü:
<div  style="padding:0px;margin:0px;border:0px">
  <div id="mainmenu" style="position:absolute;left:6px;top:2px;z-index:200;width:450px;">
    <ul id='jsddm'>
      <li id='list'><a href='#'><img src='pictures/list.gif'/>&nbsp;Lista</a>
       <div>
         <ul>
           <li><a href='events.php' target='_blank'>Események</a></li>
           <li><a href='stat.php' target='_blank'>Statisztika</a></li>
         </ul>
       </div>
     </li>
     <li id='lang'><a href='#'><img src='pictures/lang.gif'/>&nbsp;Nyelv</a>
      <div>
        <ul>
          <li><a href='index.php?LANG=Hu' target='_self'>Magyar</a></li>
          <li><a href='index.php?LANG=De' target='_self'>Német</a></li>
          <li><a href='index.php?LANG=En' target='_self'>Angol</a></li>
          <li><a href='index.php?LANG=Fr' target='_self'>Francia</a></li>
          <li><a href='index.php?LANG=Cn' target='_self'>Kínai</a></li>
        </ul>
      </div>
    </li>
   </ul>        
</div>     
</div>
A css kódja:
#mainmenu{
    font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size: 10px;
    font-weight: bold;
    position: absolute;
  left:6px;
  top: 2px;
  /**width: 448px;*/
  padding:0px;
  margin:0px;
  z-index:200;
  border: 2px outset #eaf7ff;
    z-index:100;
}
#jsddm{   
  margin: 0 ;
    padding: 0;   
}
#jsddm li{   
  float: left;
    list-style: none;
}
#jsddm li a{
    display: block;
    background: #CFE5ED;
    padding: 2px 2px;
    text-decoration: none;       
    color: #1D5987;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: bold;
}
#jsddm li a:hover{
    background: #dfd9b3;
    color: #000000;
}
#jsddm li ul{   
  margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid #A0C0C0;
    border-bottom:2px ridge #A0C0C0;
  border-left:  2px ridge #A0C0C0;
  border-right: 2px ridge #A0C0C0;       
}
#jsddm li ul li{
    float: none;
    display: inline;       
}
#jsddm li ul li a{
    width: auto;
    background: #dfd9b3;
    color: #000000;
}
#jsddm li ul li a:hover{
    background: #202d59;
    color: #ffffff;
}
#jsddm li a img{
border: 0px none;
vertical-align: middle;
height: 16px;
}
li#logout, li#list, li#filter, li#form, li#lang, li#services{
    border-right-style: solid ;
    border-right-color:    #808080;
    border-right-width: 1px;
}