Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length
May 25, 2012, 10:50:29 AM

Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: Hide a button from the printer  (Read 297 times)
vertex2
Trekkie
**
Offline Offline

Posts: 11


WWW
« on: April 07, 2003, 07:00:58 PM »
Hi all,

I am working on a page with some java and a form.  the form has two buttons, "submit" and "reset" does anyone know of a way to make it so when i print the webpage the buttons dont print out or they are invisible?

i would rather not have to make the form calculate and enter all the values in a new blank sheet.  i want to make it a one stop spot.

thanks everyone.   Wink
Logged
stephan
Guest
« Reply #1 on: April 08, 2003, 03:30:36 AM »
The print function in most browsers, like Internet Explorer, prints everything on the page.

Some websites have links which say "printer friendly" which take you to a special version of the page you are looking at, without all the graphics and buttons etc.

I don't think there is a way (apart from that) to make the printer ignore the buttons.
Logged
Replica
Trekkie
**
Offline Offline

Posts: 12


WWW
« Reply #2 on: April 18, 2003, 01:50:18 PM »
You can easily do this using CSS (cascadeding styles sheets).

Here's the code:

This goes in between the <head></head> tags in your html page
-----------------------------------------------------------------------------
Code:
<style type="text/css">
a { color:red; text-decoration:none;}
.title { font-family:arial,font-size:16pt; font-weight:bold;color:black}
.text { font-family:arial,font-size:10pt; color:white}
.tabletext { color:black;font-family:arial;font-size:10pt }
@media print{
  body{ background-color:#FFFFFF;  color:#000000 }
  #buttons{ display:none;}
  #content { display:none; }
}
</style>
-----------------------------------------------------------------------------

then all you do is put an id="buttons" or whatever you specify as the name (but make sure its the same as the ones you specified in the code above), anyways put that in the table column or row or where ever, in div tags, span tags.  Then when you print preview notice stuff is missing or is changed to whatever you specified within the CSS code.  Bam problem solved.

I have the file located on my server that demonstrates this.
Download it and do a print preview of it.   it is located here http://www.hybridart.com/tutorials/CSS_PrinterFriendlyPages.html


notice the buttons are gone and so is all my instructions.  only thing left in the print preview is the code and the contact us table form.

enjoy, and if you have questions ask me!
also visit my website at http://www.hybridart.com

-brandon
[ www.hybridart.com ]
Logged
""Using a key to gouge expletives on another's vehicle is a sign of trust... and friendship."
- Ignignokt, Aqua Teen Hunger Force
-------------------------------------------------------
                [ www.hybridart.com ]
stephan
Guest
« Reply #3 on: April 19, 2003, 05:30:52 AM »
That is really cool.

I learnt something today Smile
Logged
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: