Hide when page load show when print

Question

What specific css code that will hide the item when the page load and later show it when printing? I use window.print function for print the html page. I only got the function to hide something when printing page.

<style type="text/css" media="print">
#dontprint { 
   display: none; 
}
</style>


<a href="#"  id="dontprint" onclick="myFunction()" > Print </a>

Could you try rephrase, do you mean when actually printing, or do you want to toggle something to show / hide when clicking on your print link? — Joachim, Aug 14 '15 at 14:43
when the page load the object will hide but when printpreview it will show — Ronaldo Carpio, Aug 14 '15 at 14:45

Jacob G · Accepted Answer · 2015-08-14T14:50:59.433

3

Use CSS's @media print:

#print{
display:none;
}
@media print
{    
    #print { 
      display: block !important; 
    }
}

JSFiddle Demo - View it in print preview

edited Aug 14 '15 at 14:50

answered Aug 14 '15 at 14:45

Jacob G

13,762
3
47
67

this is for hiding the object ? i got this one i want the code that will hide the object when the page load and when in print view it will show. thx – Ronaldo Carpio Aug 14 '15 at 14:47
@RonaldoCarpio the updated version will – Jacob G Aug 14 '15 at 14:51

Michał Perłakowski · Answer 2 · 2016-01-21T20:11:53.853

Create a CSS rule that hides some element (display: none;) and then in @media print create a rule that shows element (display: block;).

document.getElementById("print-button").addEventListener("click", function() {
 window.print();
});

.print {
    display: none;
}
.no-print {
    display: block;
}
@media print {
    .print {
        display: block;
    }
    .no-print {
        display: none;
    }
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas ante nec arcu vestibulum, at mattis tortor ullamcorper. Etiam bibendum rutrum risus, sollicitudin fringilla metus vestibulum sit amet. Cras malesuada purus eget nibh finibus, sit amet feugiat elit sagittis. Vivamus vel tincidunt mauris. Praesent eu rhoncus magna. Etiam suscipit leo a porta ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum consequat, libero suscipit porttitor sagittis, orci tellus placerat ligula, ac pretium velit mauris sed massa. Duis eleifend ultrices lorem eu porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam cursus dapibus nisi, nec eleifend tellus feugiat eget. Cras augue purus, luctus quis lorem ut, vehicula molestie sem. Morbi consequat pharetra ipsum et egestas. In ac commodo justo. Aliquam dignissim faucibus odio, vitae lacinia lectus pharetra at. Vestibulum lectus ante, scelerisque vitae ex ut, ultrices volutpat felis.</p> 
<p class="print">Nullam efficitur in turpis non tincidunt. Nullam sagittis dignissim eros eget laoreet. Maecenas at odio purus. Fusce faucibus velit eget ante tempor lacinia. Duis et eleifend augue, at egestas magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac scelerisque augue. Duis vel sapien ac est tempus aliquet. Proin pharetra non arcu id faucibus. Donec commodo pellentesque nunc nec porttitor. Aenean bibendum arcu ligula, id varius mi consequat eget. Etiam fermentum aliquet vestibulum. Quisque eget neque vitae est tristique tristique at at augue. Phasellus a commodo nunc. Duis ut elit orci.</p>
<button class="no-print" id="print-button">Print</button>

Hide when page load show when print

2 Answers2