https://github.com/thomd/js-media-query

detect css-defined media-queries with javascript
https://github.com/thomd/js-media-query

Last synced: about 1 year ago
JSON representation

detect css-defined media-queries with javascript

• Host: GitHub
• URL: https://github.com/thomd/js-media-query
• Owner: thomd
• Created: 2014-08-28T10:08:45.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2014-11-09T14:55:04.000Z (over 11 years ago)
• Last Synced: 2025-02-05T21:42:48.242Z (over 1 year ago)
• Language: JavaScript
• Size: 211 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JavaScript Media Queries

Trigger JavaScript events on transition of media query breakpoints and keep your media queries in the CSS as the only place.

### Usage

    bower install jquery js-media-query

Add `onMediaMatch` event listener for a `marker-name` breakpoint using jquery's chaining-syntax. Provide a matching event-handler and an optional non-matching event-handler like this:

    

    

    

      ...

      $('#header').onMediaMatch('marker-name', matchingEventHandler, nonMatchingEventHandler);

    

Import `breakpoint.sass` in your SASS file and define a `marker-name` breakpoint marker:

    @import 'breakpoint'

    #header

      @media screen and (min-width: 768px)

        @include js-breakpoint('marker-name')

        ...

### Demo

    grunt demo

    open http://localhost:8888

### Test

    npm install

    grunt test