drop-down navigation appears behind Flash player. Is this alegitimate use of Javascript?

[Jake Barnes]

I've been asked to help out with the navigation bar on this page:

http://www.thesecondroad.org/

The drop down menu (which is pure CSS, save for a fix for IE) appears
behind the Flash module. As I understand the problem, if everything on
the page was absolutely positioned, the designer could give the navbar
a z-index that lifts it above the Flash module. However, nothing on
the page is absolutely positioned. Instead, everything is floated. As
such, I believe the z-index is assigned through the implicit process
of the normal flow of the page.

Would this be a legitimate use of Javascript. to attempt to fix this
problem? If so, what does the fix entail? Could I determine,
onmouseover, the locations of the UL, perhaps from scrollTop, and then
could I use Javascript to set the UL to an absolute position, until
mouseout? Or is there a more elegant way to do it?

Or is this a problem for the designer to fix, without using
Javascript?

[Randy Webb]

Jake Barnes said the following on 1/17/2008 6:15 PM:

I've been asked to help out with the navigation bar on this page:

http://www.thesecondroad.org/

The drop down menu (which is pure CSS, save for a fix for IE) appears
behind the Flash module.

That is because Flash objects are "windowed objects" and z-index won't
fix the problem. It is the same problem with select lists where they go
"over" everything else. CSS won't fix it either (not by itself). It is
an age old problem.

<snip>

Would this be a legitimate use of Javascript. to attempt to fix this
problem? If so, what does the fix entail? Could I determine,
onmouseover, the locations of the UL, perhaps from scrollTop, and then
could I use Javascript to set the UL to an absolute position, until
mouseout? Or is there a more elegant way to do it?

onmouseover, hide the Flash app, onmouseout show it again.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[The Natural Philosopher]

Jake Barnes wrote:

I've been asked to help out with the navigation bar on this page:

http://www.thesecondroad.org/

The drop down menu (which is pure CSS, save for a fix for IE) appears
behind the Flash module. As I understand the problem, if everything on
the page was absolutely positioned, the designer could give the navbar
a z-index that lifts it above the Flash module. However, nothing on
the page is absolutely positioned. Instead, everything is floated. As
such, I believe the z-index is assigned through the implicit process
of the normal flow of the page.

Would this be a legitimate use of Javascript. to attempt to fix this
problem? If so, what does the fix entail? Could I determine,
onmouseover, the locations of the UL, perhaps from scrollTop, and then
could I use Javascript to set the UL to an absolute position, until
mouseout? Or is there a more elegant way to do it?

Or is this a problem for the designer to fix, without using
Javascript?

Odd. I got exactly this last night.

The fix was..um..something to do with the flash player definition.

Let me get the page up and copy the source..something to do with
wmode="opaque"
Here you go.. You will have to puzzle out the important bits from the
stuff Dreamweaver put in. Note the wmode/opaque bit occurs twice..once
as a param, once as and embed param. No I don't understand why, but this
was the fix I found, and it worked.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="600" height="180">
<param name="movie" value="Flashelements/Greystone.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<embed src="Flashelements/Greystone.swf" quality="high"
wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="600" height="180"></embed>
</object>

I did some googling and discovered that unless the wmodes "transparent"
or "opaque" are used the Flash 'window' is 'detached' from the main
browser..it has no z-indez at all basically. We got weird effects on
firefox and safari (drop downs would be overwritten by a rolling slide
show, but work once stopped), and the drop downs were always behind on IE7.

I think wmode=transparent, puts it into the doucment body as well, but
allows the page to shine through or something. Maybe someone more
knowledgeable will elucidate.

If you want to see this code working, www.greystone-interiors.co.uk is
the development site.

>