Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Element visible only on print page

Tags:

html

css

printing

Im having problems with displaying ONLY some elements ONLY on print page. For example i have a page, where users can see print preview (simple javascript). On that print page im showing just some elements from page (not all of them), using for that:

@media print {
  .noPrint {
      display:none;
  }
}

Now when i apply .noPrint to an element, it will not be showned in print page. But, how it is possible to create for example div on a page, that will be vissible on "print page" but not on regular page.

Is this enough, and supported by most browsers?

@media screen, projection, tv {


 .dontShowThis {
    display:none
  }
}

And now if i want to show element on print page but not on regular page i will do this

<div class="dontShowThis printIt">Some content goes here</div>

Tnx

like image 761
cool Avatar asked Jun 20 '12 09:06

cool


People also ask

How do I hide the elements when printing?

To hide the element, add “display:none” to the element with CSS.

How do I hide the elements when printing a website?

The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.

What is @media print?

Print media, as you know is one of them. Print media is one of the oldest and basic forms of mass communication. It includes newspapers, weeklies, magazines, monthlies and other forms of printed journals. A basic understanding of the print media is essential in the study of mass communication.

How do I stop an element from printing on two pages?

You can use page-break-inside="avoid" on <div> "B". This is probably closer to what you want. If "B" does not fit on the page with "A", "B" will all be moved to the next page.


1 Answers

I did somthing similar a while ago, this is how I did it:

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

<div class="noScreen">Some content goes here</div>

AFAIK this is supported by all major browsers, even IE8 started to support it.

like image 117
Radu Maris Avatar answered Sep 18 '22 19:09

Radu Maris