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 
}

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; 

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;

Code example

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

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]);

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]);

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]);

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;

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

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

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

Code example

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

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.

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;

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;