Hiding a Javascript menu from printing with CSS

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.

Rob McLennan - ZETLAND wrote:

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.

If you have this site on the web (as opposed to an intranet for example)
you have bigger problems than printen a button occasionally. Making your
navigation menu *depend* on JavaScript is not such a good idea. Many
visitors may not have JavaScript able browsers. One of those visitors,
with no JavaScript possibilities, is Google.

If you put up a URL, we can take a look at the problem and try to help
you solve it.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote

Rob McLennan - ZETLAND wrote:

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.

If you have this site on the web (as opposed to an intranet for example)
you have bigger problems than printen a button occasionally. Making your
navigation menu *depend* on JavaScript is not such a good idea. Many
visitors may not have JavaScript able browsers. One of those visitors,
with no JavaScript possibilities, is Google.

Which then do you think is the best method for building a main navigation menu?

If you put up a URL, we can take a look at the problem and try to help
you solve it.

"Rob McLennan - ZETLAND" <robskoo (AT) hotmail (DOT) com> wrote

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote

Rob McLennan - ZETLAND wrote:

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.

If you have this site on the web (as opposed to an intranet for example)
you have bigger problems than printen a button occasionally. Making your
navigation menu *depend* on JavaScript is not such a good idea. Many
visitors may not have JavaScript able browsers. One of those visitors,
with no JavaScript possibilities, is Google.

Which then do you think is the best method for building a main navigation
menu?

Several options are better than using JavaScript to generate your
navigation. Static HTML, though cumbersome to update on every page of you
site, would be better because then search engines could at least index those
pages (and people with JavaScript turned off could get to them as well).
JavaScript should only be used for "extra" bells and whistles, and should
not be considered reliable.

You could look into doing server side includes (putting your nav in that
file and then including that file in all of your pages), or other server
side processing to create the navigation (like ASP, PHP, etc.).

If you put up a URL, we can take a look at the problem and try to help
you solve it.

You forgot a link.
Regards,
Peter Foti

Rob McLennan - ZETLAND wrote:

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote


Rob McLennan - ZETLAND wrote:

Which then do you think is the best method for building a main navigation menu?

Same as all of the rest of your side. Build pages in clean markup. Make
sure it works in various browsers and that it validates. Then add styles
with CSS, preferably with an external stylesheet. Then add JavaScript
for even more effects.
If you follow this order, proper markup > styles > scripts and other
effects, your site will work well in numerous browsers on various
platforms. Besides that, if you actually have some content too, Google
will love you.

If you put up a URL, we can take a look at the problem and try to help
you solve it.

How about that URL now than?

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote

Rob McLennan - ZETLAND wrote:

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote


Rob McLennan - ZETLAND wrote:

Which then do you think is the best method for building a main navigation menu?

Same as all of the rest of your side. Build pages in clean markup. Make
sure it works in various browsers and that it validates. Then add styles
with CSS, preferably with an external stylesheet. Then add JavaScript
for even more effects.
If you follow this order, proper markup > styles > scripts and other
effects, your site will work well in numerous browsers on various
platforms. Besides that, if you actually have some content too, Google
will love you.

If you put up a URL, we can take a look at the problem and try to help
you solve it.

How about that URL now than?

Sorry about the delay! Here it is (finally):

http://www.objective.com/

Yeah, this all sounds good to me. I came into this company after the
site was built, but they'll be revamping it soon so I'm very
interested in setting it up properly. I'm not overly happy with the
fact that, as you can see, the navigation is in a separate frame, as
part of an overall frameset. I'm sure you know the reasons why I want
to ditch the frames altogether

I like the idea, that Peter Foti mentions, of using SSI, which is
something I've started doing already for other parts of the site.
However, I'd also like to preserve the main nav bar being visible at
all times, as it is now.

I like the idea of using clean html, but how do I preserve the complex
rollovers that are currently there, if not with javascript? Wouldn't
this mean dynamic html, using divs/layers? If so, I have a bit of an
issue with browser interpretation of divs.

Rob McLennan - ZETLAND wrote:

Sorry about the delay! Here it is (finally):

http://www.objective.com/

I just had a look at the site in NS7.1:
when you click an item on the top menu (green), the whole
pictures falls down on the requested page, hiding the top of
the content. Only on Overview and Locations the picture and
menu stay where they belong.

I just checked in IE6.0 to see if it has the same problem,
and it has not. But I discovered that there is another menu
on top of the picture, it's blue and has drop down menu when
moused over. That menu isn't there at all in NS7.1 :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Rob McLennan - ZETLAND wrote:

Barbara de Zoete <b_de_zoete (AT) hotmail (DOT) com> wrote


How about that URL now than?

Sorry about the delay! Here it is (finally):

http://www.objective.com/

I like the idea, that Peter Foti mentions, of using SSI,

If you can use it and know how to, it is a good thing.

However, I'd also like to preserve the main nav bar being visible at
all times, as it is now.

In Dutch, but if you look at the markup and styles you'll find out how
it's done, see
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_fixeren-kop.html>
for how to simulate frames. Works fine in IE.

I like the idea of using clean html, but how do I preserve the complex
rollovers that are currently there, if not with javascript?

Dutch also, see
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_menu-met-hovereffect.html>
for various menu's with some effects when hovered. All no JavaScript.The
pop-out menu doesn't work in IE. Have not yet solved that.

Wouldn't
this mean dynamic html, using divs/layers? If so, I have a bit of an
issue with browser interpretation of divs.

My guess is the current site has much bigger issues than rendering divs
correctly, like the heavy scripting used for a simple nav-menu in the
top frame and the lack of appropriate alt-texts with the images,
especially those used for navigation. This is no good.
Besides that, the site seems to work in IE6, but it definately does not
work in Netscape7 (nav-menu, the one you think is valuable enough to
keep on screen always, doesn't show).

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

On 23 Feb 2004 18:03:59 -0800, robskoo (AT) hotmail (DOT) com (Rob McLennan -
ZETLAND) wrote:

I like the idea, that Peter Foti mentions, of using SSI, which is
something I've started doing already for other parts of the site.
However, I'd also like to preserve the main nav bar being visible at
all times, as it is now.

Unless you have a very specific reason for using SSI, I'd be inclined to
recommend PHP. Includes in PHP are as simple as:

<?php
include ('pageheader.txt');
include ('menu.txt');
?>

but you can do very much more than SSI if you later find you need to.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/