Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
elementQuery
// call elementQuery and pass it an object containing the tests.
// also pass it an object containing a 'passed' callback and a 'failed' callback
// you can also pass a bool for whether you want to bind this to be run on resize
$('#torso').elementQuery({ 'min-width' : 910 , 'max-width' : 1155}, {
passed : function() {
$(this).addClass('l-full').removeClass('l-xlarge');
},
failed : function() {
$(this).removeClass('l-full');
}
}, true);
$('#torso').elementQuery({ 'min-width' : 1155 }, {
passed : function() {
$(this).addClass('l-xlarge').removeClass('l-full');
},
failed : function() {
$(this).removeClass('l-xlarge');
}
}, true);
(function( $ ) {
$.fn.elementQuery = function(propsObj, callbacks, bind) {
var $el = this;
var checkFunc = function(win) {
var passed = false;
for (var key in propsObj) {
passed = false;
var cssProp = key;
var cssVal = propsObj[key];
if (cssProp === "min-width") {
if ( $el.width() < cssVal) break;
} else if (cssProp === "max-width") {
if ( $el.width() > cssVal) break;
} else {
if ( $el.css(cssProp) !== cssVal+'px') break;
}
passed = true;
}
if (passed) {
if (callbacks.passed && typeof(callbacks.passed) === "function") {
// execute the callback, passing parameters as necessary
callbacks.passed.call($el);
}
} else {
if (callbacks.failed && typeof(callbacks.failed) === "function") {
// execute the callback, passing parameters as necessary
callbacks.failed.call($el);
}
}
};
if (bind) {
$(window).one('load.elementQuery', function(e) {
checkFunc(this);
});
$(window).on('resize.elementQuery', function(e) {
checkFunc(this);
});
}
return this;
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.