## Properties

Name | Description
--- | ---
browser | Returns information about the Browser.

Returns an object with the following fields:

- name - Browser Name. Possible values: "Internet Explorer", "Webkit", "Chrome", "Safari", "Opera", "Opera Mobile", "Dolphin", "Chrome Mobile", "webOSBrowser", "Silk", "Firefox".
- accessName - "msie", "webkit", "chrome", "safari", "opera", "operamobile", "dolphin", "chromemobile", "webosbrowser", "silk", "firefox".
- version - Browser Version.
- canvas - Boolean field which determines whether Canvas is supported.
- svg - Boolean field which determines whether SVG is supported.
- vml - Boolean field which determines whether VML is supported.

#### Code example

Get the `browser` property.

    var response = new $.jqx.response();
    var browser = response.browser;
    // gets the current browser's name.
    var name = browser.name;
    // gets the current browser's version.
    var version = browser.version;

Run code only for a specific browser

    var response = new $.jqx.response();
    var browser = response.browser;
    if (browser.msie)
    {
        // add code specific for Internet Explorer.
        if (browser.version == 7)
        {
            // add code specific for Internet Explorer 7
        }
    }
    else if (browser.firefox)
    {
        // add code specific for Firefox
    }

Try it: browser is set to a custom function

device | Returns information about the Device.

Returns an object with the following fields:

- type - Device Type. Possible values: "Desktop", "Tablet", "Phone".
- touch - Boolean field which determines whether the device is touch enabled.
- width - screen width.
- height - screen height.
- availWidth - screen's usable width.
- availHeight - screen's usable height i.e minus UI headers and/or footers.

*Device size is static and does not change when the page is resized or rotated.

#### Code example

Get the `device` property.

    var response = new $.jqx.response();
    var device = response.device;
    var type = device.type;
    var isTouchDevice = device.touch;
    var screenWidth = device.width;
    var screenHeight = device.height;

Try it: device is set to a custom function

document | Returns information about the document.

Returns an object with the following fields:

- width - document's width.
- height - document's height.

*document's size changes when the page is resized.

#### Code example

Get the `document` property.

    var response = new $.jqx.response();
    var document = response.document;
    var width = document.width;
    var height = document.height;

Try it: document is set to a custom function

destroy | Destroys the plug-in.

#### Code example

    var response = new $.jqx.response();
    response.destroy();

Try it: destroy is set to a custom function

resize | Callback function or functions called when the browser's window is resized.

#### Code example

    var response = new $.jqx.response();
    response.resize(function (event) {
        // your code here.
    });

#### Code example with multiple callbacks

    var response = new $.jqx.response();

    var resizeFunction1 = function () {
        console.log("resizeFunction1 is called");
    }
    var resizeFunction2 = function () {
        console.log("resizeFunction2 is called");
    }

    response.resize([resizeFunction1, resizeFunction2]);

Try it: resize is set to a custom function

isHidden | Checks whether a HTML Element is hidden.

The function accepts HTML Element as parameter and returns true, if the element is hidden or false if not.

#### Code example

    var response = new $.jqx.response();
    var hidden = response.isHidden($("#someID")[0]);

Try it: isHidden is set to a custom function

inViewPort | Checks whether a HTML Element is in the view port.

The function accepts HTML Element as parameter and returns true, if the element is in the view port or false if not.

#### Code example

    var response = new $.jqx.response();
    var inViewPort = response.inViewPort($("#someID")[0]);

Try it: inViewPort is set to a custom function

os | Returns information about the OS.

Returns an object with the following fields:

- name - OS Name. Possible values: "iOS", "Android", "webOS", "BlackBerry", "RIMTablet", "MacOS", "Windows", "Linux", "Bada".
- version - OS Version.
- platform - OS Platform.

#### Code example

Get the `os` property.

    var response = new $.jqx.response();
    var os = response.os;

Try it: os is set to a custom function

pointerDown | Event handler for mouse and touch events that works across browsers. "pointerDown" automatically handles the "mousedown", "MSPointerDown" and "touchstart" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type).

