How to Hide Href Attribute of <A> Tag via CSS When Using Window.Print

How to hide href attribute of A tag via css when using window.print

Thank you, the solution i've found that work form me is similar to your

   #section_to_print a[href]:after { display:none; } 

In fact, the problem was generated by some css containing a rule like follow:

     a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;} 

Like suggested at this link:

stackoverflow.com/questions/4834517/…

However, thank to much :) Regards

Hide text on page but show it on window.print

you can use ´screen´ for regular screens so all you would have to do is

@media screen {
    .hide-from-screen {
        display: none;
    }
}

@media print {
     .hide-from-printer {
          display: none;
      }
 }

and use those classes accordingly.

Why the href attributes of a tags are printed to screen?

It looks like you may be grabbing the print.css for the screen. Make sure you have your media types set properly.

hide HTML div when printing page

try this:

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

<div class="dontprint">I'm only visible on the screen</div>

Use CSS to hide contents on print

I did it css3 way: using not pseudo class and direct ancestors (children)

/* hide all children of body that are not #container */
body > *:not(#container) {
  display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
  display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
  display: none;
}

This way you can eliminate everything except what you want to print even in very complex layouts. :not is very efficient here because it takes care about any future modifications of you html.

How can I hide button before printing and show it when printind process has been completed?

You are going at this wrong. You should not be showing and hiding the button with JavaScript or using a background image to do it. You should be using a print stylesheet that will allow you to apply different styles to the page when it is printed. In your case you would set the display to none [or visibility to hidden] in this stylesheet.

So you add a stylesheet with the media type for print

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

In that print.css, you hide the button

.printButtonClass{ display : none }

And presto, the button hides when you print with no JavaScript.

---

Related Topics