CODEWITHSUNDEEP
cssprinting
Cynthia
Cynthia

Reputation: 5403

Why won't page elements stay hidden when printing?

I have a web site I am working on where I have a 'print page' button. When the page prints, I want to hide certain elements of the page (e.g. left hand nav, top nav, etc...).

I have added this to my style.css:

@media print {
  #topnav { display:none }
  #left-col { display:none }
}

However, when I go to look at the print preview of the page, those elements are still there.

Any help would be much appreciated!

Upvotes: 1

Views: 344

Answers (2)

Cynthia
Cynthia

Reputation: 5403

I figured it out. It was a coding error on my part. My original link to my stylesheet looked like this:

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

and was causing a conflict. Once I removed media="screen" it worked perfectly.

Upvotes: 1

Codegiant
Codegiant

Reputation: 2150

You can try the following code:

HTML CODE

<input type="submit" id="print" value="Submit">

JS CODE

$(document).ready(function(){
  $('#print').on('click', function(){
        $('selector i.e #leftnav, #topnav').die();
     });
  });

OR

$('selector i.e #leftnav, #topnav').hide();

Upvotes: 0

Related Questions