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.

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.

• javascript
• jquery
• printing
• media-queries

• 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 Commented Aug 24, 2012 at 16:43

3 Answers 3

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();
    }
});

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

I think you could use Modernizr. Although, there must be a native way to do it in javascript.

http://modernizr.com/docs/#mq

I have never tried it but it is something like this:

if (Modernizr.mq('only screen'))
{
..
}

beware with old browsers not supporting media queries.