homepage Welcome to WebmasterWorld Guest from 54.227.215.140
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Hide JScript Menu Using CSS Media=print
Trying to hide a JScript-based menu using CSS Media=print
AmRes



 
Msg#: 4284569 posted 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

 

tedster

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



 
Msg#: 4284569 posted 4:11 pm on Mar 20, 2011 (gmt 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.

AmRes



 
Msg#: 4284569 posted 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

tedster

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



 
Msg#: 4284569 posted 9:51 pm on Mar 20, 2011 (gmt 0)

What's the code are you using to call the file 4-HHP_Print.css?

AmRes



 
Msg#: 4284569 posted 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.

swa66

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



 
Msg#: 4284569 posted 2:30 pm on Apr 11, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved