jComponent / Helpers / Responsive UI
Updated: 02. October 2017
Author: Peter Širka

Responsive UI

Professional Support Chat with contributors

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

Method: MEDIAQUERY()

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 }
};