Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Script to add a MatchMedia event for each media query in a page's stylesheets

branch: master

This branch is 0 commits ahead and 0 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

Media Query Events

This small script:

  • Finds all media query rules in any stylesheets on a page
  • For each of those MediaRules creates a MatchMedia thingy
  • Adds a listener to each MatchMedia object
  • Calls a provided changeMediaHandler each time a MatchMedia event fires
  • Is a work in progress

Usage

The mqEvents function is attached to the window object, which it probably should not be.

Run mqEvents().

Pass it a single function parameter that will run each time a MatchMedia event fires. The function will be passed the MediaQueryList from the event.

Example

mqEvents(function (mql) {
    if (mql.matches) {
        // Media query condition was met
    }
    else {
        // Media query condition was not met
    }
});

Reference

Something went wrong with that request. Please try again.