jquery-matchmedia

jquery.matchMedia.js

jQuery adapter for matchMedia (https://developer.mozilla.org/cs/docs/Web/API/Window/matchMedia)

Current browser support: https://caniuse.com/#search=matchMedia

jquery.matchMedia.js has two versions

1. dist/jquery.matchMedia.js DEMO HERE
2. dist/jquery.matchMedia.polyfill.js - include polyfill (https://github.com/paulirish/matchMedia.js/) DEMO HERE

NPM

npm install jquery-matchmedia --save

options

• Rule - string - media queries rule or name. Example: '(max-width: 40em)' or 'md'.
• HandlerTrue - function - function is calling, if rule is true.
• HandlerFalse - function - function is calling, if rule is false.
• Listener - booleans - default is true - addListener on resize

You can call function in two ways

With selector

    $('.element').mq(rule, handlerTrue, handlerFalse);

Example

    $('.element').mq('(min-width: 40em)', function () {
        $(this).css('color', 'green').text('true');
    }, function () {
        $(this).css('color', 'red').text('false');
    });

OR

Without selector

    $.mq.action(rule, handlerTrue, handlerFalse);

Example

    $.mq.action('(min-width: 40em)', function () {
        console.log('true');
    }, function () {
        console.log('false');
    });

You can share media query rules with css

In css you need to write json with breakpoints to html:before {content '-->>HERE<<--'}:

    html:before {
      display: none;
      content: '{"xs" : "(max-width: 47.9375em)", "sm": "(min-width: 48em) and (max-width: 61.9375em)", "md": "(min-width: 62em) and (max-width: 74.9375em)", "lg": "(min-width: 75em)"}';
    }

Now you can call rules by names (xs, sm, md, lg).

This can be use after $(document).ready().

    $(document).ready(function () {
        $('.element').mq('md', function () {
            $(this).css('color', 'green').text('md true');
        }, function () {
            $(this).css('color', 'red').text('md false');
        });

        $.mq.action('sm', function () {
            console.log('sm true');
        }, function () {
            console.log('sm false');
        });
    });

Object with breakpoints rules is return $.mq.getBreakpoints().

For inspiration I thank to Jan Semilský and Bohumil Jahoda.