Question

I have the following code to run on the rendered template page after selecting to print from the browser:

<script type="text/javascript">
$(function() {
    $("td:contains('Labour')").next("td").addClass("white");
    var thisTr = $("td:contains('Labour')").parent();
    thisTr.children().eq(2).addClass("white");
    thisTr.children().eq(3).addClass("white");
});
</script>

CSS:

 @media print {
      body           { margin:auto; }
      .section       { page-break-inside:avoid; }
      div#sfWebDebug { display:none; }
      .white {color: white;}
    }

I checked the code and it’s working when in a normal browser window: http://jsfiddle.net/elen/vArH8/

But the white class doesn’t seem apply in the pop-up to print. I tried in Chrome and Firefox.

Do browsers allow JavaScript to run when printing?

---

answering my own stupid question – it would help if I added jquery plugin to the template first!

and the following code works perfectly:

<script type="text/javascript">
$(document).ready(function() {
    var thisTr = $("td:contains('Labour')").parent();
    thisTr.children().eq(1).empty();
    thisTr.children().eq(2).empty();
    thisTr.children().eq(3).empty();
    window.print();
});
</script>

Answer 1

This isn’t an issue of javascript, it’s just that printers don’t print white. It will often discard CSS to make things more readable.

Do you want to just hide those fields? You can use the .empty() method to achieve that more easily.