CODEWITHSUNDEEP
javascriptjquery
cs0815
cs0815

Reputation: 17388

print css for two parts of same page

I am currently using some jquery to open a print dialog via a button:

$('.print').click(function () {
        window.print();
        return false;
    });

This uses the style with media="print", which hides a particular div before printing like this:

#someDiv {
     display:none !important;
}

I would like to add another button which just prints this particular div. What are my options to achieve this?

Upvotes: 2

Views: 188

Answers (1)

koosa
koosa

Reputation: 3040

You can use JavaScript to swap out the reference to the print css in the link tag.

Say you have two print buttons with ids print1 and print2, and two stylesheets called print1.css and print2.css. Then your link tag looks like this:

<link id="printstyle" rel="stylesheet" href="http://0.0.0.0:3000/print1.css">

and some Javascript/jQuery:

$("#print1").click(function(){
  $("#printstyle").attr('href', '/print1.css');
  window.print();
});

$("#print2").click(function(){
  $("#printstyle").attr('href', '/print2.css');
  window.print();
});

You may need to make sure you override every style defined in each stylesheet.

Upvotes: 1

Related Questions