Responsive UI

jComponent offers great features for creating Responsive UI directly in JavaScript.

Supports these commands:

• min-width
• max-width
• min-device-width
• max-device-width
• width
• min-height
• max-height
• min-device-height
• max-device-height
• height
• orientation: landscape
• orientation: portrait

Responsive methods

• MEDIAQUERY(query, [element], callback)
• WIDTH([element])

Method: MEDIAQUERY()

REMOVED in v17 This method registers a listener for specific size of the browser window or element.

MEDIAQUERY(query, [element], callback(w, h, type, id));
// @query {String} media CSS query string
// @element {jQuery Element} optional, needs to be jQuery element (default: "window")
// @callback {Function(w, h, type, id)} callback
// returns {Number} an idetificator of MediaQuery

// For the whole window
MEDIAQUERY('(min-width: 500px) and (max-width: 1024px) and (orientation: landscape)', function(w, h, type, id) {
    
    // w {Number} "window" width
    // h {Number} "window" height
    // type {String} display type, can be "xs", "sm", "md" or "lg"
    // id {Number} identificator of MediaQuery
    
    // This method will be executed if the MediaQuery condition will be valid for "window".
    
});

// For an element:
MEDIAQUERY('(min-width: 200px) and (max-width: 600px)', $('#panel'), function(w, h, type, id) {
    
    // w {Number} "element" width
    // h {Number} "element" height
    // type {String} display type, can be "xs", "sm", "md" or "lg"
    // id {Number} identificator of MediaQuery
    
    // This method will be executed if the MediaQuery condition will be valid for this element.
    
});

How to remove listener?

Just execute MEDIAQUERY(id) method with id of MediaQuery and with no adiditional arguments.

var id = MEDIAQUERY('min-width: 500px', function() {
    // listener
});

// Remove listener:
MEDIAQUERY(id);

Method: WIDTH()

This method returns a current display size of the element. Display size can be:

• xs extra small display (mobile device)
• sm small display (tablet)
• md medium display (small laptop)
• lg large display (desktop computer, laptop)

WIDTH([element]);
// @element {jQuery Element} optional, default "window"
// returns {String}

console.log(WIDTH());
// Output: lg

Good to know

You can specify your own display sizes in MAIN.defaults.devices, default values in pixels:

MAIN.defaults.devices = {
    xs: { max: 768 },
    sm: { min: 768, max: 992 },
    md: { min: 992, max: 1200 },
    lg: { min: 1200 }
};