Skip to content

Instantly share code, notes, and snippets.

@tjFogarty tjFogarty/foundation-mq.js
Last active Aug 29, 2015

Embed
What would you like to do?
Check Foundation Media Queries
/* globals $, jQuery, Foundation */
/* jshint node:true */
'use strict';
window.MQ = (function(MQ, $, queries) {
/**
* $cache elements
* @type {Object}
*/
var $cache = {
small: queries.small,
medium: queries.medium,
large: queries.large,
xlarge: queries.xlarge,
xxlarge: queries.xxlarge
};
/**
* Check media queries
* @param {string} mq [media query]
* @return {boolean}
*/
var _checkMatchMedia = function (mq) {
return window.matchMedia(mq).matches;
};
/**
* Get small screen media query
* @return {string}
*/
var _getSmall = function () {
return $cache.small;
};
/**
* Get medium screen media query
* @return {string}
*/
var _getMedium = function () {
return $cache.medium;
};
/**
* Get large screen media query
* @return {string}
*/
var _getLarge = function () {
return $cache.large;
};
/**
* Get xlarge screen media query
* @return {string}
*/
var _getXLarge = function () {
return $cache.xlarge;
};
/**
* Get xxlarge screen media query
* @return {string}
*/
var _getXXLarge = function () {
return $cache.xxlarge;
};
/**
* Check if we're on a small screen
* @return {Boolean}
*/
MQ.isSmallUp = function () {
return _checkMatchMedia(_getSmall());
};
/**
* Check if we're on a medium screen
* @return {Boolean}
*/
MQ.isMediumUp = function () {
return _checkMatchMedia(_getMedium());
};
/**
* Check if we're on a large screen
* @return {Boolean}
*/
MQ.isLargeUp = function () {
return _checkMatchMedia(_getLarge());
};
/**
* Check if we're on a xlarge screen
* @return {Boolean}
*/
MQ.isXLargeUp = function () {
return _checkMatchMedia(_getXLarge());
};
/**
* Check if we're on a xxlarge screen
* @return {Boolean}
*/
MQ.isXXLargeUp = function () {
return _checkMatchMedia(_getXXLarge());
};
/**
* Check if we're on a small screen only
* @return {Boolean}
*/
MQ.isSmallOnly = function () {
return !MQ.isMediumUp() && !MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
};
/**
* Check if we're on a medium screen only
* @return {Boolean}
*/
MQ.isMediumOnly = function () {
return MQ.isMediumUp() && !MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
};
/**
* Check if we're on a large screen only
* @return {Boolean}
*/
MQ.isLargeOnly = function () {
return MQ.isMediumUp() && MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
};
/**
* Check if we're on a xlarge screen only
* @return {Boolean}
*/
MQ.isXLargeOnly = function () {
return MQ.isMediumUp() && MQ.isLargeUp() && MQ.isXLargeUp() && !MQ.isXXLargeUp();
};
/**
* Check if we're on a xxlarge screen only
* @return {Boolean}
*/
MQ.isXXLargeOnly = function () {
return MQ.isMediumUp() && MQ.isLargeUp() && MQ.isXLargeUp() && MQ.isXXLargeUp();
};
return MQ;
})(window.MQ || {}, jQuery, Foundation.media_queries);
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.