Thread

Based off an EE template, I’m trying to add a drop down menu to one of my Nav buttons.

Unfortunately, when you are at a page that contains a flash gallery, the drop down menu *sometimes* goes *behind* the flash window.

It doesn’t seem to be browser specific, I get it in FF2 and IE6 at work, but not FF3 and Safari at home. I can’t do much more testing than that, unfortunately, due to restrictions in what browsers I run in the office. I get mixed reports from my users.

The pages affected are:

http://www.rt2photo.com

The drop down menu is on the “Portfolio” button, and any of the Portfolio pages run a flash gallery.

Thoughts?

Where you are using swfobject to post your flash (like on: http://rt2photo.com/portfolio/individualandchild/)
try replacing the javascript code with this:

[removed]
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");    
        fo.addVariable("preloaderColor", "0xffffff");
        fo.addVariable("xmlDataPath", "gallery.xml");    
        fo.addVariable("wmode", "transparent");
        fo.write("flashcontent");    
    [removed]

Not sure if it will work, but we’ll see 😉.

Codysplace:

I’ve made the change to the individual and child portfolio page, and will check out of the menu overlaps when I hit the office on Monday, of course I can’t make it overlap badly.

one oddness though - with the new code, the slideshow doesn’t autoplay - it stalls on the download flash page.

Thoughts?

Thank you for looking at this!

I messed up, it should be:

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");    
        fo.addVariable("preloaderColor", "0xffffff");
        fo.addVariable("xmlDataPath", "gallery.xml");    
        fo.addParam("wmode", "transparent");
        fo.write("flashcontent");

Put that in between your “< script >” tags.  The line you need to add to all your swfobj code is this:

fo.addParam("wmode", "transparent");

.  That should make it so things can go over top of the flash.

Why not just use CSS?

I do not think you can use CSS to make flash not cover other elements without using the param I posted above.

Sorry, it is late and I responded without looking really hard at what the problem was. I went to the site and saw an overlapping problem with the menu where it was overlapping a navigation element and posted based on that. You are correct that the transparent code that you posted should fix the issue. Sorry…

M.

No worries, I see what you mean though, it would be better to use CSS for the menu system then use all of that javascript.

I’m not particularly experienced when it comes to building sites from the code up - if CSS was a better way to do this, and someone could assist with some resources or links, I’d have no problem switching over.

I’m going to try the updated code today - thanks for the assist!

I just wanted to publicly thanks CodysPlace.com for the excellent information - it resolved my problem!

Thanks Cody!

No worries mate!  I had the same thing happen to me a year ago or so and I know how frustrating it can be when it’s such an easy fix like that 😊.

To answer your question above, I’ve been looking and I’m not sure there are CSS tabs that show that drop down menu without using a bit of javascript.  The following link might provide you a better solution than what you are using now: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
Seems to be a bit cleaner.

Best Wishes!