Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

Q1403 How can I have a form button that will print the current page, but which doesn't appear on the printed page?

irt.org | Knowledge Base | JavaScript | Print | Q1403 [ previous next ]

Q1403 How can I have a form button that will print the current page, but which doesn't appear on the printed page?

This might be possible - but probably only in Netscape Navigator:

<script language="JavaScript"><!--
if (document.layers && (self.innerHeight == 0 && self.innerWidth == 0)) {
     // printing
}
else {
    document.write('<form><input type="button" value="Print" onClick="window.print()"><\/form>');
}
//--></script>

The following was submitted by Enrique Lazo

Use css with @media print

<style>
@media print {
.donotprint { visibility:'hidden'}
}
</style>

<body>

....

<input type="button" name="print" value="print" class="donotprint" onclick="doPrint()" >

</body>

The following was submitted by Jeevan Betigeri

Use this code to make it work in IE:

<script language="JavaScript"><!--
function hideButtonAndPrint() {
  if (document.all["PrintButton"].style.visibility == "visible") {
    document.all["PrintButton"].style.visibility = "hidden";
    document.all["PrintButton"].style.display='none';
    javascript:window.print();	
    document.all["PrintButton"].style.visibility = "visible";
    document.all["PrintButton"].style.display='block';
  }
}
--></script>

<TABLE>
<tr><td align='right'>
<div id="PrintButton" class="helptips" style="visibility:visible">
<input TYPE='button' class='sbttn' value='Send To Printer' Name='SendToPrinter' onclick="hideButtonAndPrint();">	    
</div>
</td></tr>
<TABLE>

The following was submitted by suz

Using media type in css you can have the printed format look different from the screen format. IE5+, NN6

<style media="screen" type="text/css">
body,p,td { 
  background-color:#000000; 
  font-family: verdana, sans-serif;
  font-size: 12px;
}
	
body,p { 
  color: #ffffff; 
}
	
H3 {
  font-size: 18px;
  color: #ff9900;
}
	
td { color: #cc0000; }
	
.rowZ { background-color: #fff7eb; }

#printInfo { display: none }
</style>

<style media="print" type="text/css">
body,h3,p {
  color: #000000; background-color:#ffffff
}

.noprint {
  display: none
}

.rowZ {
  background-color: #eeeeee;
}

#printInfo {
  color:#ffffff; background-color:#000000
}
</style>

<body bgcolor="#333333">
<h3>Navigation</h3>

<p>IE5+/NN6 only&nbsp;&nbsp;p>

<table>
<tr>
  <td class="rowZ">Lorem ipsum dolor sit amet, consectetuer adipiscing.</td>
</tr>
<tr>
  <td>Zit amet, consectetuer adipiscing elit, sed.</td>
</tr>
<tr>
  <td class="rowZ">Lorem ipsum dolor sit amet, consectetuer adipiscing.</td>
</tr>
<tr>
  <td>Zit amet, consectetuer adipiscing elit, sed.</td>
</tr>
</table>

<p class="noprint">DON'T PRINT THIS LINE!!!!!!!!!!!!!!!!</p>

Feedback on 'Q1403 How can I have a form button that will print the current page, but which doesn't appear on the printed page?'


Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.