CODEWITHSUNDEEP
javascriptjqueryhtmlcssprinting
wyc
wyc

Reputation: 55263

How to hide content but still make it printable?

I have an element (#print-content) that I'm printing with this jQuery plugin:

https://github.com/DoersGuild/jQuery.print

I don't want this element to show in the actual page, but I want it to show in the print version.

What CSS attribute can I use so it still shows up in the print version? Maybe height:0 or position absolute 0 ?"

Upvotes: 1

Views: 163

Answers (4)

user193130
user193130

Reputation: 8227

AFAIK, you can't use a specific CSS attribute to control whether an element is printed or not, but you can use CSS media queries instead:

@media screen {
    #print-content {
        display: none;
    }
}

This will prevent the element from rendering when the page is being displayed on a screen, but when it is printed, it will process it normally according to the rest of your CSS rules.

If you want the opposite effect (hide in print, but show on screen), you can use this:

@media print {
    #print-content {
        display: none;
    }
}

See this page for more information on CSS @media queries.

FYI, it's bad practice to use display: none; to hide the content by default, then use display: block; to show it in a media query. This is based on the assumption that the element's display type is block, but it may very be anything else such as inline, inline-block, etc. It also uses two rules instead of one.

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing .clone() , .attr() , window.open() , .outerHTML

html

<pre id="print-content"> (<span class="light">highlighted</span> portion) </pre>
<div>abc 123</div>
<button id="save">Print</button>

css

.light {
    color:#0af;
}
#print-content {
    display:none;
}

js

$("#save").click(function () {
    var text = $("body").clone();
    text.find("#print-content").attr("style", "display:block");
    text.find("#save, script").remove();
    var styles = $("style")[0].outerHTML;
    var popup = window.open("", "popup");
    popup.document.body.innerHTML = text[0].outerHTML + styles;
    popup.focus();
    popup.print();
});

jsfiddle http://jsfiddle.net/qz2too0o/

Upvotes: 0

Boris
Boris

Reputation: 586

One possibility is to use CSS to hide the element in a way that does not interfere with the layout.

CSS:

#print-content {
    display: none;  //may need !important
}

The element and it's children should not display, child elements should still print. More about the display property: http://www.w3schools.com/cssref/pr_class_display.asp

Another solution (by Andreas Grech in the below post) is to use a separate style sheet:

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

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

In the print style sheet, the @media print {} would be used to define what should be printed.

Upvotes: 0

Marcelo Gomes
Marcelo Gomes

Reputation: 76

You can use just media queries.

#print-content {
    display: none; /*** Remove from the body ***/
}

@media print {
    #print-content {
        display: block; /*** Show just in print ***/
    }
}

Upvotes: 2

Related Questions