2

I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '@media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.

The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}

This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.

I have just started using javascript so any help would be much appreciated.
Thanks.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Eddie
  • 611
  • 3
  • 13
  • 23
  • 1
    Have you tried setting `display:none;` to whatever elements you want hidden in your print @media print CSS? Take a look at http://stackoverflow.com/a/7644857/1451422 – Jeff Noel Jan 08 '13 at 14:40
  • yep. That's what i'm doing for certain buttons which are wrapped in divs. But I couldn't understand how to hide elements (like a header) which extends from a different page i.e main.html. – Eddie Jan 08 '13 at 15:51
  • Even when they are extended, they are supposed to be "loaded" inside the actual page. so if you want to hide to `header` element, take a look at my answer (I edited it). – Jeff Noel Jan 08 '13 at 16:04
  • 1
    excellent. Didn't realise that I could add elements into my media.print which were extended. I gave the header an Id and it does just what I want. Thanks. – Eddie Jan 08 '13 at 16:23
  • possible duplicate of [Print
    only?](http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only)     – Brad Werth Sep 19 '14 at 22:19

3 Answers3

6

The CSS way

@media print

Use @media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.

Edit: You can hide any element, such as header this way:

header
{
    display:none;
}

footer
{
    display:none;
}

The Javascript way

Button's onClick

Your button's onclick:

Button onClick()

<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"

Your javascript code in the header (or at the end of the page)

Javascript

function printPage()
{
    var myDropDown = document.getElementById('myDropDown');
    myDropDown.style.display = "none";
    //Whatever other elements to hide.
    window.print();
    myDropDown.style.display = "block";
    return true;
}

You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
  • I'm currently using display:none within my media print, in order to hide buttons. The buttons were easy because I just put them in a div, and add the div id to my @media print (just as you said). However, the header extends from a different html page so this is what confuses me as I can't wrap the text : #{extends 'Application/main.html' /}, inside a div? Did you mean that I should add the id of the header (which is in main.html) to my media Print? – Eddie Jan 08 '13 at 15:49
1

Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.

The CSS:

@media print {
    #myHeader, #myFooter { display: none }
}

The HTML:

<div id="myHeader">
  <ul>
    <li>
      <a>My link</a>
   </li>
 </ul>
</div>
<div id="myContent">
  <p>This will print fine</p>
</div>
<div id="myFooter">
  <p>This will not print</p>
</div>

You could always use HTML5 header/footer elements!

epascarello
  • 204,599
  • 20
  • 195
  • 236
0

Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157