Avatar of sasnaktiv
sasnaktivFlag for United States of America asked on

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
HTMLJavaScriptPHP

Avatar of undefined
Last Comment
Rob

8/22/2022 - Mon
Big Monty

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
SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Ray Paseur

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

ASKER
sasnaktiv

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
sasnaktiv

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
ASKER
sasnaktiv

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
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
sasnaktiv

Who says Miss Universe is unattainable?
Aim for the sky my friends.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
sasnaktiv

So there's no real solution here. Thank you all for participating.
Sas
Rob

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 :)