How can I run a jquery function only on @media screen?
Background:
I have a screen.css stylesheet and a print.css stylesheet. I have two javascript functions, one of which I do not want to run on the printed version want of the page.
-
Just to clarify: I'm printing to PDF, as I currently don't have access to a physical printer. Nevertheless, I need this to apply to both hardcopies and PDF printouts.Daze– Daze2012-08-24 16:43:15 +00:00Commented Aug 24, 2012 at 16:43
Add a comment
|
3 Answers
Any script would be ran when the page loads, so using if (Modernizr.mq('only screen')) {$('h1').text('media screen');} is pointless as it runs your script while you're on @media screen.
Instead, you have to detect whenever the media query changes, and change the page accordingly. You could use something like enquire.js to do so easily:
// This is just an example, be more creative!
enquire.register("screen", {
match: function() {
$('#only-show-on-screen').show();
},
unmatch: function() {
$('#only-show-on-screen').hide();
}
});
2 Comments
Mike Dotterer
This is the real answer. All the other answers (to date) are expecting the page to be reloaded on print, but it is not. Any DOM changes made for the screen version persist on the print version.
Léo Lam
I've updated my answer to make it clearer and how this could be done with enquire.js.
In latest browsers you can use matchesMedia:
if (window.matchMedia("screen").matches) {
....
}
If you want to support older browsers too you can use a polyfill like matchMedia.js
1 Comment
Daze
Elegant, however, my script still seems to also apply to print (print to PDF). Using Chrome 21, Firefox 11, Safari 6 on Mac.
I think you could use Modernizr. Although, there must be a native way to do it in javascript.
I have never tried it but it is something like this:
if (Modernizr.mq('only screen'))
{
..
}
beware with old browsers not supporting media queries.
4 Comments
Daze
Thanks, I tried your suggestion, but my script still seems to also apply to print (print to PDF). Using Chrome 21, Firefox 11, Safari 6 on Mac.
Carlos Martinez T
Are you saying that this:
Modernizr.mq('only screen') returned true and executed your code before printing?Daze
Yes,
if (Modernizr.mq('only screen')) {$('h1').text('media screen');} gives me "media screen" in both browser viewport and PDF printout.Daze
Actually, I don't think it returned true. What class would it give my
<html> tag?