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
To hide the element, add “display:none” to the element with CSS.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With