Concealing javascript menu from Print Preview

[Rob McLennan - ZETLAND]

Hi,

I have set up an external stylesheet, named "print.css", to format the
style of all pages printed from my company's website. I've been
previewing my changes to the stylesheet by doing File\Print Preview in
IE6 and noticed that occasionally the leftmost button of the
javascript menu (CoolMenus Version 3.02) on our website is printed. (I
have wrapped the javascript that generates this menu in a DIV so that
it is concealed from printing via the print.css stylesheet)

It took me a while to work out what the actual cause of this problem
was; the occurrence of the leftmost button of our javascript menu
seemed so random. What's happening is that, by chance, when you
navigate to Print Preview under the File menu in IE, the mouse often
ends up directly over the top of the leftmost button of the javascript
menu, triggering momentarily the mouseover for that menu item which in
turn includes it in the print preview. i.e. it bypasses the
display="none" instruction set up in the print.css, printing the
literal snapshot of the page.

I've had some luck by adding a class="noprint" to the imgs and divs
within the javascript code, but this does not remove the entire menu.
My knowledge of Javascript is very scratchy. Can anyone suggest how I
can modify the code to conceal the entire menu upon printing?

i.e. do i need to more than just wrapping the reference (in the html
pages) to the javascript menu in DIVs?

Many thanks in advance,

Rob.

[Michael Winter]

On 16 Feb 2004 17:18:20 -0800, Rob McLennan - ZETLAND
<ro*****@hotmail.com> wrote:

[snip]

I've had some luck by adding a class="noprint" to the imgs and divs
within the javascript code, but this does not remove the entire menu.
My knowledge of Javascript is very scratchy. Can anyone suggest how I
can modify the code to conceal the entire menu upon printing?

i.e. do i need to more than just wrapping the reference (in the html
pages) to the javascript menu in DIVs?

How have you added this "print" style sheet?

I would do like this:

Your printing styles should be an alternate style sheet with the media
type "print". The style rules that are used in conjunction with the
JavaScript menu should be a placed in another, separate file and added as
a preferred style sheet with the media type "screen". Finally, all of the
style rules that are common to both the printed and JavaScript styles
should be in a third file that is added as a preferred sheet, with the
media type "all".

In the print style sheet, the element that contains the JavaScript menu
should, of course, be given the rule: "display: none". The rest of that
style sheet would modify parts of the common sheet for printing.
The menu style sheet should only contain rules that directly affect the
menu, and only the menu. No "common" elements will be in need of
modification.
The common style sheet would contain everything else.

The resulting HTML would be (in the HEAD element):

<link rel="stylesheet" type="text/css" media="all"
href="common.css">
<link rel="stylesheet" type="text/css" media="screen"
href="menu.css" title="With menu">
<link rel="alternate stylesheet" type="text/css" media="print"
href="print.css" title="Printing">

For more information on the different kinds of external style sheet, take
a look at:

http://www.w3.org/TR/html401/present/styles.html#h-14.3

As this is really a style sheet question, you might want to direct this
discussion to comp.infosystems.www.authoring.stylesheets.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Rob McLennan - ZETLAND]

Michael Winter <M.******@blueyonder.co.invalid> wrote in message news:<op**************@news-text.blueyonder.co.uk>...

On 16 Feb 2004 17:18:20 -0800, Rob McLennan - ZETLAND
<ro*****@hotmail.com> wrote:

[snip]

I've had some luck by adding a class="noprint" to the imgs and divs
within the javascript code, but this does not remove the entire menu.
My knowledge of Javascript is very scratchy. Can anyone suggest how I
can modify the code to conceal the entire menu upon printing?

i.e. do i need to more than just wrapping the reference (in the html
pages) to the javascript menu in DIVs?

How have you added this "print" style sheet?

I would do like this:

Your printing styles should be an alternate style sheet with the media
type "print". The style rules that are used in conjunction with the
JavaScript menu should be a placed in another, separate file and added as
a preferred style sheet with the media type "screen". Finally, all of the
style rules that are common to both the printed and JavaScript styles
should be in a third file that is added as a preferred sheet, with the
media type "all".

In the print style sheet, the element that contains the JavaScript menu
should, of course, be given the rule: "display: none". The rest of that
style sheet would modify parts of the common sheet for printing.
The menu style sheet should only contain rules that directly affect the
menu, and only the menu. No "common" elements will be in need of
modification.
The common style sheet would contain everything else.

The resulting HTML would be (in the HEAD element):

<link rel="stylesheet" type="text/css" media="all"
href="common.css">
<link rel="stylesheet" type="text/css" media="screen"
href="menu.css" title="With menu">
<link rel="alternate stylesheet" type="text/css" media="print"
href="print.css" title="Printing">

For more information on the different kinds of external style sheet, take
a look at:

http://www.w3.org/TR/html401/present/styles.html#h-14.3

As this is really a style sheet question, you might want to direct this
discussion to comp.infosystems.www.authoring.stylesheets.

Mike

Thanks Mike,
What I've done is similar to what you suggest. I've added the
following to each html page:

<link rel="stylesheet" href="../print.css" type="text/css"
media="print">
<link rel="stylesheet" href="../stylesheet.css" type="text/css">

and everything else you suggest I've done.

I think the problem lies in the proprietory nature of the Javascript
menu (Coolmenus 3.02) and my lack of knowledge of Javascript in
general. I've posted the same question on the site that produces the
original script (http://www.dhtmlcentral.com/forums/t...TOPIC_ID=19840)

Thanks for your help and time,
Rob.