Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

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

You are here: irt.org | FAQ | JavaScript | Print | Q1403 [ previous next ]

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?'

©2018 Martin Webb