The function has 2 parameters:

- HTML Element - the element that will receive events.
- Callback function that is called when the mouse pointer is over the element and the mouse button is pressed or a contact touches the screen on element.
  - event - the original Event object.
  - position - object with the following fields:
    - left - X position relative to the top-left edge of the document.
    - top - Y position relative to the top-left edge of the document.
  - pointerType - the pointer's type - "touch" or "mouse".

#### Code example

    var response = new $.jqx.response();
    response.pointerDown($(document), function (event, position, pointerType) {

    });

Try it: pointerDown is set to a custom function

pointerMove | Event handler for mouse and touch events that works across browsers. "pointerMove" automatically handles the "mousemove", "MSPointerMove" and "touchmove" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type).

The function has 2 parameters:

- HTML Element - the element that will receive events.
- Callback function that is called when the mouse pointer is over the element and is moved or a contact moves on the screen while over an element.
  - event - the original Event object.
  - position - object with the following fields:
    - left - X position relative to the top-left edge of the document.
    - top - Y position relative to the top-left edge of the document.
  - pointerType - the pointer's type - "touch" or "mouse".

#### Code example

    var response = new $.jqx.response();
    response.pointerMove($(document), function (event, position, pointerType) {

    });

Try it: pointerMove is set to a custom function

pointerUp | Event handler for mouse and touch events that works across browsers. "pointerUp" automatically handles the "mouseup", "MSPointerUp" and "touchend" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type).

The function has 2 parameters:

- HTML Element - the element that will receive events.
- Callback function that is called when the mouse pointer is over the element and the mouse button is released or a contact is raised off of the screen over an element.
  - event - the original Event object.
  - position - object with the following fields:
    - left - X position relative to the top-left edge of the document.
    - top - Y position relative to the top-left edge of the document.
  - pointerType - the pointer's type - "touch" or "mouse".

#### Code example

    var response = new $.jqx.response();
    response.pointerUp($(document), function (event, position, pointerType) {

    });

Try it: pointerUp is set to a custom function

refresh | Refreshes the plug-in properties.

#### Code example

    var response = new $.jqx.response();
    response.refresh();

Try it: refresh is set to a custom function

responsive | Responsive Grid System.

The method argument is an object with the following fields:

- `container` - "#id", ".className" or jQuery Selector. Defines the Container element of the Grid layout.
- `colWidths` - Array which defines the column widths as a proportion of the container's width.
- `colOffsets` - Array which defines the column left offsets as a proportion of the container's width.
- `colClass` - String which defines the CSS class which is added to each column.
- `deviceTypes` - String which defines for which device types the breakpoints of the Grid layout will be taken into account. Possible values are: "Desktop", "Tablet" and "Phone". For example if the property is set to "Tablet, Phone", the breakpoints will hit only for these device types.
- `margin` - Object with `left`, `top`, `right`, `bottom` members which define the margin of each cell in the Grid layout.
- `padding` - Object with `left`, `top`, `right`, `bottom` members which define the padding of each cell in the Grid layout.
- `breakpoints` - Array of Objects. Each object in the array defines a breakpoint. The breakpoint has `width` property which defines the width under which the breakpoint's `colWidths`, `colOffsets`, `colClass`, `margin` and `padding` properties will be taken into account.

Try it: responsive grid system is created

scroll | Returns information about the Scrollbars position.

Returns an object with the following fields:

- left - horizontal scrollbar's position.
- top - vertical scrollbar's position.

#### Code example

Get the `scroll` property.

    var response = new $.jqx.response();
    var scroll = response.scroll;
    var left = scroll.left;
    var top = scroll.top;

Try it: scroll is set to a custom function

viewPort | Returns information about the view port.

Returns an object with the following fields:

- width - view port's width.
- height - view port's height.

*viewPort's size changes when the page is resized.

#### Code example

Get the `viewPort` property.

    var response = new $.jqx.response();
    var viewPort = response.viewPort;
    var width = viewPort.width;
    var height = viewPort.height;

Try it: viewPort is set to a custom function