Welcome to WebmasterWorld Guest from 54.145.173.147

Forum Moderators: incrediBILL

Message Too Old, No Replies

Hide JScript Menu Using CSS Media=print

Trying to hide a JScript-based menu using CSS Media=print

   
3:09 pm on Mar 20, 2011 (gmt 0)



I'm trying to develop a CSS for print media. Everything is working fine except for hiding my jscript-based menu.

In my 4-HHP_Print.css file, I have the following definition:

.Nav {
display: none;
}


My ASP file has:

<DIV CLASS="Nav" ID="Nav">
<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='/hvm/mnu.js'></script>
<script type='text/javascript' src='/hvm/menu_com.js'>/script>
</DIV>


However, the menu still shows up.

Is there a way in HTML without using CSS to detect the output media type? I was thinking that I could then use a conditional include for the jscript.

TIA
/rick
4:11 pm on Mar 20, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hello AmRes, and welcome to the forums.

.Nav defines a class. Because you are using an ID you may also need to define #Nav. I think that "specificity" rules are causing the ID to override the class.

To answer your direct question - no, HTML doesn't have that kind of functionality. It's basically about content and semantics, not presentation.
8:18 pm on Mar 20, 2011 (gmt 0)




Thanks for the response. I had already tried that. I've been searching and testing for a couple of days now. Nothing that I've seen recommended anywhere works. (Running Firefox 3.6.15)

Just for grins, I fired up IE 6... hiding the jscript works just fine. Now I'm thinking it the way I have Firefox configured. Hmmmmmmmmmm
9:51 pm on Mar 20, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



What's the code are you using to call the file 4-HHP_Print.css?
10:13 pm on Mar 20, 2011 (gmt 0)



<HEAD>
.
.
.

<LINK REL="STYLESHEET" HREF="/CSS/4-HHP_Print.css" REL="stylesheet" TYPE="TEXT/CSS">

.
.
.
</HEAD>

I think I may have a configuration issue with Firefox since the CSS works fine in IE6.
2:30 pm on Apr 11, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You can actually combine the print and the normal stylesheet into one file.

in the html:
<link rel="stylesheet" type="text/css" href="/style.css" />

in the style.css:

#Nav {...}
...
@media print {
#Nav {display:none;}
h1.title {padding:0;} /* just as an example */
}
...

Now a lot depends on what your javascript does (it can reset the display properties to something else e.g.)

Also do take extra care with specificity.