Printable View
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>
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.
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>
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>
Thanks everybody!
But, can you show a complete code with a button included.
I would be greateful for that.
Someone...
Put what I said in the head of the document and it should work:
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.Code:<head>
<style media="all" type="text/css"><!--
@media print {
input { display: none }
}
--></style>
</head>
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?
Well one way of doing it is to add to the style like this:
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:<head>
<style media="all" type="text/css"><!--
@media print {
.hide, input { display: none }
}
--></style>
</head>
Or if you want to hide an entire block:Code:<p>Some of this text will be <span class="hide">hidden</span>.</p>
Code:<p class="hide">All of this text will be hidden.</p>
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:
And here is my last question,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> </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 </TD>
<TR>
<TD align=middle>Cindy </TD>
<TD align=middle>Mike </TD>
<TD align=middle>
</TR></TBODY></TABLE>
When I print the current code here abowe, no bgcolors are used? How do I solve that?
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:
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:<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>
Code:<TH align=middle style="background-color: #cfcfcf;">Pierre</TH>
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?
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 :p I think CSS support is a bit patchey in some mail clients.
I dont think background colours are printed along with the page.Quote:
But I still have problem with the background color when I'm printing