17

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

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
cool
  • 3,225
  • 3
  • 33
  • 58

1 Answers1

36

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.

Matthew Lock
  • 13,144
  • 12
  • 92
  • 130
Radu Maris
  • 5,648
  • 4
  • 39
  • 54