Documentation

• 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

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 
}

• 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.

Code example

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; 

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

Code example

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

Code example

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

Code example

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

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

Code example

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

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

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

• 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();

• 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.

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

Code example

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

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

Code example

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