jqxResponse

jqxResponse is a plug-in which provides information about the OS, Browser, View Port, Device Type and common features of the Device like Touch Support, Size, SVG, Canvas and VML support, etc. jqxResponse also enables you to listen for Window(ViewPort) resizes and provides cross-browser compatible triggering for Mouse and Touch events.

The jqxResponse plugin requires the following files:
Create a new instance:

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

Example

Please, find below information about your OS, Device, Browser and ViewPort:

Show Code 
var response = new $.jqx.response();
var displayInformation = function () {
	var os = response.os;
	var browser = response.browser;
	var device = response.device;
	var viewPort = response.viewPort;
	var documentInfo = response.document;
	$("#os").html("OS: " + os.name + " " + os.version);
	$("#osPlatform").html("Platform: " + os.platform);
	$("#browser").html("Browser: " + browser.name + " " + browser.version + ", Access name: " + browser.accessName);
	$("#device").html("Device Type: " + device.type);
	$("#deviceSize").html("Device Width: " + device.width + ", Height: " + device.height);
	$("#deviceAvailSize").html("Device AvailWidth: " + device.availWidth + ", AvailHeight: " + device.availHeight);
	$("#deviceSupport").html("Supports Touch Events:" + device.touch + ", VML:" + browser.vml + ", SVG: " + browser.svg + ", Canvas:" + browser.canvas);
	$("#viewPort").html("Viewport Width: " + viewPort.width + ", Height: " + viewPort.height);
	$("#documentInfo").html("Document Width: " + documentInfo.width + ", Height: " + documentInfo.height);
}
displayInformation();
// handles resize.
var resizeFunction1 = function () {
	console.log("resizeFunction1 is called");
}
var resizeFunction2 = function () {
	console.log("resizeFunction2 is called");
}
response.resize([resizeFunction1, resizeFunction2]);
response.pointerDown($(document), function (event, position) {
	// event is a "touchstart" or "mousedown" event object depending on whether the device is touch-enabled.
	$("#pointerInfoDown").html("Pointer Down: " + position.left + ", " + position.top);
});
response.pointerUp($(document), function (event, position) {
	// event is a "touchend" or "mouseup" event object depending on whether the device is touch-enabled.
	$("#pointerInfoUp").html("Pointer Up: " + position.left + ", " + position.top);
});
response.pointerMove($(document), function (event, position) {
	// event is a "mousemove" or "touchmove" event object depending on whether the device is touch-enabled.
	$("#pointerInfoMove").html("Pointer Move: " + position.left + ", " + position.top);
	if (device.touch) {
		// stops the default action of the event. 
		event.preventDefault();
	}
});


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 
}
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;
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;
destroy Destroys the plug-in.

Code example

var response = new $.jqx.response();
response.destroy();
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]);
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]);
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]);
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;
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) {
 
});
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) {
 
});
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) {
 
});
refresh Refreshes the plug-in properties.

Code example

var response = new $.jqx.response();
response.refresh();
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.
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;
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;

AltStyle によって変換されたページ (->オリジナル) /