CODEWITHSUNDEEP
javascripthtmlcss
user1765862
user1765862

Reputation: 14145

show div only when printing

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?

Upvotes: 13

Views: 15609

Answers (9)

Nasyx Nadeem
Nasyx Nadeem

Reputation: 280

In case, display: none is not working or creating issues with the print layout. You can use this

      @media screen {
        .print-only {
          visibility: hidden;
          position: absolute;
          z-index: -199;
          transform: scale(0.1);
        }
      }

      @media print {
        .print-only {
          display: flex;
          overflow: visible;
          transform: scale(1);
        }
      }

Upvotes: 0

sach
sach

Reputation: 271

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

Upvotes: 0

Abdullah Al Shakib
Abdullah Al Shakib

Reputation: 2044

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

Upvotes: 1

GabrieleU
GabrieleU

Reputation: 51

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

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

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

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

@media print
{
    #printOnly{}
}

Upvotes: 8

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

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>

Upvotes: 1

alberto-bottarini
alberto-bottarini

Reputation: 1231

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

Upvotes: 5

hsz
hsz

Reputation: 152206

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

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

Upvotes: 2

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

You need some css for that

#printOnly {
   display : none;
}

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

Upvotes: 34

Related Questions