CSS drop down menu over flash run by javascript problem

[ed7171]

I would like to find out how to fix drop down menu over flash when the flash content brought by the java/script below into iframe?
You may see the problem here : http://67.220.225.130/~ktaelot/#

also there is more .js .css for this picture gallery, when you press on any gallery the flash loads on top of menu which leaves it not accessible for use?

Here is the script:

<script type="text/javascript">
var fo = new SWFObject("ext/viewer.swf", "viewer", "100%", "100%", "8", "#929681");
fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.addVariable("fontColor", "0xdee0d6");
fo.addVariable("footer", "© 2009");
fo.write("flashcontent");
</script>
</div>

<div id="introlayer" style="visibility: hidden; position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:2; background: #929681; overflow: hidden">
<div style="margin-top: 60px; width: 550px; margin-left: auto; margin-right: auto;">
<span class="title" style="color: #dee0d6;">Vauxhall</span><br/><br/>

<p style="text-align:right;">
<a href="javascript:show_album();">&gt;&gt;</a>
</p>
</div>
</div>

<script type="text/javascript" language="javascript">

function show_album() {

document.getElementById('mainlayer').style.visibility = 'visible';
document.getElementById('introlayer').style.visibility = 'hidden';
document.getElementById('introlayer').style.overflow = 'hidden';
}

function show_intro() {

document.getElementById('mainlayer').style.visibility = 'hidden';
document.getElementById('introlayer').style.visibility = 'visible';
document.getElementById('introlayer').style.overflow = 'auto';
}

var skip_intro = window.location.href.indexOf("?skip_intro")!=-1;
if (!skip_intro && 0) {

show_intro();
}
</script>

[jscheuer1]

You have at least two problems (the second of which appears to have been worked out, but that might be only for when you have no content in the iframe):


Flash content is normally displayed separately than other content on a page, so is not able to be 'stacked', generally appearing over everything.

Iframes generally appear over everything.


If you really have this second issue worked out, then all you need to do is add wmode transparent to the Flash. With the script you are using for that, you can do so like:


<script type="text/javascript">
var fo = new SWFObject("ext/viewer.swf", "viewer", "100%", "100%", "8", "#929681");
fo.addParam("wmode", "transparent");
fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.addVariable("fontColor", "0xdee0d6");
fo.addVariable("footer", "© 2009");
fo.write("flashcontent");
</script>


Though, as I say, the content in the iframe may be a problem, different browsers treat this differently, and you may have already overcome this via javascript. If not, there must be no background color for anything appearing on the page in the iframe (set it to transparent for all elements including body and html). The iframe itself must have (for IE only) its allowtransparency attribute set to true. Even with all of that, the position and z-index style values must be set properly for the desired stacking. But, as I say, this may already be worked out in some other way, so give the first idea (about the Flash script) a try and see what happens, you will need to do at least that much regardless.

[ed7171]

Thank You John

Now the menu is working.:)