I've been browsing under the linux platform since about 1943, and one of
my pet peeves has been encountering websites that didn't work because
their main navigation menu was hidden under some Flash content! ;)
Well, it turns out I just made one of those sites! And so I spent the
better half of the afternoon figuring out how to get my drop down
SuperFish submenus menu to appear OVER a Flash Movie. Here's what I found;
1. z-index and wmode settings have no effect under Linux at the time of
this writing (FF2, FF3b2, Opera9, and the Flash 9 plugin).
NOTE: For DHTML to appear above active content in Windows / OS X all
you need to do is set position and z-index on your menu and flash object
via containers. Also, you must pass the wmode
attribute(<embed>)/param(<object>) as "transparent".
<div style="position: relative; z-index: 100">
<ul class="menu">...[menu]...</ul>
</div>
<div style="position: relative; z-index: 50">
<embed wmode="transparent" ...[movie]...>
</div>
2. an iframe must be used under Linux. The iframe(s) can be positioned
within the Flash movie, and regardless of z-index, DHTML content will
now appear in the foreground if it is positioned over the iframe.
The following resources were very helpful;
http://www.isayjesusis.com/css/
http://beta.aviary.pl/marcoos/flashlinux/
--
I was able to use SuperFish
(http://users.tpg.com.au/j_birch/plugins/superfish/) and its native API
callbacks to draw a suckerfish style (drop down) menu over a Flash movie
in Linux browsers. Below is my example code. It (could) be incorporated
in the plugin itself... although this may still be considered a rare
case? ;)
==>
$().ready(function(){
// SuperFish navigation menu options
var sfOptions = {
animation : { opacity:"show", height:"show" }
};
// (optional: If SuperFish menus to appear on top of active Flash/Applet
// content and the browser platform is Linux, then use iframe
workaround)
/* psuedo code;
* For each item (<li>) with a submenu (<ul>) [onInit()]
* 1. set the item's position to relativeposition to relative
* 2. add an invisible, absolutely positioned iframe as the
first child of item
*
* On each submenu display [onShow]
* 1. Set dimension of upstream iframe
* 2. Toggle iframe visibility
*
* On each submenu hide
* 1. Toggle iframe visibility
*/
if(/Linux/.test(navigator.platform)) {
sfOptions = $.extend(sfOptions,{
onInit: function(){
$('li:has(ul)',this).each(function(){
$(this).css('position','relative')
.prepend('<iframe
src="javascript:false;document.write(\'\');"
style="position:absolute;width:100%;top:0;left:0;z-index:-1;display:none;');
});
},
onHide: function(){
$(this).siblings('iframe').css('display','none');
},
onShow: function(){
$(this).siblings('iframe')
.css({
height: $(this).parent().height() +
this.clientHeight + 'px',
display: 'block'
});
}
});
}
$('#navigation ul.nav').superfish(sfOptions);
});
If formatting is broken, see;
http://dev.iceburg.net/jquery/superfish_linux.html
** NOTE this is only tested on 1 dimensional, vertical drop downs. The
height/width calculation may need to be modified to handle different
orientations. **
Hope this helps someone,
~ Brice
