Media Query Manager

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.

Loading Files

The MQM can load .css and .js files.

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],
    ]
        

Array Options:

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.

To load .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.

Loading Events

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 Array Options

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.

Binding and Unbinding Events programmatically

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'); 
        

Break Points

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]
        

Demo

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']
    ]
        

and

    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.

Element 1
Element 2

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.

Download demo

Back to top

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 Wyke-Smith

charles at stylinwithcss dot com