# Menu goes behind flash/embedded video



## smooth (Sep 26, 2005)

Hey everybody,

I've recently started redoing a website, adding pop-up menus for navigation, using the PVII pop-up menus.  I have used them before, and they work great.

However, before I didn't have any flash or embedded video on the site. The menus are activated by rolling over a Navigation Bar "trigger". That works fine, except when I do, the pop-up menu appears behind the flash or embedded video.

I know there was a thread on this a while back, but I couldn't find it. Any idea on what to try?

I've tried setting the z-index properties, but that doesn't seem to work. I might not be coding it exactly right.


----------



## Rockn (Jul 29, 2001)

z-index only works on DIV's or layers. Got a URL we can look at??


----------



## smooth (Sep 26, 2005)

Sadly, no url to work with.

I have it online, but it's in a protected directory on our site. I'll have to work on getting somewhere for it to be visible next week. 

I have an alternate way of doing it right now, I've just made the pop-up menu go sideways, instead of down, so it doesn't go up behind the flash/video.

I like it pretty good, but I'm just worried it's not as visible. I'll work on getting you a url to view, and should be able to post it up on Monday. 

Thanks for the reply.


----------



## Rockn (Jul 29, 2001)

If the pop up menus have top attributes can you set their top value to just below the Flash header? Most of the ones you can make with Dreamweaver let you position them at any x and y coordinate in relationship to their parent button. Waiting to see youe example.


----------



## smooth (Sep 26, 2005)

Ok, I have you a couple of links now.

You'll have to go from the links I give you here, or type them in manually, since the submenus have absolute paths to the parts of the page (http://www.ifgagentrecruit.com/training/training.asp) instead of relative ones (/training/training.asp), since I'm using includes. Figured it would be better that way. Not sure though.

Anyway, here is the first link: Home

Now, on this one, if you rollover "Agent Info", the edge of the menu goes under the embedded video. I know that I can just make the width less, and position it different, however, it won't work altogether since on this page: Training

if you rollover "Opportunity", then the menu goes behind the flash there. I didn't know if there was a way to set the flash or embedded video to go to the back whenever the submenu comes up.


----------



## Rockn (Jul 29, 2001)

What is the embedded video? FF will not or cannot find the plugin to download. With the little amount of animation in the header you may just want to use an animated GIF on the right side of the page instead of a Flash animation. To be honest, I would dump the embedded video, it looks tacky and not very professional. You use a Flash prsentation and give the same information and make it look seamless with the rest of the web site.


----------



## smooth (Sep 26, 2005)

I agree with you on the video, and I've tried telling the ones here at work, but they really want the video to play. 

The embedded video is a .wmv. 

I'm not sure how to make animated gif's. Can you make them in Fireworks? I agree that would probably be better than a flash.

Any ideas on how to get the menu from going behind the flash or embedded video? On the training page (second link I think), it has a flash to the left, and the opportunity menu goes behind it.


----------



## Gibble (Oct 10, 2001)

A few things have "infinite" z-index values, meaning, you can't get anything to appear on top of them.

The reason being, that certain elements use a seperate hwindow to paint themselves. DropDown boxes are the most common culprit to this.

When I had this issue, I wrote a little javascript to take care of it...allthough cludgy, this worked. The javascript hides objects with an infinite z-index that would interfere with an opening menu.

Basically, call hideElement("SELECT", document.all(myMenu)); passing along the item type you want to check for (SELECTs in this case), and the menu object that you are displaying when the menu is opened...then later use showElement("SELECT"); when you are closing the menu to show all the items again...

function hideElement(elmID, myLayer) {
var layerTop = myLayer.offsetTop;
var layerHeight = myLayer.offsetHeight;
var layerLeft = myLayer.offsetLeft;
var layerWidth = myLayer.offsetWidth;

//If layer has a parent find its true top and left positions
if (myLayer.offsetParent) {
myParent = myLayer.offsetParent
while (myParent.tagName.toUpperCase() != "BODY") {
layerTop += myParent.offsetTop;
layerLeft += myParent.offsetLeft;
myParent = myLayer.offsetParent;
}
}

//Loop through all elements to check for overlay
for (i = 0; i < document.all.tags(elmID).length; i++)
{
//Grab elements to check one at a time
myObj = document.all.tags(elmID)_;

var objTop = myObj.offsetTop;
var objHeight = myObj.offsetHeight;
var objLeft = myObj.offsetLeft;
var objWidth = myObj.offsetWidth;

//If object has a parent find its true top and left positions
if (myObj.offsetParent) {
myParent = myObj.offsetParent
while (myParent.tagName.toUpperCase() != "BODY") {
objTop += myParent.offsetTop;
objLeft += myParent.offsetLeft;
myParent = myParent.offsetParent;
}
}

var layerBottom = (layerTop + layerHeight);
var objBottom = (objTop + objHeight);
var layerRight = (layerLeft + layerWidth);
var objRight = (objLeft + objWidth);

if ((layerTop > objTop || layerBottom > objTop) &&
(layerBottom < objBottom || layerTop < layerBottom)) { 
if ((layerLeft > objLeft || layerRight > objLeft) &&
(layerRight < objRight || layerLeft < layerRight)) {
myObj.style.visibility = "hidden";
status = "Some Elements Hidden too Show Menu.";
}
}
}	
}

function showElement(elmID)
{
for (i = 0; i < document.all.tags(elmID).length; i++)
{
obj = document.all.tags(elmID);
if (! obj || ! obj.offsetParent)
continue;
obj.style.visibility = "";
}
status = "";
}_


----------



## smooth (Sep 26, 2005)

Thanks Gibble. 

I haven't tried out the script yet. I was wondering if me using the PVII pop-up menu scripts would affect the script you've given me?

Also, I think I have an alternative to it for not. Check out http://www.ifgtestsite.com and rollover Opportunity and Agent Info.

Does that look like a good navigation scheme for those menus?


----------



## Rockn (Jul 29, 2001)

You could also try to embed the video into a Flash animation. I cannot believe the people in your office think this video will be effective! For one it is almost 8MB in size, people with slow connections will move on long before it loads. Number two, it is far too LONG!! I was bored to tears in the first minute and don't know why I lasted that long. I think this feature will not be a selling point for their web site, good content alone without the movie will sell it for them. Maybe they need to put a comment page on the site to get some feedback or do a focus group before you decide to put this on the internet.


----------



## smooth (Sep 26, 2005)

I totally agree with you on this one. I tried having a picture that linked to the video, so it was optional to watch if you wanted. They didn't want that though. They HAD to have this video play right when the site comes up.

I put the video on the site, and I still haven't watched it all the way through. lol I am like you, after about a minute, I just go on to something else. But alas, this is the way they want it.


----------

