The Media Query Manager (MQM) script loads and unloads CSS and JS files, and adds and removes events from elements, based on the width of the device screen. If you are building a Web app that has to display on a wide range of screen widths, you may find this a useful tool.
See the Demo at the bottom of the page
The MQM script extends Nick William’s enquire.js script. Enquire sends triggers to the MQM based on screen width. It does this when the page first loads and when the screen width crosses certain break points (which are same as Bootstrap’s grid system break points by default). jQuery is also a dependency.
In the file (
mq_manager_arrays_n_functions.js in the demo files), the developer can add arrays to determine the screen width range across which a file is loaded or an event is bound to an element. When MQM receives a trigger from Enquire, it loads and unloads files, and binds and unbinds events, according to the array definitions.
The MQM can load
Files and their active ranges are defined in the
files.fileArray array, like this.
fileArray : [ ['allBrowsers.js], ['allBrowsers.css'], ['wide.js', 768], ['wide.css', 768], ['narrow.js', 360, 768], ['narrow.css', 360, 768], ]
File arrays can have one, two or three values, as shown in the examples above. These values set the file name and the screen widths break points between which the file loads. There are three variants on the array structure.
[fileName] // file is loaded at all screen widths [fileName, minScreenWidth] // file loads above minScreenWidth [fileName, minScreenWidth, maxScreenWidth] // file loads if screen width between min and max values
Note that there is a required comma after each array except the last.
A file is automatically removed if the browser width changes to a width outside of the files specified range.
.css files, the MQM generates
link tags and appends them as the last elements inside the
head tag, in the order specified in the array. When loading
.js files, the MQM generates
script tags and appends them as the last elements inside the body tag, in the order specified in the array.
The MQM enables you to bind and unbind events in similar way.
Events and their active ranges are defined in the
events.eventsArray array, as this example shows.
eventArray : [ ['.directions', 'click', 'showDirections', 786, 1200] ]
The arguments are the class of the element
.directions, the event type
click , and the function name (without parenthesis)
showDirections. In this example, the event wil be bound to the element if the device width is above 768 pixels and equal to or below 1200 pixels.
Event arrays can have three, four or five elements. These elements are the a class name, an event name and a function name, and optionally the range of screen widths over which the file loads.
[elementClass, eventType, function] // event remains bound at all screen widths [elementClass, eventType, function, minScreenWidth], // event only binds above minScreenWidth [elementClass, eventType, function, minScreenWidth, maxScreenWidth] // event binds between these screen widths
An event is automatically unbound if the browser width changes to be out of its stated width range.
Note that the script selectively unbinds events and will leave any other events bound to the element, even those with the same event name, untouched.
Note also that functions called by events that are added with MQM must be inside the
events object in
mq_manager_arrays_n_functions.js. This may change in a later version.
Sometimes you want bind or unbind an event programmatically based on some system or user event. You can do this by calling
eventManager.unbindMqEvent, as in these examples.
eventManager.bindEvent('.active', 'click', 'functionName');
eventManager.unbindEvent('.active', 'click', 'functionName');
The values for the screen width break points over which the file or event can be active is specified by the break points array. You can find the break points array in the
mq_manager object and modify it if you wish. Currently, the break points match the Bootstrap break points and cannot be changed - they wil be modifiable in a future release.
mqBreakPoints : [0,360,480,768,992,1200,50000]
This simple example manages two CSS style sheets and three events. The arrays look like this:
fileArray : [ ['demo_file1.css', '768','1200'], ['demo_file2.css', '480','992'] ]
eventArray : [ ['.element1', 'click', 'alertMe1', 480, 992], ['.element1', 'click', 'alertMe2', 1200], ['.element2', 'click', 'alertMe3'], ['.element2', 'click', 'alertMe4', 786, 1200] ]
Click on links Event 1 and Event 2 to call bound functions. They will only be bound, of course, if your screen width is in the stated ranges. Use the buttons to add and remove events programmatically.
The CSS files load and unload as the screen width is adjusted and the JS events to be added and removed, per the array definitions. Adjust the screen width to observe resultant changes in the stylings and the button behaviors.
When loaded, the CSS file
css_demo1 adds a gray background, and the CSS file
demo_file2 adds a blue border.
When the events are loaded, the buttons open alert dialogs.
Between 786 and 992 pixels width, two events are bound to the Event 1 button, and the second one can be selectively removed by selecting Unbind Alert 2.
License: Free for use for personal projects, in non-SaaS products, and in products where the end user does not pay. Contact me for commercial applications.
charles at stylinwithcss dot com