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?

 

[The Natural Philosopher]

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="clsid27CDB6E-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.

 

[Jake Barnes]

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="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v..."
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 tried this trick, but it doesn't seem to have any effect. Perhaps
now we could try to play with z-index? But then that raises the
original question, is this a task for the designer, or is this the
kind of thing best fixed with Javascript?

 

[David Mark]

I tried this trick, but it doesn't seem to have any effect. Perhaps
now we could try to play with z-index? But then that raises the

Yes, you are halfway there.

original question, is this a task for the designer, or is this the
kind of thing best fixed with Javascript?

By designer, do you mean the person responsible for the CSS? If so,
then yes, tell them to add a z-index rule for the menu bar. Also,
tell them they are incompetent and shouldn't be designing Web pages.
The inert ("click to activate this control") Flash movie in the middle
of the page is one red flag. For lots more, post the link in a CSS
group.

And certainly the popups are positioned. If they were floated, they
would re-flow the document when shown.

Also, those menus are awful. I don't know if IE7 is getting the CSS
or the JavaScript version, but the popups are twitchy and out of
position. Popup menus are absolutely the worst interface for
navigation, even when done right. Done wrong, as in this case, they
are a major value-minus.

 

[Jake Barnes]

Yes, you are halfway there.


By designer, do you mean the person responsible for the CSS? If so,
then yes, tell them to add a z-index rule for the menu bar. Also,
tell them they are incompetent and shouldn't be designing Web pages.
The inert ("click to activate this control") Flash movie in the middle
of the page is one red flag. For lots more, post the link in a CSS
group.

Sorry to go off-topic, but what do you mean? What do you mean by
"inert click to activate this control"? It's possible you saw a page
that was still under-development. Were you talking about this page?
http://www.cyberbitten.com/

And certainly the popups are positioned. If they were floated, they
would re-flow the document when shown.

They were floated, but I think in the new version they are
positioned.

Also, those menus are awful. I don't know if IE7 is getting the CSS
or the JavaScript version, but the popups are twitchy and out of
position. Popup menus are absolutely the worst interface for
navigation, even when done right. Done wrong, as in this case, they
are a major value-minus.

The menus are awful in what sense? Bad CSS? Bad Javascript for IE? As
far as I know, the design-plus-Javascript is drawn from a much quoted
article over at A List Apart.

 

[Jake Barnes]

JakeBarnessaid the following on 1/21/2008 11:14 PM:



The z-index property has no effect on windowed objects. Flash apps,
select elements, and some others.


It needs to be corrected by the designer. Don't try to put a JS band aid
on a design issue.

We've looked into this issue, but, sad to say, it seems like there is
no solution except for Javascript solutions.


-- lawrence