Script to remove header, footer, margins to zero when I print

**Frogger** · 07-09-2006, 10:01 AM

I have set up a web page that I want to be able to print. I don’t want to go into File - > Page setup and remove the header, footer and margins manually each time.

Is there a way that I can add some code to my web page where it automatically removes the below when I print.

Header
Footer
Sets all margins to zero.

Can anyone please help with some script for this. I have assumed something can be done with CSS hence why I have posted here.

Thanks
Frogger

**BLiZZaRD** · 07-09-2006, 10:36 AM

As far as I know, print settings are set up by the user in their printing properties, they can opt to not print page numbers, headers/footers, etc or if they just print, they will get all that.

However, unless you decide to get in and set registries on each visitors computer, another way is using active-x controls to strip that info from the print job.

This Program does just that, and is freeware too

**Frogger** · 07-09-2006, 11:30 PM

Thanks for getting back to me.

Thanks for your info. I just thought there might have been an easier way to reomve the header , footer details using CSS.

I just want the web header name and page numbers at the top of the page removed. At the bottom of the page it still displays the web address and the date. Just wondering if its possible to have them automatically removed in the page setup.

I also want the margins for the left, right, top and bottom automatically set to zero for this web page when printing.

Regards
Frogger

**BLiZZaRD** · 07-10-2006, 05:17 PM

The absolute easiest way...

Is to make a printer version page on your site. Make it look exactly the way you want it to, set up exactly.

Then on the other page, make a link to that page:

<a href= "http://yoursite.com/printerfriendly.html">click here to print this page</a>

Then the user will click the link go to the Printer Friendly page and can print away.

**ddadmin** · 07-10-2006, 06:17 PM

There is an easy way to do this via CSS actually, by using CSS's print media. For example:

Code:

<style type="text/css">
@media print{
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  #ad{ display:none;}
  #leftbar{ display:none;}
  #contentarea{ width:100%;}
}
</style>

This code when added to the page hides the 2 divs with ids "ad" and "leftbar", plus makes additional changes to the rest of the document when it's printed. See here for more info: http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

**Frogger** · 07-10-2006, 11:15 PM

Thanks for getting back to me. I inserted the code but for some reason it is still showing header, footer and margin details within the page setup of the browser. Maybe I will have to just delete this info within the file > page setup of the browser and then put them back in when I finish. A bit annoying.

Anyway thanks for your help and if anyone else has some ideas how to fix this I would be very interested. Its a tough one I know.

Regards
Frogger

**ddadmin** · 07-11-2006, 12:12 AM

Did you remember to give the containers in question the proper ID attribute, such as:

Code:

<div id="leftbar">
"
"
</div>

**Frogger** · 07-11-2006, 12:45 AM

I have added them now but for some reason it removes the content on the page and still leaves the header and footer details.

See my code below to make sure I have dont it correctly.

<html>
<head>
<title>plants</title>

<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#ad{ display:none;}
#leftbar{ display:none;}
#contentarea{ width:100%;}
}
</style>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="leftbar">

<img src="images/space_logo.gif" width="190" height="59"></td>
<br><br>
<strong>PLANT SELECTION DETAILS</strong></font></td>
<br><br>

<form>
<select name="testSelect">

<option value="image1.gif">Image 1</option>

<option value="image2.gif">Image 2</option>

<option value="image3.gif">Image 3</option>

</select>
</form>

</div>

</body>
</html>

**ddadmin** · 07-11-2006, 06:36 AM

That's because you haven't assigned the other two divs in question the appropriate IDs

A complete example would be:

Code:

<style type="text/css">
@media print{
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#ad{ display:none;}
#leftbar{ display:none;}
#contentarea{ width:100%;}
}
</style>

<body>

<div id="ad">banner here</div>
<div id="leftbar">Left bar here</div>
<div id="contentarea">Content here</div>

</body>

In the above example, only the Content Area will be printed out.

I highly urge you to read the tutorial I cited. It seems you're just taking the code I posted as is without understanding how CSS works, which makes it impossible for you to adopt the code to your page set up.

**Birmingham** · 07-14-2006, 05:20 PM

is the way you described above more conventional than using something like:

Code:

<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />

?

Thread: Script to remove header, footer, margins to zero when I print

Thread Tools

Search Thread

Script to remove header, footer, margins to zero when I print

Bookmarks

Bookmarks

Posting Permissions