Show content only in printing page not in browser page using CSS or javascript

Question

I am having some dynamic content that should be shown only in the printing page and not in the web page using CSS or javascript. Please help me to do this.

For example;

I am having a div content like this..

echo '<div id="noshow">'.$val.'</div>'; //i am using php and $val is a dynamic value.

I need to show this value only in the printing page and not in the browser page. I used display:none. But, I don't know how to make it to display again in the printing page.

Put your print-specific styles in @media print { #noshow { display: none; } }. — haim770
– haim770, Commented Jun 24, 2015 at 13:46

Aaron · Accepted Answer · 2015-06-25 08:24:48Z

2

In you're regular stylesheet you could use @media queries for your print css...

@media print {
    #hid { display: table-row; }
}

or you could add a print style.css to the head of your page with the media attribute.

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

edited Jun 25, 2015 at 8:24

answered Jun 24, 2015 at 14:08

Aaron

10.5k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3784251 Over a year ago

It works..but, i am having a table's tr as hidden.. While displaying it in print shows this as a block not as a table's tr.. help me..

user3784251 Over a year ago

say for ex, this is my code

<style> @media print { 	#hid 	{ 		display:block; 	} 	} #hid { 	display:none; } </style> <?php echo '<table>'; echo '<tr><td>Bye</td></tr>'; echo '<tr id="hid"><td>hai</td></tr>'; echo '</table>'; ?>

It hides the hai in both printing view and browser view.. Help me.

user3784251 Over a year ago

i tried all most all property values in this link w3schools.com/cssref/pr_class_display.asp still doesn't work.

Aaron Over a year ago

for a tr you should show it as a table row. I've updated my answer with the correct display property for you.

Truezplaya · Accepted Answer · 2015-06-24 13:52:42Z

-1

You need to have two sets of CSS. One that is specifically around displaying to the browser and one that is for printing.

Look in to http://printstylesheet.dbushell.com/

Cheers Truez

answered Jun 24, 2015 at 13:52

Truezplaya

1,3131 gold badge13 silver badges26 bronze badges

2 Comments

Aaron Over a year ago

Pasting a link is not an answer. Answer a question with example code.

Truezplaya Over a year ago

Aaron, Correct it's not but the answer isn't to just gift the user the answer. One answer is too use two sets of CSS one for printing and one for normal display, the URL just shows a case where the user has hidden any elements within the body section.

Collectives™ on Stack Overflow

Show content only in printing page not in browser page using CSS or javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related