Hide all or part of your page when printing

	Print
	Email

Submitted on: 12/11/2002 12:03:44 AM
By: VBKing
Level: Beginner
User Rating:

By 6 Users
Compatibility:JavaScript

Users have accessed this code 5420 times.

Allows you to hide all or part of your page when it is printed or previewed. This script is very usefull for hiding navigation menus and other controls, for a cleaner printout.

code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!

Terms of Agreement:
By using this code, you agree to the following terms...
1) You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2) You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.


//**************************************
//     
// Name: Hide all or part of your page w
//     hen printing
// Description:Allows you to hide all or
//     part of your page when it is printed or 
//     previewed. This script is very usefull f
//     or hiding navigation menus and other con
//     trols, for a cleaner printout.
// By: VBKing
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=3324&lngWId;=2//for details.//**************************************
//     

<HTML>
<SCRIPT>
<!--
// Hide tags with id="noprint" 
//when printing
function printSetup()
    {
    var a = document.all.item("noprint");
        if (a!=null) {
            if (a.length!=null) {
            //multiple tags found

                for (i=0; i< a.length; i++) {
                a(i).style.display = window.event.type == "beforeprint" ? "none" :"inline";
            }

        } else 

        //only one tag
        a.style.display = window.event.type == "beforeprint" ? "none" :"inline";
    }

} 

//-->
</SCRIPT>
<BODY onbeforeprint="printSetup()" onafterprint="printSetup()">
<P>You can see me and print me <BR>
<!-- set the tag id to "noprint" for elements you want displayed, but not printed -->
<H2 id="noprint">You can see me, but not print</H2>
<SPAN id="noprint">
<BR><HR>Works with SPAN and other tags
</SPAN>
</BODY>

Report Bad Submission

Your Vote!

Other User Comments

12/11/2002 4:14:23 PM:Agret

hey this is cool, 5/5

12/12/2002 11:23:23 AM:

Here's a shorter method that uses 
CSS:
Place this once on the 
page:
<style 
type="text/css">
.printonly { 
display:none }
@media print { 
.dontprint { display:none }
.printonly { display:inline 
}
}
</style>
The styles in the 
@media print {}section of the will only 
apply when printed.
<div 
class="printonly">You will only see 
this when printed.. good for placing 
messages like 
"CONFIDENTIAL"</div>
<span 
class="dontprint">This will not print.  
Great for navigation bars</span>
<b 
class="dontprint">Works with lots of 
tags

1/17/2003 8:29:19 AM:Brad Roberts

Nice. Both of the above. Thanks.

2/7/2003 3:38:50 PM:

How about controlling the margines of 
the page?

3/17/2003 6:45:20 PM:

Nice code, very handy. Problem is, it 
looks like it only works for IE. Any 
code that works with Netscape and Opera 
too?

6/14/2003 4:29:05 AM:

Its very usefull and I used it as I 
dont want to show some information to 
the user and want to be printed only.  
Show I fired it at window onfocus to 
hide the content.  Thankyou VBKing

6/14/2003 4:31:05 AM:

Its cool and I used it where I dont 
want to show some information on page 
but want to print it. Thankyou VBKing.

7/31/2003 2:55:19 PM:

This is very helpful to me to hide the 
images which is shown in the webpages 
when taking print-out of the page.

9/20/2003 11:37:31 AM:

Excellent code and css. It helped me a 
lot.

11/20/2003 7:30:04 PM:Chris'' Web Design

Did the margin question ever get 
answered?  This is great and it works 
perfect on the site but the margins are 
not lined up. Half of my table is off 
the page.  Can anyone help?

Add Your Feedback!

Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this code has been kind enough to share it with you. If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular code, please click here.