Skip to content

sparkbox/mediaCheck

Repository files navigation

                      _ _        ____ _               _
   _ __ ___   ___  __| (_) __ _ / ___| |__   ___  ___| | __
  | '_ ` _ \ / _ \/ _` | |/ _` | |   | '_ \ / _ \/ __| |/ /
  | | | | | |  __/ (_| | | (_| | |___| | | |  __/ (__|   <
  |_| |_| |_|\___|\__,_|_|\__,_|\____|_| |_|\___|\___|_|\_\

This is a simple wrapper around matchMedia to run code on entry and exit from media queries. It also uses browser resize as a fallback for browsers that don't support matchMedia.

Demo

There are two examples here: http://sparkbox.github.io/mediaCheck/

media

Type: string

This is the mediaquery that will trigger the specified action. It should be in the form:

  • (min-width: 420px)
  • (min-width: 35em)
  • (max-width: 800px)
  • (max-width: 60em)

entry

Type: function

This function will execute once when the mediaquery becomes active.

exit

Type: function

This function will execute once when the mediaquery becomes inactive.

both

Type: function

This function will execute once when the mediaquery changes state.

Usage Example:

mediaCheck({
  media: '(max-width: 420px)',
  entry: function() {
    console.log('starting 420');
  },
  exit: function() {
    console.log('leaving 420');
  },
  both: function() {
    console.log('changing state');
  }
});

Change History

  • 1.0.3
    • Fixes a bug that caused the both function to
      only work on exit, but not entry.
  • 1.0.0
    • Drop support for IE < 10
  • 0.4.6
    • You can now pass combined mediaqueries e.g. (min-width: 320px) and (max-width: 800px)
    • It also now accepts [min|max]-aspect-ratio
  • 0.4.5
    • Passing mq to entry, exit, and both

License

Creative Commons Attribution-ShareAlike 3.0 Unported License https://creativecommons.org/licenses/by-sa/3.0/