Printer Friendly
Using media print, this tutorial show you how to print content without
elements you choose. In this demo all images, h1 tags and any tags with
class="noprint" won't be print. Of course we don't want that yellow
background color to be print too so we set that background color to white
in the <style type="text/css" media="print">
Let's start with the CCS:
/*
Made by Martial Boissonneault © 2002 http://getElementById.com/
May be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials
*/
This demo use 2 CSS, the media print also read our regular CSS so
<h3>Hello</h3> will be underline and our content text to be print will
have a font-size of 12px.
<style type="text/css">
body {background-color:#ffff99;}
h3 {text-decoration:underline;}
.text {position:relative; width:500px; font-size:12px;}
</style>
<style type="text/css" media="print">
body {background-color:#ffffff;}
img {display:none;}
h1 {display:none;}
.noprint {display:none;}
</style>
This is de Demo!
<html>
<head>
<title>Printer Friendly</title>
<style type="text/css">
body {background-color:#ffff99;}
h3 {text-decoration:underline;}
.text {font-size:12px;}
</style>
<style type="text/css" media="print">
body {background-color:#ffffff;}
img {display:none;}
h1 {display:none;}
.noprint {display:none;}
</style>
</head>
<body>
<table width=500 border=0>
<tr>
<td>
<h1 class="noprint">title</h1>
</td>
<td align="right">
<a href="#" onclick="print()" class="noprint">
<img src="print.gif" border=0 width=33
height=29 hspace=23><br>printer friendly
</a>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<img src="sta_ban_468.gif" border=0 width=468
height=60>
</td>
</tr>
<tr>
<td colspan=2 class="text">
<h3>Hello</h3>
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
<br><br>
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
This is my text. This is my text. This is my text.
This is my text.
</td>
</tr>
<tr>
<td colspan=2>
<hr width=500 color="#ff0000" class="noprint">
</td>
</tr>
</table>
</body>
</html>
View Cart
