473,396 Members | 2,147 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Concealing javascript menu from Print Preview

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.
Jul 20 '05 #1
2 4639
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)
Jul 20 '05 #2
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.
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Rob McLennan - ZETLAND | last post by:
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...
1
by: anonieko | last post by:
> Use x = window.Open(...) x.document.write( yourhtml) > How to print from javascript using .print > How to use ContentWindow > > How t use getElementById > How to get HTML of document...
6
by: Kebmo | last post by:
The client insists on having a link or button that the user can click to view the printable version in the browser. I already have the css done for the print version, so thats not a problem. I...
7
by: e | last post by:
I've been having an extremely difficult time finding an answer to this in IE / js groups, so I thought I'd try here. I've got an aspx page that delivers loads of report data into custom-named...
3
by: Jlcarroll | last post by:
Hi, I am building a web page.and have a simple javascript menu... I call the javascript menu within a div block that my print sytlesheet has set as a display: none;, well all the content in that...
7
by: sosamv | last post by:
Hi all!, I'm creating a app with PHP and MySQL, the system administrator is capable of creating profiles, on each profile we create, we add a custom access menu (a javascript tree view menu), theres...
5
by: maminx | last post by:
hello all, i want to call window print preview (in browser, File - Print Preview) by javascript, this is the code function printpreview() { var OLECMDID = 7; /* OLECMDID values: * 6...
4
by: maminx | last post by:
hello all. i have html page to be printed out..it's generated by the button print like below <input type="button" name="btn_print" value="Print Invoice" onClick="javascript:window.print();"> of...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.