home / faq / faq 17

Frequently Asked Question #17

Question: I have a print only style sheet, and the area where my menus appear within the page are all marked with a print style sheet class which hides the areas (i.e., sets them to display:none) when the page is printed. But the menus continue to be displayed on the page. How can I get the menus to honor the display:none setting, so that they, too, will be hidden when the page is printed?

Answer: In HierMenus 6 this is relatively straight forward, since HierMenus 6 allows you to specify class names that will be applied to menus. Simply assign the class name that hides your elements on the printed page to the menus via the MenuClass parameter. For example, imagine this is your print only style sheet:

.noPrint {display:none}

Then within your configuration file, probably within your UpdateDefaults call, you would apply this class name:

MenuClass:"noPrint",

And you're done. Well, almost. If you're using IFrame Masks (see Using the Custom Code in HM_Loader.js for further detail), then you may need to force the display:none behavior on your IFrames, as well. If you're only using IFrames for the IE masking technique, then you can easily turn them all off when printing by altering your style sheet, e.g.:

iframe, .noPrint {display:none}

If you're using IFrames for other purposes, however, then you won't want to do that; since it would hide all IFrames when the page is printed, including your own. Instead, you will need to modify the HM_f_IEMaskCreate function (in HM_Loader.js) to assign the noPrint class directly. Continuing with the above example, we would change the verbose version of HM_Loader.js to look like this:

this.IEMask = HM_MenusTarget.document.createElement("IFRAME");
this.IEMask.className="noPrint";

and the optimized version to look like this:

this.rt=Hg.document.createElement("IFRAME");
this.rt.className="noPrint";

Feel free to contact us if you need help implementing this. Again, the direct adjustment to HM_f_IEMaskCreate is necessary only if you're using the IE IFrame masking technique, and only if your printed pages are showing menu remnants where the menus would normally show.

By the way, the reason your existing class assigments aren't hiding the menus is because HM menus are displayed and built outside the page flow, as absolutely positioned objects; therefore they are not bound by the elements they happen to be appearing over (it may help to think of them as appearing over certain elements in the page, but not within them. The only element on the page that the menus appear within is the body). Thus, though you may have divs or spans around the places where the menus appear, those divs and spans have no effect on the menus themselves.

Supplying print only class assignments to menus is also possible in HierMenus versions 4 and 5, though admittedly trickier. You can access the menus by their ID, which is formed by adding the array number of the menu as a suffix to the string HM_Menu. So, if you created 5 menus via HM_Array1 through HM_Array5, adding this to your print only style sheet should do the trick:

#HM_Menu1, #HM_Menu2, #HM_Menu3, #HM_Menu4, #HM_Menu5 {display:none}

As a general rule, you only need to be concerned about your top level menus, as they are typically the only menus that may be showing when the user prints the page. But if you need to do child menus you could add them to your list above as well (HM_Menu1_1, HM_Menu3_2, etc.). A bit cumbersome, but it will work.

Note that this method of applying style sheet specific styling to menus in HierMenus 4/5 via their IDs is generally not recommended; as HierMenus uses its own color schemes and the results can be confusing. (To assign style classes to menus in HM 6 use MenuClass, ItemClass, etc.) But using them to disable their display in print only style sheets is fine.