|
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
|
