# Responsive UI

[![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com)

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)`](#method-mediaquery-)
- [`WIDTH([element])`](#method-width-)

### Method: `MEDIAQUERY()`

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

```javascript
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.

```javascript
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)

```javascript
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:

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