home / samples / iframe masking

IFRAME Masking

Using the IFRAME masking method provided in HierMenus 6, you can configure your menus so that, in Internet Explorer 5.5 and 6, they will cover form select elements (and just about any other type of windowed elements--including other IFRAMEs--for that matter) when the menus appear over the top of them; instead of the select element showing through the menu. In previous versions of HierMenus your only options were to redesign the page, or hide the select elements completelty when the menus appeared.

Regrettably, the IFRAME masking method demonstrated here works only in Internet Explorer 5.5 and 6; thus, depending on what type of element is giving you a problem, you may still need to hide the elements when they are rolled over.

The IFRAME masking method is implemented by way of Menu Event Hooks. Learn more about them in the Menu Event Hooks Mini-Tutorial. And you can learn a bit more about the masking code itself in the advanced setup topic Using the Custom Code in HM_Loader.js. Finally, note that it is certainly still possible to hide most elements that show through your menus, if you prefer. That's the purpose of the HM_f_ToggleElementList function included in your HM_Loader.js file; which is also discussed in the Custom Code topic referenced above as well as Bulletin 6.

On this page, the horizontal menu above is configured to use the IFRAME masking method in Internet Explorer 5.5 and above; while our main navigation menus that pop out from the upper left of the page are configured to hide the selects per the HM_f_ToggleElementList function. Browsers other than IE5.5+ will hide the selects from both sets of menus.

Form selects are only one example of windowed elements; Java Applets, Flash Applets, and IFrames themselves are other examples of windowed elements that can cause menu blocking problems. Because of their increasingly common use, and the fact that they demonstrate some unique, problematic situations in HierMenus (see especially Known Issue #24), IFrames deserve some special mention here. On the lower part of this page is another horizontal menu that is just above an IFrame (IFrames are not supported in Netscape 4, so this example applies only to later browsers). In IE5.5 and later, menus are allowed to overlay IFrames (it is this very fact that allows the IFrame masking technique), and therefore the IFrame masking technique is not necessary. It is therefore disabled for those browsers. Other browsers present inconsistent results when displaying menus over IFrames, so we've found that hiding the IFrame entirely (using a technique such as HM_f_ToggleElementList) produces the cleanest result. Specifically:

• In Opera 7 and 8 the menus appear behind the IFrame. Menus appear to work correctly over IFrames in Opera 9.
• In Safari (1.2), the menus appear in front of the IFrame, but when the mouse moves over the portion of the menu that itself is over the IFrame, a mouseout is triggered, and the menu is hidden. I.E., as far as HierMenus can tell, the mouse has truly rolled off the menu, and therefore it should be hidden. In Safari 1.3 this behavior is corrected; however, the mouseout for the menu is not triggered until the mouse exits both the menu and the IFrame itself; as long as the mouse remains within the IFrame border, the last menu displayed will remain visible.
• In Mozilla browsers, we've noticed behavior somewhat like the Safari behavior; though the mouseover is retriggered when the mouse clears the IFrame border. Menus therefore appear to work properly over the IFrames in this browser for the most part. This problem is corrected in Firefox 1.5+.

Again, see Known Issue #24 for further information and an additional, reduced example page.

The moral of the story is to test your IFrame based deployments carefully to see if the results are acceptable to you. And remember that you can hide the IFrame using the same technique described above for select elements. In the example below, we specifically do not hide the IFrame; so that you can see the result of popping up menus over the top of IFrames in various browsers.

For further information, check out the reference entries for these configuration parameters:

HM_OnMenuCreated
HM_OnMove
HM_OnVisibilityToggle
Using the Custom Code in HM_Loader.js
Menu Event Hooks Mini-Tutorial
FAQ #1
Known Issue #1

Click the link below to have a look at the configuration file we used to generate these sample menus:

iframe.js