Print button + hiding default printed details

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wardy7
Forum Commoner
Posts: 38
Joined: Wed Aug 24, 2005 4:45 am
Location: UK

Print button + hiding default printed details

Post by Wardy7 »

Hi guys,
I'm after help with a "Print" button please.
I have a page that displays a load of results on a page, I want users to be able to print this page by the use of a Print button that is on the page.
However, I don't want the actual Print button to be displayed on the printout and also, I don't want the url, title tage and date, page number info printed at the top and bottom of the printout.
These seem to just be added by default from all printouts but I don't them to be printed, how do I got about stopping these details getting printed?

The current button I am using is, although this button is displayed when I print out.

Code: Select all

<input type="button" value="Print" onclick="printpage();">
Cheers
Wardy
buckit
Forum Contributor
Posts: 169
Joined: Fri Jan 01, 2010 10:21 am

Re: Print button + hiding default printed details

Post by buckit »

to hide the button you could do something like this:

Code: Select all

<div id='printdiv'>
<input type="button" value="Print" onclick="document.getElementById('printdiv').style.display = 'none';printpage();">
</div>
that will hide the contents of the div thus not printing it.

there are other ways of accomplishing the same thing

as for the header and footer... you cant remove them. I had this problem myself. I ended up resorting to having the button execute a PHP script that created a PDF and then presented the PDF to the user which they could then print.
Wardy7
Forum Commoner
Posts: 38
Joined: Wed Aug 24, 2005 4:45 am
Location: UK

Re: Print button + hiding default printed details

Post by Wardy7 »

That is great thankyou mate, that works a treat with the print button :)

With regards to having a pdf created, do you have any pointers as to doing this or is it a very tricky job?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Print button + hiding default printed details

Post by VladSun »

A much better idea is to use CSS target media :

Code: Select all

<html>
	<head>
		<style>
			@media print
			{
				#printdiv
				{
					display: none;
				}
			}
		</style>
	</head>

<body>
Content to print here ...
<div id='printdiv'>
	<input type="button" value="Print" onclick="printpage();">
</div>
</body>
</html>
You may even include extenral CSS files for each media (screen, print, etc.). Take a look:

http://www.w3.org/TR/CSS2/media.html
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply