How do I hide an element when printing a web page?

Question

I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.

Is there javascript or HTML code which would hide the lin

Answer 1

The accepted answer by diodus is not working for some if not all of us. I could not still hide my Print this button from going out on to paper.

The little adjustment by Clint Pachl of calling css file by adding on

      media="screen, print" 

and not just

      media="screen"

is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments. The user should include the ",print" in css file with the desired formating.

     <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">

and not the default media = "screen" only.

    <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">

That i think solves this problem for everyone.

Answer 2

CSS FILE

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML HEADER

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMENT

<div class="no-print"></div>

Answer 3

You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).

The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.

Answer 4

The best practice is to use a style sheet specifically for printing, and and set its media attribute to print.

In it, show/hide the elements that you want to be printed on paper.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />