Page 1 of 1
HIDE MY PRINT BUTTON ONCE THE PAGE HAS BEEN PRINTED
Posted: Thu Apr 07, 2011 6:30 am
by hayward
I have a print button on a page that once I print the page the button is still there, there's no need for this button to be there on paper how can i make it non visible?
Here's my button code -
html>
<head>
<title>Print Test</title>
</head>
<body>
<input type="button"
onClick="window.print()"
value="Print"/>
</body>
</html>
Re: HIDE MY PRINT BUTTON ONCE THE PAGE HAS BEEN PRINTED
Posted: Sat Apr 09, 2011 7:29 pm
by mecha_godzilla
You could do this by defining a separate stylesheet for your printed page like this
Code: Select all
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
then place your button in a <div> element like this
Code: Select all
<div class="noprint">
<input type="button"
onClick="window.print()"
value="Print"/>
</div>
then in the print stylesheet just add this
You can also use this feature to remove menus or coloured page backgrounds by either assigning layers to the 'noprint' class or defining different values for the same element in the screen/print style sheets.
HTH,
Mecha Godzilla
Re: HIDE MY PRINT BUTTON ONCE THE PAGE HAS BEEN PRINTED
Posted: Mon Apr 18, 2011 10:03 am
by hayward
This doesn't seem to be working the button is still printing out I must have done it wrong, any ideas?
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" .noprint {
display: none;
}/>
<div class="noprint">
<input type="button"
onClick="window.print()"
value="Print"/>
</div>
Re: HIDE MY PRINT BUTTON ONCE THE PAGE HAS BEEN PRINTED
Posted: Sat Apr 30, 2011 12:15 pm
by Sindarin
You added the .noprint class inside the link tag, that is incorrect. You either add it inside a
style tag using the attribute
media="print" to make it available only when the user prints the page or specify another one stylesheet for print the way mecha_godzilla suggested.
Try this,
Code: Select all
<html>
<head>
<style type="text/css" media="print">
.noprint{
display:none;
}
</style>
</head>
<body>
<input type="button" class="noprint" onclick="window.print()" value="Print" />
</body>
</html>