## 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