Welcome to WebmasterWorld Guest from 54.204.162.36

Forum Moderators: incrediBILL

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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month