Delete or hide header & footer when printing html

Hi Guys,
Is there any way to remove the header and footer of a html or php page, so that when a visitor prints it, there is no header or footer on the printed page?
Thanks,
Sas
LVL 1
sasnaktivAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
im more of an ASP guy, but the approach would be the same...

when i want to give the user the option to print, i have them click a link or button, which brings me to another page, which is basically the same page, except there's a variable in the page that I use to determine which sections I want to print.

if you're asking about whether there's a way to do it with the generic print function within browser, then no, you will need to build your own custom print function to accomplish this
0
COBOLdinosaurCommented:
In the style sheet use @media to hide the header and footer

@media print
  {
  .yourheader, .yourfooter {display:none;}
  }

That will hide them for print.

Cd&
0
Ray PaseurCommented:
Use CSS.  You can do it with @media print or you can have a separate style sheet like this:
<style type="text/css" media="print">...</style>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

sasnaktivAuthor Commented:
Thanks for the attention guys,
I've tried all of these variations with no success. It's still printing the header & footer.
So what am I doing wrong?
Below is a sample:
<html><title>No headers or footers</title><head>
<!-- ............ Attempt #1 ....................... -->
<style type="text/css" media="print">...</style>

<!-- ............ Attempt #2 ....................... -->
 <style>
@media print {
.header, .hide { visibility: hidden }
}
</style>

<!-- ............ Attempt #3 ....................... -->
<style>
@media print {
#header, #footer {display:none;}
}</style>

<!-- ............ Attempt #4 ....................... -->
     <style>
 @media print
   {
      .noprint { display: none; }
   } </style>
   
<!-- ............ Attempt #5 ....................... -->
     <style>
@media print
  {
  .yourheader, .yourfooter {display:none;}
  } </style>

</head>   
   
   <body>
   Content
   <P><input type='button' onClick="window.print()" class='hide'
value='Print'/>

</body>
</html>

Open in new window

0
Ray PaseurCommented:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML5 Page in UTF-8 Encoding</title>

<style type="text/css">
body { color:green; }
#head { color:red; }
#foot { color:orange; }
</style>

<style type="text/css" media="print">
#head { display:none; }
#foot { display:none; }
</style>

</head>
<body>

<div id="head">
Head
</div>

<p>Hello World</p>

<div id="foot">
Foot
</div>

</body>
</html>

Open in new window

Tested correctly in FF and Chrome
0
sasnaktivAuthor Commented:
Thanks Ray,
I did a copy & paste of your code, and I'm still getting the header & footer when I print it out. I'm using FF.
How can we get different results?
Sas
0
sasnaktivAuthor Commented:
Hey guys, maybe I'm not clear enough.
Yes Ray when printing I do not get the words "Head" and "Foot" that appear on the html page.

So that works, but that's not what I mean by the Header & Footer.

What I mean is that once the page is printed at the very top of the page I get the "Title" and the document  "Path". At the bottom I get the "Date & Time" and "Page number".

That's the information I don't want printed out!
I hope that's clear now,
Sas
0
Rainer JeschorCommented:
Hi,
OK now its clear. But sorry this is (afaik) not possible because this us controlled by the users browser configuration and due to the security models this cannot be controlled vua Javascript.
HTH
Rainer
0
COBOLdinosaurCommented:
The header and footer you are referring to are from the operating system and are user controls.  To overide them you would need to to able to modify user setting from a web page, which would be a security violation; and the chance of that happening are about the same me getting a date with Miss Universe.

Cd&
0
sasnaktivAuthor Commented:
Who says Miss Universe is unattainable?
Aim for the sky my friends.
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
like I said originally, this cannot be done without you creating a custom template. you can use the template you have already, just add logic to the page that checks for a queryatring (ex = print=true) and show/hide sections of the page based upon that parameter
0
RobOwner (Aidellio)Commented:
When you go to print, uncheck the box that says "headers and footers" :)

ok seriously now:
The other option is to generate a pdf on the fly.  PHP with the use of a plugin can help you create a pdf (portable doc format) that will look exactly as you want it.  PDFs are around for that reason so WYSIWYG!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sasnaktivAuthor Commented:
So there's no real solution here. Thank you all for participating.
Sas
0
RobOwner (Aidellio)Commented:
That's right, in this case there the solution is there isn't one.  It's controlled by the client that your webpage just doesn't and never will have access to, hence the suggestion to use another medium such as PDF to deliver your content to guarantee that it will look the same when printed :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.