{"id":17961,"date":"2012-09-04T16:08:23","date_gmt":"2012-09-04T23:08:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17961"},"modified":"2017-04-13T17:44:39","modified_gmt":"2017-04-14T00:44:39","slug":"enquire-js-media-query-callbacks-in-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/enquire-js-media-query-callbacks-in-javascript\/","title":{"rendered":"Enquire.js &#8211; Media Query Callbacks in JavaScript"},"content":{"rendered":"<div class=\"explanation\">The following is a guest post Nick Williams. Nick emailed me about a new library he created to assist in working with responsive design. Specifically, he was implementing an idea he found here on CSS-Tricks but wanted to do so more intelligently by only running the script when needed. Thus the birth of this new mini library! There are some <a href=\"http:\/\/adapt.960.gs\/\" rel=\"noopener\">kind of similar<\/a> ones out there, but this one is very small and works with native media queries. I&#8217;ll let Nick tell you more about it&#8230;<\/div>\n<p><a href=\"http:\/\/wickynilliams.github.com\/enquire.js\/\" rel=\"noopener\">Enquire.js<\/a> is a JavaScript library I created for dealing with media queries in JavaScript.<\/p>\n<blockquote><p><em>&#8220;Whoa! Back it up!<\/em> Media queries in JavaScript?! What kind of abomination is this?&#8221;<\/p><\/blockquote>\n<p>Whilst the premise may seem odd, it really is a handy addition to the responsive toolbox.<\/p>\n<h3>The Lowdown<\/h3>\n<p>Enquire.js is a lightweight, pure JavaScript library for handling media queries. It is less than 1kb when GZIP&#8217;d and minified, and has absolutely no dependencies. Yup, you read that right &#8211; no dependencies, not even jQuery! The most you will have to do is provide a <a href=\"https:\/\/github.com\/paulirish\/matchMedia.js\/\" rel=\"noopener\">matchMedia polyfill<\/a> if you wish to support <a href=\"http:\/\/caniuse.com\/matchmedia\" rel=\"noopener\">browsers without a native implementation<\/a>.<\/p>\n<h3>Use Cases<\/h3>\n<ul>\n<li>Responsive Design<\/li>\n<li>Mobile-first Design<\/li>\n<li>Assist older browsers with media queries<\/li>\n<\/ul>\n<h3>Raison D&#8217;etre<\/h3>\n<p>So how and why did this come about? I think the easiest way to explain is through a simple scenario&#8230;<\/p>\n<p>Imagine you&#8217;ve got an established website, currently fixed-width and targeted at large-screened devices. You&#8217;ve heard all the hubbub about this &#8220;responsive design&#8221; business and wish to get in on some of the action. So you dutifully start designing and planning how your website may work on small-screened devices. You&#8217;ve cut out all the chuff, cleared your floating sidebar and bumped up the size of your form elements. Great!<\/p>\n<p>But what about that pesky menu? It&#8217;s beefy, it&#8217;s got multiple levels and relies on CSS hover effects to expose the deeper hierarchy &#8211; in other words, it ain&#8217;t gonna work on a small-screened touch device!<\/p>\n<p>So you do a little digging around on Google and stumble across a clever solution to <a href=\"https:\/\/css-tricks.com\/examples\/ConvertMenuToDropdown\">convert a menu into a dropdown<\/a>. High fives all round, your menu is now functional on mobile touch-based devices! But you&#8217;ve got this nagging sensation. You&#8217;re not quite sure what it is, but something&#8217;s still not quite right. Ah yes, that&#8217;s it; you&#8217;re running this code even for large screened devices, even though they have absolutely no need for it! You shed a little tear for the wasted CPU cycles, wishing that there was a way to selectively run this JavaScript.<\/p>\n<h3>A New Challenger Appears!<\/h3>\n<p>This is where enquire steps in to help out.<\/p>\n<p>For now, we&#8217;ll run with the <em>converting a menu to a dropdown<\/em> scenario, making the menu appear when the window is less than 960px. With enquire, it&#8217;s as simple as this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">enquire.register(\"max-width: 960px\", function() {\r\n  \/\/ put Chris' code here to convert your menu to a dropdown\r\n});<\/code><\/pre>\n<p>All this does is tell enquire to invoke the supplied function only if the given media query matches. And so, you save those precious CPU cycles for large-screened devices. OK, I realise that&#8217;s a bit silly since mobile devices typically have lesser-powered CPUs compared to larger screened devices, but it works from the other direction also &#8211; the much-fabled mobile first approach!<\/p>\n<h3>Digging Deeper<\/h3>\n<p>At this point it&#8217;s worth quickly running through the enquire API before we get into some meatier scenarios. The previous example showed the most simple use-case for enquire &#8211; supplying a function as the second parameter to be run when a media query matches. This will suffice in most scenarios, however enquire can do a lot more if you&#8217;ve got more demanding requirements. You can pass the <code>register<\/code> method an object as so:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">enquire.register(\"screen and (max-width: 1000px)\", {\r\n\r\n  \/\/ REQUIRED\r\n  \/\/ Triggered when the media query transitions\r\n  \/\/ from *unmatched* to *matched*\r\n  match : function() {},\r\n  \r\n  \/\/ OPTIONAL   \r\n  \/\/ Triggered when the media query transitions \r\n  \/\/ from a *matched* to *unmatched*                        \r\n  unmatch : function() {},    \r\n                                \r\n  \/\/ OPTIONAL\r\n  \/\/ Triggered once immediately upon registration of handler\r\n  setup : function() {},      \r\n                                \r\n  \/\/ OPTIONAL\r\n  \/\/ Defaults to false\r\n  \/\/ If true, defers execution of the setup function\r\n  \/\/ until the first media query is matched (still just once)\r\n  deferSetup : true           \r\n});<\/code><\/pre>\n<p>This signature gives you full control and allows you to define exactly what you want to happen, and when you want it to happen. This only really becomes useful when you make a call to enquire&#8217;s <code>listen<\/code> function (more on this shortly).<\/p>\n<h2>Examples<\/h2>\n<p>So let&#8217;s get onto some examples that show the more advanced features in action.<\/p>\n<h3>Faux Media Queries In Legacy Browsers<\/h3>\n<p>Enquire.js can be used to fake some rudimentary media queries in older browsers. However, please don&#8217;t use this approach as a replacement to genuine media queries in your CSS, just use it as a monkey patch for older browsers (jQuery used in this example):<\/p>\n<pre rel=\"jQuery\"><code class=\"language-javascript\">$(function() {\r\n\r\n  \/\/ cache body for speed\r\n  var $body = $(\"body\");\r\n\r\n  \/\/ DRY up handler creation\r\n  function handlerFactory(className) {\r\n    return {\r\n      match : function() {\r\n        $body.addClass(className);\r\n      },\r\n      unmatch : function() {\r\n        $body.removeClass(className);\r\n      }\r\n    };\r\n  }\r\n\r\n  \/\/ hook up our \"media queries\"\r\n  enquire\r\n    .register(\"screen and (max-width : 320px)\", handlerFactory(\"lt-320\"))\r\n    .register(\"screen and (max-width : 640px)\", handlerFactory(\"lt-640\"))\r\n    .listen();\r\n\r\n});<\/code><\/pre>\n<p>Here we&#8217;re using <code>match<\/code> and <code>unmatch<\/code> handlers to add or remove classes to the <code>&lt;body&gt;<\/code> element, which allows us to target styles at different sized screens. Notice we can chain calls to all of enquire&#8217;s functions.<\/p>\n<p>Of particular note here is the call to the <code>listen<\/code> function so that enquire will respond to browser resize and orientation change events (though of course in this example, orientation change events are unlikely in legacy browsers). For optimal performance, <code>listen<\/code> is throttled to only respond to one event in a given timeframe. By default this is 500ms, but you can specify your own throttle by passing as a parameter to listen:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ 10000 milliseconds = 10 seconds. Why not?!\r\nenquire.listen(10000); <\/code><\/pre>\n<h3>Dogfooding<\/h3>\n<p>Let&#8217;s walk through an example of a real world use of enquire, taken from the <a href=\"http:\/\/wickynilliams.github.com\/enquire.js\/\" rel=\"noopener\">enquire.js project page<\/a> (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Dogfooding\" rel=\"noopener\">dogfooding<\/a> FTW!). Here I wanted to make the page load as quick as possible by only loading the bare minimum amount of JavaScript by default, opting to load anything beyond that asynchronously, only when required. This is so that small-screened devices (and by proxy those more likely to be on a slow connection) get the speediest page load possible, and only large-screened devices have to deal with the extra resources.<\/p>\n<p>In particular, this pattern is used to pull all code required to generate and render the &#8220;Jump To&#8221; sidebar of the project page. This example is slightly simplified as not to distract from the important concepts:<\/p>\n<pre rel=\"jQuery\"><code class=\"language-javascript\">$(function() {\r\n\r\n  $toc = $(\".toc\");\r\n\r\n  enquire.register(\"screen and (min-width: 1310px)\", [{\r\n\r\n    deferSetup : true,\r\n\r\n    setup : function () {\r\n\r\n      \/\/ use Modernizr's yepnope to load \r\n      \/\/ additional scripts and manage callbacks\r\n      Modernizr.load([ \r\n        {\r\n          load: \"js\/jquery.toc.js\",\r\n          callback : function() {\r\n            \/\/ code to generate \"Jump To\" list\r\n            \/\/ and append to body\r\n          }\r\n        },  \r\n\r\n        \/\/ load in the bootstrap plugins.\r\n        \/\/ they hook themselves up via their data-API\r\n        \"js\/vendor\/bootstrap-scrollspy.js\",\r\n        \"js\/vendor\/bootstrap-affix.js\"\r\n      ]);\r\n    },\r\n\r\n    match : function() {\r\n      $toc.fadeIn();\r\n    },\r\n\r\n    unmatch : function() {\r\n      $toc.hide();\r\n    }\r\n\r\n  }]).listen();   \r\n\r\n});<\/code><\/pre>\n<p>Two new options have been introduced here &#8211; <code>setup<\/code> and <code>deferSetup<\/code>. <code>setup<\/code> is a function that gets called just once, which is great for getting all your expensive DOM manipulation out of the way up-front. By default, <code>setup<\/code> is invoked <em>as soon as you register your query handler<\/em>, regardless of whether the query has matched yet. However, if you supply the <code>deferSetup<\/code> flag we can postpone setup until the first time a query is matched.<\/p>\n<p>In this case it obviously makes sense, as scripts only be loaded for large-screened devices. The <code>match<\/code> and <code>unmatch<\/code> function are then left to simply show and hide the &#8220;Jump To&#8221; list.<\/p>\n<h3>Other Examples<\/h3>\n<p>A few more scenarios which enquire would handle effortlessly:<\/p>\n<ul>\n<li>Responsive images\n<ul>\n<li>Use <code>data-*<\/code> attributes and switch an image&#8217;s <code>src<\/code> depending on which media query matches<\/li>\n<\/ul>\n<\/li>\n<li>Shuffle content around\n<ul>\n<li>Sometimes it&#8217;s not as easy as just stacking items on small screens, you may want content to appear in a completely different order.<\/li>\n<li>Again, I&#8217;d recommend a declarative approach with <code>data-*<\/code> attributes so you can pick out source elements and destination elements. <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>There&#8217;s More&#8230;<\/h3>\n<p>Enquire.js still has more to offer! You can register multiple handlers per query, and also multiple queries, meaning you&#8217;ve got ultimate flexibility! To read more about this, please visit the <a href=\"http:\/\/wickynilliams.github.com\/enquire.js\/\" rel=\"noopener\">enquire.js project page<\/a>.<\/p>\n<h3>Download, Fork and Contribute!<\/h3>\n<p>For downloads and source code, visit the project on <a href=\"https:\/\/github.com\/WickyNilliams\/enquire.js\" rel=\"noopener\">github<\/a>. If you wish to contribute, please do so, I&#8217;d love other people&#8217;s opinions, thoughts and ideas. Fork to your heart&#8217;s content and make a pull request with any changes. If you encounter any issues, feel free to create an <a href=\"https:\/\/github.com\/WickyNilliams\/enquire.js\/issues\" rel=\"noopener\">issue on github<\/a> and I will duly fix the problem :)<\/p>\n<h3>Licence<\/h3>\n<p>The project is licenced under the MIT licence, so you&#8217;re free to use it in any way you wish.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A guest post by Nick Williams. Nick walks us through his new mini JavaScript library for providing callbacks when specified media queries match (or don&#8217;t!).<\/p>\n","protected":false},"author":248432,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17961"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17961"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17961\/revisions"}],"predecessor-version":[{"id":253702,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17961\/revisions\/253702"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}