Question

I have a page with a number of features and styles defined through jQuery on document-ready and window-scroll, and even made sure it degraded nicely with JavaScript disabled. However, I was just throwing together a “print” stylesheet that scraps most of the stylizations, and when I tested it I realized that my jQuery methods are kicking in when printing and adding back in some background images. Is it possible to disable JavaScript or jQuery, or even a particular function, when printing?

The biggest problem is this piece, that generates a random background image based on a number generated earlier…it is overriding my print stylesheet’s call for background-image:none, even when using the !important tag:

$(document).ready(function() {
    $("body").css({backgroundImage: 'url(images/body_bg_'+background+'.jpg)'});
});

Thanks!

Answer 1

Define your styles in the stylesheet. Then use JavaScript to change the DOM to cause those styles to be applied to an element, instead of modifying the style property.

This lets you keep control of the different media, and maintain the separation of concerns (semantics, presentation and logic).

@media screen {
   body.something {
       background-image: url(images/body_bg_something.jpg);
   }
}

$(document).ready(function() {
    $("body").addClass('something');
}

That said:

it is overriding my print stylesheet’s call for background-image:none, even when using the !important

It really shouldn’t be able to do that.