Problems with DHTML menu bar and flash

[raffie]

Hi... i am having problems when it comes to integrating flash and dhtml menu bars... because the flash overlaps the menubar so you can't see the submenus of the menu bar... Do you guys have the semilar problem? Do you guys have a solution for that?

here is the sample link of the problem i am talking about.

http://www.gramprecision.com/updates/

 

[JoelNaten]

That site will likely not display properly for many web users, even if you do resolve the problem. DHTML doesn't work well in older browsers and flash takes time for dialup people to download. Just my two cents.

http://www.blogeasy.com/

 

[raffie]

what can you suggest?

 

[adam55]

This is a common problem, and there are 2 different solutions, depending on what browsers you want to support.

Prior to IE 5.5, you just had to hide the 'windowed' elements (flash, select boxes, etc) by checking all such elements in the page and determining if they overlap.

Starting with IE 5.5, though, iframes have the strange property that they can go over 'windowed' elements AND under normal elements. So, basically, you have to put an iframe underneath the menu, and over the flash element.

Here's some code that I use to do the trick. You should be able to modify it to work with your menus. The first argument is the div tag (or whatever) that contains your menu, and the second argument is a bool that specifies whether the item is becoming appearing (1) or dissappearing (0). Also, you must call this function AFTER the menu element had been displayed, because it needs to know the physical size of the element.

Hope it helps.




//allows DIV tags to show over SELECT boxes
// various browsers have trouble with this
function hideSelectBoxes(el, on)
{
if ((HM_IE && !HM_Mac && !HM_Opera) || HM_Safari)
{
//get menu dimensions
var p = getAbsolutePosition(el);

if (HM_IE_version >= 5.5)
{
//in this case, we create an IFRAME that sits just under the div tag
//this is done because IE 5.5+ exibits the strange behaviour that
//an iframe can be displayed over a select box AND under a div tag
//but a div tag, by itself, can never go over a select box
//so, by layering them like this, the menu is properly displayed

var iframeID = el.id+"_hide_iframe";
var myIframe;
if (myIframe = document.getElementById(iframeID))
{
myIframe.style.display = (on) ? "" : "none";
myIframe.style.left = p.x;
myIframe.style.top = p.y;
myIframe.style.width = el.offsetWidth;
myIframe.style.height = el.offsetHeight;
}
else //create the iframe
{
myIframe = document.createElement("IFRAME");
myIframe.setAttribute("id", iframeID);

myIframe.style.border=0;
myIframe.style.position="absolute";
myIframe.style.left=p.x;
myIframe.style.top=p.y;
myIframe.style.width=el.offsetWidth;
myIframe.style.height=el.offsetHeight;
myIframe.style.zIndex=el.style.zIndex-1;

document.body.appendChild(myIframe);
}
}
else //IE version is below 5.5
{
//in this case, the browser will not allow a div to be displayed
//over a select box no matter what, so we simply grab all the
//select boxes and hide them if there is overlap with the new menu
//or show them if the menu is closing

//get menu dimensions
var HM_EX1 = p.x;
var HM_EX2 = el.offsetWidth + HM_EX1;
var HM_EY1 = p.y;
var HM_EY2 = el.offsetHeight + HM_EY1;

//now get all "trouble" elements
var tags = new Array("applet", "iframe", "select");

for (var k=0; k<tags.length; k++ )
{
var elems = document.getElementsByTagName(tags[k]);
var elem = null;

for (var i=0; i<elems.length; i++)
{
elem = elems;

//get elem dimensions
p = getAbsolutePosition(elem);
var HM_CX1 = p.x;
var HM_CX2 = elem.offsetWidth + HM_CX1;
var HM_CY1 = p.y;
var HM_CY2 = elem.offsetHeight + HM_CY1;

if ( !((HM_CX1 > HM_EX2) || (HM_CX2 < HM_EX1) || (HM_CY1 > HM_EY2) || (HM_CY2 < HM_EY1)) && !isDescendant(el, elem) )
{
//elements overlap, hide or show elem
if (on)
{
//save old value
elem[el.id] = elem.style.visibility;

//hide element
elem.style.visibility = "hidden";
}
else
{
//restore old value
elem.style.visibility = elem[el.id];
}
}
}
}
}
}
}

// finds position on page, even for inline elements
function getAbsolutePosition(elem)
{
var r = { x: elem.offsetLeft, y: elem.offsetTop };
if (elem.offsetParent)
{
var tmp = getAbsolutePosition(elem.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}

 

[adam55]

oops, I forgot to include the code that gets all the HM_... variables.

Here it is:


HM_DOM = (document.getElementById) ? true : false;
HM_NS4 = (document.layers) ? true : false;
HM_IE = (document.all) ? true : false;
HM_IE4 = HM_IE && !HM_DOM;
HM_Mac = (navigator.appVersion.indexOf("Mac") != -1);
HM_IE4M = HM_IE4 && HM_Mac;
HM_Opera = (navigator.userAgent.indexOf("Opera")!=-1);
HM_Konqueror = (navigator.userAgent.indexOf("Konqueror")!=-1);
HM_Safari = (navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ));
HM_IsMenu = !HM_Opera && !HM_Konqueror && !HM_IE4M && (HM_DOM || HM_NS4 || HM_IE4);
HM_BrowserString = HM_NS4 ? "NS4" : HM_DOM ? "DOM" : "IE4";
HM_IE_version = (HM_IE) ? parseFloat(navigator.appVersion.split("MSIE")[1]) : null;



Of course, you can use some other browser sniffer if you want, but we have these in our system already, so I just use them.

 

[raffie]

thanks dude... does this also work with netscape? if i want it in netscape... do you also have a code for that?
thanks dude... more power to you.

 

[adam55]

Well, I don't use it for flash, so I don't know if it holds true there also, but I know that netscape doesn't have the same problem with select boxes. If netscape does have this problem, then I very much doubt that the iframe trick will work for it. Your best bet would probably be to change the if statements to allow netscape to fall into the "else //IE version is below 5.5" section, and make sure that you change the tags array to include whatever tag you use for the flash animation.