show div only when printing

Question

Let's say that I have

<div id="printOnly">
     <b>Title</b>
     <p>
        Printing content 
     </p>
</div>

Is it possible to hide this div when page rendering and to show only when printing this div?

possible duplicate of [Print
only?](http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) — S.Krishna, Jun 22 '15 at 07:46

score 31 · Accepted Answer · answered Jun 22 '15 at 07:10

31

You need some css for that

#printOnly {
   display : none;
}

@media print {
    #printOnly {
       display : block;
    }
}

answered Jun 22 '15 at 07:10

Nikhil Aggarwal

27,657
4
40
56

Kiran Dash · Answer 2 · 2015-06-22T07:15:01.643

8

@media screen
{
    #printOnly{display:none;}
}

@media print
{
    #printOnly{}
}

edited Jun 22 '15 at 07:15

answered Jun 22 '15 at 07:11

Kiran Dash

4,474
11
47
80

As per markup, printOnly is id and you are using class selector in your css. – Nikhil Aggarwal Jun 22 '15 at 07:14

score 5 · Answer 3 · answered Jun 22 '15 at 07:12

5

You should use media query.

In your case:

#printOnly {
    display: none;
}

@media print { 
    #printOnly {
        display: block;
    }
}

PS take a look here http://www.joshuawinn.com/css-print-media-query/ for browser support

answered Jun 22 '15 at 07:12

alberto-bottarini

1,197
8
21

score 1 · Answer 4 · answered Jun 22 '15 at 07:11

1

You can attach external css stylesheet with media="print" attribute:

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

answered Jun 22 '15 at 07:11

hsz

143,040
58
252
308

score 1 · Answer 5 · answered Jun 22 '15 at 07:12

I think the best solution would be to create a wrapper around the non-printable stuff:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

score 1 · Answer 6 · answered Jun 22 '15 at 07:16

1

/*for printer*/
@media print {
    #printOnly { }
        /* write your css rules*/

}
/*for desktop*/
    @media screen {
    #printOnly { display: none;}
             /*for all display view*/                 
}

answered Jun 22 '15 at 07:16

GabrieleU

51
1
2
8

score 1 · Answer 7 · answered Jun 22 '15 at 08:07

1

@media screen { #printOnly:{display:none;} }
@media print{ #printOnly:{display:block;} }

answered Jun 22 '15 at 08:07

Abdullah Al Shakib

1,954
2
13
15

score 0 · Answer 8 · answered Jun 25 '15 at 07:32

You need media query for switching between print and screen option

@media screen { /* for screen option*/

p {

      font-family: verdana, sans-serif;

      font-size: 17px;

  }

   }

@media print { /* for print option*/

 p {

     font-family: georgia, serif;
     font-size: 14px;
     color: blue;
   }

  }

http://www.w3schools.com/css/css_mediatypes.asp

show div only when printing

8 Answers8

Linked

Related