Welcome to WebmasterWorld Guest from 54.159.50.111

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)

New User

joined:Mar 20, 2011
posts: 3
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

New User

joined:Mar 20, 2011
posts: 3
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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

New User

joined:Mar 20, 2011
posts: 3
votes: 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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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.