All flyouts appearing in same location (on Mac IE only)

Poster: mfindlay
Dated: Friday October 6 2006 - 19:01:57 BST

We are using version 5.758 (registration 203715) and are invoking the popup() function when the user hovers over a <td>.

This works fine on all platforms and browsers except IE on the Mac. With IE/Mac, the flyout menu appears in the same location for all flyouts.

Here is a sample of one of the TD popups within the htm page:

htm code


menu_data.js
In menu_data.js we do set a fixed 'left' and 'top' for each of the flyouts, and perhaps we're using this wrong, but it does work for all other browsers and platforms. Here is how we're using the 'left' and 'top' :

var nflyout_top = -22;
var nflyout_left = 200;

// MAIN STYLE
with(mainMenuStyle=new mm_style()){
onbgcolor="#989374"; // hover background color
offbgcolor="#C7C3A8"; // normal (non-hover) background color
offcolor="#332A17"; // normal (non-hover) text color
oncolor="#FFFFFF"; // hover text color
offclass="mmpadding"; // custom style attached to menu
onclass="mmpadding"; // custom style attached to menu
bordercolor="#C7C3A8"; // border color A89C91
borderstyle="solid";
borderwidth=1;
fontfamily="Arial"; // font / font family
fontsize="11px"; // font size
fontstyle="normal"; // font style
fontweight="bold"; // font weight (bold)
//outfilter="Fade(duration=0.1)";
overfilter="Fade(duration=0.1);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
padding=3; // menu item cell padding
pagebgcolor="#C7C3A8"; // this is the (non-hover) background color of the menu item last clicked
pagecolor="#FFFFFF"; // this is the (non-hover) text color of the menu item last clicked
separatorcolor="#C7C3A8"; // separator color
separatorsize="1";
subimage=sBaseSite + "graphics/common/flyoutarrow.gif";
subimagepadding="2";
}

//******************** OUR CHALLENGE
with(milonic=new menuname("mm_ourchallenge")){
overflow="scroll";
style=mainMenuStyle;
itemwidth=200;

top=nflyout_top;
left=nflyout_left;
aI("text=flyout item 1;url=" + sNonSSLBaseSite + "sections/ourchallenge/ourchallenge_page_1.htm;");
aI("text=flyout item 2;url=" + sNonSSLBaseSite + "sections/ourchallenge/ourchallenge_page_2.htm;");
aI("text=flyout item 3;url=" + sNonSSLBaseSite + "sections/ourchallenge/ourchallenge_page_3.htm;");
}

We use the above model for each of the flyouts, never changing the value of the nflyout_left and nflyout_top, but again, it works on all other browsers and platforms as expected.

You can see an example of this behaviour on our test servers:
here.

Are we using the 'left' and 'top' properly here? Is there a workaround we can use to make it work properly on Mac IE?

Thanks!
Mark
[/code]

Poster: kevin3442
Dated: Friday October 6 2006 - 20:38:39 BST

Hi Mark,

I can't test, as I don't have a mac. But a couple of quick questions: at what position are the menus opening in macIE? Have you tried removing (comment out) the top= and left= settings in the submenus to see if that helps (one would suffice to test)?

Also, a suggestion: I've never used popup() to open a menu from a td mouseover, but have with images. I've found that with some browsers, setting the element's id attribute doesn't work, but setting the name attribute does. So I always set both. In other words, try setting id="imgourchallenge" AND name="imgourchallenge" in the <td>.

Cheers,

Kevin

Poster: mfindlay
Dated: Sunday October 8 2006 - 1:19:27 BST

Hi Kevin,

All of the flyouts are appearing, so I don't think that the name= vs. id= is an issue since Milonic seems to find the correct flyout (the flyout contents are correct for each flyout).

The position of all of the flyouts are the same: the position of the first flyout. So while my TDs are stacked vertically, the flyout invoked for each TD appears in the spot where the first TD flyout appears.

Again this is only on Mac IE.

I would guess that this is because the DOM on Mac IE is not interpreting the TD as the 'owning' or 'parent' item. Instead, it is treating the table as the parent item, and thus the left and top specified for each flyout is relative to the table, not the individual TDs.

Assuming this is correct, is there a way I can help specify to Milonic that the TD is the parent / owning item?

Thanks!
Mark

Poster: mfindlay
Dated: Sunday October 8 2006 - 1:48:24 BST

My analysis of the Mac/IE was correct (at least I assume so since my fixed works

I inserted a <div> inside the TD, then placed the onmouseover and onmouseout statements within the <div> tag, and thus Mac IE treated the DIV as the parent level item and the flyout appears in the correct location now for each TD.

Here is the solution (again, this special code was needed only for Mac/IE but works on all browsers and platforms)



Hope this helps anyone else out there.

Thanks for your help in triggering some other thought processes

Mark

Poster: kevin3442
Dated: Sunday October 8 2006 - 3:46:33 BST



Hi Mark,

The id and name specify the target element where you want to open the the flyout (i.e., menu), not which menu you want to open. The name of the menu is specified in the first parameter passed to the popup() function; the id of the target element in the second parameter. So, as long as the specified submenu exists, the popup() function would open it. It's the "where" part that was the trouble... it was having trouble finding the location of the element containing the id passed to popup(); that's why I suggested using the name attribute in the element as well.

I would be curious to know if that would have worked, as it has worked for me in similar circumstances. In any case, the important thing is that you came up with a working fix... making it work the way you want it to is what counts!

Thanks for posting your fix.

Kevin