[RESOLVED] CSS way to turn off javascript menu in print style sheet?

kralspace

Just when you think you're finished.......lol
:bemused:

I created a print style sheet for our site that doesn't display banners, icons, etc. and everything works except for not stifling the js menu, it still shows up in printview and prints.

I made this page to post here with just the js links and the 'don't print' style above it that works on everything else. Is there a way to 'turn off' this menu thru CSS? thanks as always, Kathy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

#dontprint {
display : none;
}
</style>

</head>
<body>

</div>

<div id="content">
<h1>North Carolina Curriculum Guide</h1>
</div>

</body>
</html>

JPnyc

No, fraid not. Script tags don't have a display property since they don't display.

kralspace

Thanks jpnyc, I was afraid that would be the answer, I appreciate your time,

onward thru the fog.....

Kathy :bemused:

JPnyc

I'm trying to think of another way to accomplish this. I suppose if you don't mind using javascript to solve this, it could be done by changing the src attribute of the script tag. I've never tried but I think it might be possible

kralspace

thanks for the thought jpnyc. I've switched over to a php menu to solve the problem today, but I'll try changing the src attribute this weekend on a dummy file.

Are you snowed in up there? thanks, Kathy

Weedpacket

I'm thinking the problem is elsewhere (perhaps in the .js files) or at least browser-dependent, since the original code works for me in both Firefox and IE6. I also wrote the following to toggle the display property programmatically.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

#dontprint {
display:block;
}
</style>
<script type='text/javascript'>
function toggle_menu()
{
	that = document.getElementById('dontprint');
	that.style['display'] = (that.style['display']=='none')?'block':'none';
}
</script>
</head>
<body>

<div><input type="button" value="Toggle Visibility" onClick="toggle_menu();">
</div>

<div id="dontprint">
<script type='text/javascript' src='menu.js'></script>
</div>

<h1>North Carolina Curriculum Guide</h1>

</body>
</html>

---------------8<---------------menu.js-------------------
document.write("<select>");
for(i=0;i<10;i++)
	document.write("<option>Option "+i+"</option>");
document.write("</select>");

JPnyc

Still don't think that'll help. Whether it's display:none or not, the script tag will be printed to the page and it will be parsed.

bpat1434

Um.. how about using more than just one CSS element?

dispaly: none;
visibility: hidden;
hieght: 0px;
content: "";

That should hide just about any menu.....

Weedpacket

JPnyc wrote:
Still don't think that'll help. Whether it's display:none or not, the script tag will be printed to the page and it will be parsed.

Yeah, but it won't be displayed, which is what I thought the problem was (at least, it isn't displayed when I try it. Not on the screen, not in print preview, not in actual print.)

larry98765

Not sure, but I'll take a crack at this:

First, I'd use a class rather than an id for the dontprint directive like this:

.dontprint {
display: none;
}

Because then you can re-use that in multiple places in your HTML where you'd like items that don't print.

2) Then I would put the <div class='dontprint'> directly into the javascript code (in a document.write or what have you) so that that the div gets output along with the other output that the menu js produces. So instead of wrapping your script tag with the div, you're including the div in your javascript rendering.

Not sure if it'll work, but worth a try!

bpat1434

Gee... isn't that what i said...? lol.

Anyway, did kralspace ever fix this? 'ello?

kralspace

Hi guys, thanks for the suggestions. I had to get the site up and running so I bit the bullet and bought a really good CSS book and created the menu that way. I did save copies of my old files and these responses because I really would like to try them out, especially using the class like both you guys suggested. I'm really looking forward to taking a beginners class for programming so I can understand what I'm trying to do a bit better,

air conditioning running on March 6, this is nuts!
thanks and I'll let you know how it goes. Kathy

JPnyc

I think what was suggested above, setting the height and width to 0px, is your best bet. Somehow I suspect IE will bollix it up, but it's worth a try.