jQuery elementQuery

elementQuery allows you to style elements based on their parent container's changing size. You can read more about the concept in Smashing Magazine's article.

This is different from media queries in that it targets the size of a specific element, regardless of whether the window size has changed.

Usage

#### Basic
``
// pass an array of your queries
$('.element').elementQuery(['max-width: 900', 'min-width: 901']);
`
`
/ your .element must be positioned (relative, absolute), not static. /
.element {
position: relative;
}

/ max-width, min-width, max-height, or min-height attribute selectors /
.element[max-width-900="true"] {
/ your styles for <= 900px /
}

.element[max-width-900="false"] {
/ your styles for > 900 /
}

.element[min-width-901="true"] {
/ your styles for >= 901px /
}

.element[min-width-901="false"] {
/ your styles for < 901px /
}
`

#### With a callback
`
$('.element').elementQuery(['min-width: 800'], function(dims) {

//dims contains current width and height
console.log(dims.width, dims.height);

// 'this' references .element
console.log($(this).width(), $(this).height());

});
`

Motivation

I could not find an elementquery option that:

- Did not rely on window resize. It seemed silly to listen for window resize events when the element may or may not resize as a result of that.
- Did not rely on introducing scrolling elements. These caused visible scrollbars and sluggish performance.

This plugin does not rely on either technique, so accurately reports resizes on the element itself, and only introduces a single empty iframe that shows no scrollbars and reports its resize the same way that window would.

Demo: http://notthatnathan.github.io/demos/jquery-elementquery/

Installation

`
npm install jquery-elementquery --save
`

Contributing

It would be cool to rewrite the underlying this plugin and the jquery-elementresize` to not require jQuery (under a different name). I could also use help writing some tests.

License

MIT