https://github.com/sparkbox/mediacheck

Control JS with mediaqueries
https://github.com/sparkbox/mediacheck

hacktoberfest matchmedia mediaqueries

Last synced: 6 days ago
JSON representation

Control JS with mediaqueries

• Host: GitHub
• URL: https://github.com/sparkbox/mediacheck
• Owner: sparkbox
• Created: 2012-02-22T16:29:14.000Z (almost 13 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T13:46:53.000Z (almost 2 years ago)
• Last Synced: 2024-12-17T02:03:10.127Z (17 days ago)
• Topics: hacktoberfest, matchmedia, mediaqueries
• Language: JavaScript
• Homepage: http://sparkbox.github.io/mediaCheck
• Size: 729 KB
• Stars: 237
• Watchers: 32
• Forks: 40
• Open Issues: 15
• Metadata Files:
  • Readme: readme.md
  • Contributing: contributing.md

Awesome Lists containing this project

README

        

```

                      _ _        ____ _               _

   _ __ ___   ___  __| (_) __ _ / ___| |__   ___  ___| | __

  | '_ ` _ \ / _ \/ _` | |/ _` | |   | '_ \ / _ \/ __| |/ /

  | | | | | |  __/ (_| | | (_| | |___| | | |  __/ (__|   <

  |_| |_| |_|\___|\__,_|_|\__,_|\____|_| |_|\___|\___|_|\_\

```

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:

```javascript

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](http://i.creativecommons.org/l/by-sa/3.0/88x31.png) https://creativecommons.org/licenses/by-sa/3.0/