https://github.com/anthonyshort/element-query

Media queries for elements
https://github.com/anthonyshort/element-query

Last synced: 24 days ago
JSON representation

Media queries for elements

• Host: GitHub
• URL: https://github.com/anthonyshort/element-query
• Owner: anthonyshort
• Created: 2013-06-22T14:53:47.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-06-26T17:27:29.000Z (over 10 years ago)
• Last Synced: 2024-04-15T03:16:20.135Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 164 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        

# element-query

  Test a media query on an element

## Installation

  Install with [component(1)](http://component.io):

    $ component install anthonyshort/element-query

## API

    var query = require('element-query');

    var mq = query(someElement, '(max-width: 960px)'); // Just like matchMedia

    if(mq.matches) {

      el.classList.add('wide');

    }

# How it works

  It creates an iframe, gives it the same dimensions of the element you are testing,

  adds it to the page and uses the iframes `matchMedia` to test the query.

  element-query creates a hidden iframe on the page and re-uses each time the method

  is called. While a bit dirty, it is [much, much faster](http://jsperf.com/element-queries-with-iframe).

# Limitations

  You can't use `addListener` on the element query just yet. I might look at adding

  this if it's needed, but I just don't need it yet.

## License

  MIT