Hide Parts of page when printing?

Question

I have created a basic HTML page and placed a print button at the bottom which prints the profile of the candidate which is being shown on the page. The problem is it prints the button as well as all the menus on the side and the footer. What should I do to print only the Candidate Profile. This the function I call on clicking on print button.

<script>
    function printbill() {
        window.print();
    }
</script>

The 800 rep., well you seemed to have taken care of that now. Thanks. — rexroxm, Feb 02 '17 at 05:11
Just to make sure you understand, I ONLY marked as duplicate, I did not correct your points. I do not think the two were related at all. — mplungjan, Feb 02 '17 at 07:44

Daisuke Tahara · Answer 1 · 2017-02-01T10:50:44.527

1

You could use a print style.

Add the following to your page css:

@media print {
   #header { /* Add the elements you want to hide */
      display: none; 
   }
}

edited Feb 01 '17 at 10:50

answered Feb 01 '17 at 10:48

Daisuke Tahara

183
7

@mplungjan Thanks for pointing that out, I have edited my answer. – Daisuke Tahara Feb 01 '17 at 10:53

score 1 · Answer 2 · answered Feb 01 '17 at 10:50

1

Try to use css only:

@media print { 
  #header, #footer, #nav { display: none !important; } 
  .CandidateProfile: { display: block!important }
}

answered Feb 01 '17 at 10:50

Михаил Синяков

113
1
4

Hide Parts of page when printing?

2 Answers2