Question

I have a web application that utilizes a separate print stylesheet to control how the page looks when it comes out of the printer. That was working wonderfully until I recently made some Javascript enhancements to the site. One of these enhancements allows the user to freeze the page header and navigation, as well as table headers. The Javascript behind this does some CSS trickery to freeze the elements on the screen. Unfortunately, applying position: fixed to my header (for example) causes it to print on every page, and this is not a desired effect. How can I use Javascript to tweak element styles on the client-side without affecting the print style?

@media print { #foo { color: blue; } }               /* Print definition */
@media screen { #foo { color: green; } }             /* Display definition */
document.getElementById('foo').style.color = 'red';  /* Overrides both! */

Answer 1

No good solution! What I ended up doing is utilizing the onbeforeprint and onafterprint functions in IE (I am in the position here that we only have IE users) to “unfreeze” and “refreeze” the elements…

window.onbeforeprint = function() {
  document.getElementById('foo').style.position = 'static';
}

window.onload = window.onafterprint = function() {
  var el = document.getElementById('foo');
  // Get element position and size
  // Set left/top/width/height properties
  // Set position to fixed
  el.style.position = 'fixed';
}