iframe bug fixed in ie/firefox/safari

Poster: Mrfunkleberry
Dated: Sunday May 15 2005 - 10:42:51 BST

If your menus overlap an Iframe.
You get all sorts of problems in all sorts of browsers.
There is a solution out there using DIVs.
But for me that would mean restructuring the entire site.

So i came up with another solution, and yes it really does work in ie fire fox and safari (probably more though untested).

I will post code here if someone can solve my final bug:

browser: FireFox
code: menuDisplay('menu1',0);
problem:
the menu will hide properly, however when user tries to select another menu or activate the same menu again, it will not appear, until the second atempt....

Poster: Ruth
Dated: Sunday May 15 2005 - 18:12:56 BST

I take it you're using some kind of function to do what you are mentioning. I don't do functions, but do you have to somehow get it to turn off after you trigger it? That may be way out in left field, as I said I don't do functions, but from your description of having to mouseover the 2nd time, it just seems that you use the function and then you go to do something but the function is still in play somehow.

Ruth

Poster: kevin3442
Dated: Tuesday May 17 2005 - 1:16:04 BST

I have only encountered the "sticky menu in an iframe" problem with Mozilla browsers on a PC (can't speak for Macs, since I don't use them). I've had some success getting around the problem by setting position="fixed"; in each of the submenus that overlaps the iframe. Have you tried that?

Cheers,

Kevin

Poster: kevin3442
Dated: Tuesday May 17 2005 - 8:07:11 BST

Hi Again,



I just noticed the last part of your initial post in this thread. Your syntax for calling menuDisplay() is wrong. The first parameter you pass should be an index into the _m[] array. It should be a number [e.g., the return of getMenuByName() ], not a string. I know this runs counter to the documentation of menuDisplay() on the methods page (which says it should be a menu object, not a string), so you'll just have to trust me on this . For example, suppose you have a menu named "Products". You could use menuDisplay() like so

to close the menu.

Here's a thought... From this post and recent others of yours, I think I see where you're going with this. You're writing an event handler for onmouseover in your iframe, to figure out which submenus are open, and then closing them. That'd probably work, but it seems like unnecessary effort (although, if you're like me, it's a little fun). Instead of doing that, have you tried just calling closeAllMenus() instead? The name of the function is a little misleading. closeAllMenus() will close any open menu, except for menus that have the alwaysvisible property turned on (i.e., it won't close your main menu). Essentially, it closes all open submenus.

In other words, use the onmouseover event in your <iframe> tag, like so:

I just tried it in FireFox and Netscape and it works just fine for the "sticky submenu" problem with iframes.

Hope that helps,

Kevin

here's the code..

Poster: Mrfunkleberry
Dated: Tuesday May 17 2005 - 13:31:06 BST

Here we go, I think I’m getting reluctant menus because I’m basically abusing how the original scripts work.

Here my code and explanation of what I’m doing.

It works in IE / firefox / safari that I’ve tested…

STEP 1
Place iframe in a div (I’ve called it layer7)
I use this div to position my iframe on screen.
And then read its position later

If you want crossbrowser resize & position iframescripts let me know

STEP 2
include in bodytag
onload=" hidemenus();"

STEP 3
include in iframetag
onload="hidemenus();"

STEP 4
include this in every submenu

if(document.getElementById && !(document.all)) {
keepalive=1;
}


Ie…


with(milonic=new menuname("HELP")){
style=menuStyle;
overflow="scroll";
if(document.getElementById && !(document.all)) {
keepalive=1;
}

etc etc….


STEP 5

Add this script

<script language="JavaScript">

var tempXmaindoc = 0;
var tempYmaindoc = 0;
var tempXiframe = 0;
var tempYiframe = 0;

function hidemenus(){

if(document.getElementById && !(document.all)) {
document.getElementById('framecontent').contentDocument.captureEvents(Event.MOUSEMOVE)
document.getElementById('framecontent').contentDocument.onmousemove = getMouseXYiframe;
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXYmaindoc;

for(_a=1;_a<_m.length;_a++)
{
if(_m[_a][10])menuDisplay(_a,0)
}
}
}

function getMouseXYiframe(e) {
// grab the x-y pos.s if browser is NS
tempXiframe = e.pageX
tempYiframe = e.pageY

// catch possible negative values in NS4
if (tempXiframe < 0){tempXiframe = 0}
if (tempYiframe < 0){tempYiframe = 0}


rolloutcheck('iframe');
return true
}


function getMouseXYmaindoc(e) {
// grab the x-y pos.s if browser is NS
tempXmaindoc = e.pageX
tempYmaindoc = e.pageY

// catch possible negative values in NS4
if (tempXmaindoc < 0){tempXmaindoc = 0}
if (tempYmaindoc < 0){tempYmaindoc = 0}



rolloutcheck('maindoc');
return true
}



function rolloutcheck(activearea){
var activemenu = "";
for(_a=1;_a<_m.length;_a++)
{
if (_m[_a][7] == 1) { activemenu = _a; }
}

if (activemenu != ""){

menuPosition = gpos( gmobj("menu"+activemenu) );

if (activearea == "iframe" && tempXiframe > 1 ) {
tempXiframe = tempXiframe + parseInt(document.getElementById('Layer7').style.left);
tempYiframe = tempYiframe + parseInt(document.getElementById('Layer7').style.top);

if (tempXiframe < menuPosition[1] || tempXiframe > (menuPosition[1] + menuPosition[3])){
menuDisplay(activemenu,0); }
if (tempYiframe < (menuPosition[0] - 50) || tempYiframe > (menuPosition[0] + menuPosition[2])){
menuDisplay(activemenu,0); }
}

if (activearea == "maindoc" && tempXmaindoc > 1) {
if (tempXmaindoc < menuPosition[1] || tempXmaindoc > (menuPosition[1] + menuPosition[3])){
menuDisplay(activemenu,0); }
if( tempYmaindoc < (menuPosition[0] - 50) || tempYmaindoc > (menuPosition[0] + menuPosition[2])){
menuDisplay(activemenu,0); }
}

}
}


</script>

minor additional

Poster: Mrfunkleberry
Dated: Tuesday May 17 2005 - 13:34:16 BST

sorry,

i also called my iframe 'framecontent'...