PDA

View Full Version : Printer-friendly button

Magali
04-22-2003, 04:26 PM
I tried using the following code:

<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#ad{ display:none;}
#leftbar{ display:none;}
#contentarea{ width:100%;}
}
</style>

found at:
http://www.javascriptkit.com/dhtmltutors/cssmedia2.shtml

but it is not working for me, despite being in IE5.5. The syntax seems ok?

I am looking for a way to have a printer-friendly button, in javascript or CSS.... or anything, really. Any suggestions? Thanks!
Roy Sinclair
04-22-2003, 04:38 PM
We see the style but you've got to have the proper html to go with it. In the case of the CSS you showed, it's set up to handle a web page that has a div with the id of "ad" so the advertisement isn't printed and to hide the div with the id "leftbar" to hide the lefthand navigation bar and finally takes the div with the id of "contentarea" and increases it's width to reclaim the space made by hiding the navigation bar.

The key concept behind this is that you set up a stylesheet for your page which hides the elements not needed or wanted on the printed version. You can also use the same concept to show some elements only on the printed version of your page too.
Magali
04-22-2003, 04:41 PM
Oh, right, duh.... so in other words, I'd need a <div id=ad> in the html page.... can't believe I didn't catch that.

Thanks Roy - I have some work to do to edit all my pages!
Funky Monk
09-03-2003, 01:09 PM
Hi Guys,

I'm using this stylesheet on some of my web pages and it's very effective. But on one site I am using a DHTML navigation menu that uses an external Javascript file. Consequently, this menu is not removed in the printer-friendly version as I can't give the script an ID (it resides in the Head section):

<head>

<!-- 'Printer-Friendly' CSS Inline stylesheet starts-->
<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#toptable{ display:none;}
#leftbar{ display:none;}
#horizontal_rule{ display:none;}
#sitehelp{ display:none;}
#righthand_table{ display:none;}
#bottom_navigation{ display:none;}
#contentarea{ width:100%;}
#dhtml_navigation{ display:none;}
}
</style>
<!-- 'Printer-Friendly' CSS Inline stylesheet ends -->

<SCRIPT language=JavaScript src="javascript/menu_array.js" type=text/javascript></SCRIPT>

</head>

This means that the menu prints right across the text of the printable version. Can someone help me out here??
MotherNatrsSon
09-03-2003, 02:03 PM
What is the html code for the menu in your page? It has to be in a div or table?

MNS
Funky Monk
09-03-2003, 03:31 PM
I've sorted it now. I went to the menu maker's Forum and found the answer there. Too much to print here. Go to :www.milonic.com/forum/viewtopic.php?t=2316 (http://www.milonic.com/forum/viewtopic.php?t=2316) if you'd like to know.

:thumbsup