How do I hide the button on the printed page?

**Pirre001** · Jan 17th, 2003, 02:15 PM

How do I hide the button on the printed page. The button should only show on screen.
Now I have done like this, but the button shows on the printed page.

Code:

<font class="size1" face="Arial" size="1"> 
<input name="button2" type="button" value="PRINT OUT" onClick="window.print()" style="font-family: geneva,verdana; font-size: 8pt;"></font>

**Cander** · Jan 17th, 2003, 02:39 PM

I would change the onlclick to a function you write
onlcick="printme()"
then use

function printme()
{

document.formname.button2.visible = false;
window.print();
}

I think that should work fine.

**JoshT** · Jan 17th, 2003, 02:48 PM

You can set the media in the style tag to use different stylesheets for different media, but I'm not sure how well this is supported yet.

Code:

<style type="text/css" title="Default" media="screen">
...
</style>
<style type="text/css" title="PrintCSS" media="print">
...
</style>

**Rick Bull** · Jan 17th, 2003, 02:58 PM

It's pretty well supported actually. The browsers I have all support it (Mozilla 1.2.1, Opera 6.05, IE 6). I would go with the meda thing too, it's easier and better supported for people with out JS.

Also you could do (including the code you want)

<style media="all" type="text/css">
@media print {
input { display: none }
}
</style>

**Pirre001** · Jan 17th, 2003, 04:29 PM

Thanks everybody!

But, can you show a complete code with a button included.

I would be greateful for that.

**Pirre001** · Jan 18th, 2003, 06:02 AM

Someone...

**Rick Bull** · Jan 18th, 2003, 07:50 AM

Put what I said in the head of the document and it should work:

Code:

<head>
  <style media="all" type="text/css"><!--
  @media print {
    input { display: none }
  }
  --></style>
</head>

That will hide all inputs. You could change input for form if you don't want any of the form showing, or any other element.

**Pirre001** · Jan 18th, 2003, 02:03 PM

Thanks Rick Bull,

Now it works!
But I have another following question.
I wanna hide all buttons when I print out. But I also want to hide a part of the text when I print out. How do I do then?

**Rick Bull** · Jan 19th, 2003, 07:22 AM

Well one way of doing it is to add to the style like this:

Code:

<head>
  <style media="all" type="text/css"><!--
  @media print {
    .hide, input { display: none }
  }
  --></style>
</head>

then if you want to comment out text within a paragraph or other block element just add a span with a class of hide like so:

Code:

<p>Some of this text will be <span class="hide">hidden</span>.</p>

Or if you want to hide an entire block:

Code:

<p class="hide">All of this text will be hidden.</p>

**Pirre001** · Jan 19th, 2003, 02:23 PM

That was exactly what I need, Rick Bull. Thanks!

Another question,

If I wanna hide all buttons and all text on print out except for the table? How do I do then?
Here is an example on a table code which I mean:

Code:

 
<TABLE cellSpacing=% cellPadding=1 width=440 border=6><B>
  <CAPTION>
  <DIV><FONT size=4>Here I write the Caption</FONT></DIV>
  <DIV><FONT size=4></FONT>&nbsp;</DIV></CAPTION></B>
  <TBODY>
  <TR>
    <TH align=middle bgColor=#cfcfcf>Pierre</TH>
    <TH align=middle bgColor=#cfcfcf>Carol</TH>
    <TH align=middle bgColor=#cfcfcf>Greg</TH>
  <TR>
    <TD align=middle>Jan </TD>
    <TD align=middle>Alice </TD>
    <TD align=middle>Peter&nbsp;&nbsp;</TD>
  <TR>
    <TD align=middle>Cindy </TD>
    <TD align=middle>Mike </TD>
    <TD align=middle>


   </TR></TBODY></TABLE>

And here is my last question,

When I print the current code here abowe, no bgcolors are used? How do I solve that?

**Rick Bull** · Jan 19th, 2003, 06:44 PM

Well without seeing your code in action, I would just place a DIV around the text you want to hide, and give it class of hide:

Code:

<div class="hide">
  <p>Hidden text and stuff goes here</p>
  <form><p>
    <input /> etc.
  </p></form>
</div>

<table>
   ...
</table>

<div class="hide">
  Anything else afterward that you want hidden
</div>

As for the colours I'm not sure, but I've heard of people having problems when printing. The only things I could say are make sure your printer settings are correct when you press print (e.g. make sure you are printing in colour mode and not black and white), or try using style instead:

Code:

<TH align=middle style="background-color: #cfcfcf;">Pierre</TH>

**Pirre001** · Jan 20th, 2003, 07:08 AM

Thanks again!

But I still have problem with the background color when I'm printing. Do you have any other solution?

And do you know if I could use this code in a HTML-mail with Microsoft Outlook?

**Rick Bull** · Jan 21st, 2003, 05:47 AM

Sorry I'm not sure why the colour isn't working. Maybe it's a bug, like I say I've seen other people with the problem.

If you can edit the source in Outlook then you should be able to use the code, but how well supported it is in Mail clients I have no idea. I know it will work perfectly in Mozilla's mail client, but that's all I know

I think CSS support is a bit patchey in some mail clients.

**punkpie_uk** · Jan 21st, 2003, 10:02 AM

But I still have problem with the background color when I'm printing

I dont think background colours are printed along with the page.

Thread: How do I hide the button on the printed page?

Thread Tools

Display

How do I hide the button on the printed page?

Posting Permissions