cool cool - 6 months ago 37
HTML Question

Element visible only on print page

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

Answer

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.