Jx is a global singleton object that contains the entire Jx library within it. All Jx functions, attributes and classes are accessed through the global Jx object. Jx should not create any other global variables, if you discover that it does then please report it as a bug
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
| Jx | Jx is a global singleton object that contains the entire Jx library within it. |
| Properties | |
| {String} baseURL | This is the URL that Jx was loaded from, it is automatically calculated from the script tag src property that included Jx. |
| Functions | |
| applyPNGFilter | Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s. |
| addToImgQueue | Request that an image be set to a DOM IMG element src attribute. |
| checkImgQueue | An internal method that ensures no more than 2 images are loading at a time. |
| loadNextImg | An internal method actually populate the DOM element with the image source. |
| createIframeShim | Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them. |
| getNumber | safely parse a number and return its integer value. |
| getPageDimensions | return the dimensions of the browser client area. |
| Element | Element is a global object provided by the mootools library. |
| Functions | |
| getContentBoxSize | return the size of the content area of an element. |
| getBorderBoxSize | return the size of the border area of an element. |
| getMarginBoxSize | return the size of the margin area of an element. |
| setContentBoxSize | set either or both of the width and height of an element to the provided size. |
| setBorderBoxSize | set either or both of the width and height of an element to the provided size. |
| getPaddingSize | returns the padding for each edge of an element |
| getBorderSize | returns the border size for each edge of an element |
| descendantOf | determines if the element is a descendent of the reference node. |
| findElement | search the parentage of the element to find an element of the given tag name. |
| Jx. | ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways: |
| Options | |
| content | content may be an HTML element reference, the id of an HTML element already in the DOM, or an HTML string that becomes the inner HTML of the element. |
| contentURL | the URL to load content from |
| Properties | |
| contentIsLoaded | tracks the load state of the content, specifically useful in the case of remote content. |
| Functions | |
| loadContent | triggers loading of content based on options set for the current object. |
| checkRequest() | Is fired after a delay to check the request to make sure it’s not failing in AIR. |
| Jx. | Mix-in class that provides a method for positioning elements relative to other elements. |
| Functions | |
| position | positions an element relative to another element based on the provided options. |
| Jx. | A mix-in class that provides chrome helper functions. |
| Properties | |
| chrome | the DOM element that contains the chrome |
| Functions | |
| makeChrome | create chrome on an element. |
| showChrome | show the chrome on an element. |
| hideChrome | removes the chrome from the DOM. |
| Jx. | A mix-in class that provides a helper function that allows an object to be added to an existing element on the page. |
| Functions | |
| addTo | adds the object to the DOM relative to another element. |
This is the URL that Jx was loaded from, it is automatically calculated from the script tag src property that included Jx.
Note that this assumes that you are loading Jx from a js/ or lib/ folder in parallel to the images/ folder that contains the various images needed by Jx components. If you have a different folder structure, you can define Jx’s base by including the following before including the jxlib javascript file:
Jx = {
baseURL: 'some/path'
}
Jx.applyPNGFilter = function( o )
Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s. Used automatically for img tags with a class of png24.
The filter is applied using a nifty feature of IE that allows javascript to be executed as part of a CSS style rule - this ensures that the hack only gets applied on IE browsers.
The CSS that triggers this hack is only in the ie6.css files of the various themes.
object {Object} the object (img) to which the filter needs to be applied.
Jx.addToImgQueue = function( obj )
Request that an image be set to a DOM IMG element src attribute. This puts the image into a queue and there are private methods to manage that queue and limit image loading to 2 at a time.
| obj | {Object} an object containing an element and src property, where element is the element to update and src is the url to the image. |
Jx.createIframeShim = function()
Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them.
an HTML iframe element that can be inserted into the DOM.
Element is a global object provided by the mootools library. The functions documented here are extensions to the Element object provided by Jx to make cross-browser compatibility easier to achieve. Most of the methods are measurement related.
While the code in these methods has been converted to use MooTools methods, there may be better MooTools methods to use to accomplish these things. Ultimately, it would be nice to eliminate most or all of these and find the MooTools equivalent or convince MooTools to add them.
| Functions | |
| getContentBoxSize | return the size of the content area of an element. |
| getBorderBoxSize | return the size of the border area of an element. |
| getMarginBoxSize | return the size of the margin area of an element. |
| setContentBoxSize | set either or both of the width and height of an element to the provided size. |
| setBorderBoxSize | set either or both of the width and height of an element to the provided size. |
| getPaddingSize | returns the padding for each edge of an element |
| getBorderSize | returns the border size for each edge of an element |
| descendantOf | determines if the element is a descendent of the reference node. |
| findElement | search the parentage of the element to find an element of the given tag name. |
getContentBoxSize : function()
return the size of the content area of an element. This is the size of the element less margins, padding, and borders.
| elem | {Object} the element to get the content size of. |
{Object} an object with two properties, width and height, that are the size of the content area of the measured element.
getBorderBoxSize: function()
return the size of the border area of an element. This is the size of the element less margins.
| elem | {Object} the element to get the border sizing of. |
{Object} an object with two properties, width and height, that are the size of the border area of the measured element.
getMarginBoxSize: function()
return the size of the margin area of an element. This is the size of the element plus margins.
| elem | {Object} the element to get the margin sizing of. |
{Object} an object with two properties, width and height, that are the size of the margin area of the measured element.
setContentBoxSize : function( size )
set either or both of the width and height of an element to the provided size. This function ensures that the content area of the element is the requested size and the resulting size of the element may be larger depending on padding and borders.
| elem | {Object} the element to set the content area of. |
| size | {Object} an object with a width and/or height property that is the size to set the content area of the element to. |
setBorderBoxSize : function( size )
set either or both of the width and height of an element to the provided size. This function ensures that the border size of the element is the requested size and the resulting content areaof the element may be larger depending on padding and borders.
| elem | {Object} the element to set the border size of. |
| size | {Object} an object with a width and/or height property that is the size to set the content area of the element to. |
findElement: function( type )
search the parentage of the element to find an element of the given tag name.
| type | {String} the tag name of the element type to search for |
{HTMLElement} the first node (this one or first parent) with the requested tag name or false if none are found.
ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways:
Use the Implements syntax in your Class to add Jx.ContentLoader to your class.
| Options | |
| content | content may be an HTML element reference, the id of an HTML element already in the DOM, or an HTML string that becomes the inner HTML of the element. |
| contentURL | the URL to load content from |
| Properties | |
| contentIsLoaded | tracks the load state of the content, specifically useful in the case of remote content. |
| Functions | |
| loadContent | triggers loading of content based on options set for the current object. |
| checkRequest() | Is fired after a delay to check the request to make sure it’s not failing in AIR. |
loadContent: function( element )
triggers loading of content based on options set for the current object.
| element | {Object} the element to insert the content into |
ContentLoader adds the following events to an object. You can register for these events using the addEvent method or by providing callback functions via the on{EventName} properties in the options object
| contentLoaded | called when the content has been loaded. If the content is not asynchronous then this is called before loadContent returns. |
| contentLoadFailed | called if the content fails to load, primarily useful when using the contentURL method of loading content. |
position: function( element, relative, options )
positions an element relative to another element based on the provided options. Positioning rules are a string with two space-separated values. The first value references the parent element and the second value references the thing being positioned. In general, multiple rules can be considered by passing an array of rules to the horizontal and vertical options. The position method will attempt to position the element in relation to the relative element using the rules specified in the options. If the element does not fit in the viewport using the rule, then the next rule is attempted. If all rules fail, the last rule is used and element may extend outside the viewport. Horizontal and vertical rules are processed independently.
Horizontal values are ‘left’, ‘center’, ‘right’, and numeric values. Some common rules are:
Vertical values are ‘top’, ‘center’, ‘bottom’, and numeric values. Some common rules are:
| element | the element to position |
| relative | the element to position relative to |
| options | the positioning options, see list below. |
| horizontal | the horizontal positioning rule to use to position the element. Valid values are ‘left’, ‘center’, ‘right’, and a numeric value. The default value is ‘center center’. |
| vertical | the vertical positioning rule to use to position the element. Valid values are ‘top’, ‘center’, ‘bottom’, and a numeric value. The default value is ‘center center’. |
| offsets | an object containing numeric pixel offset values for the object being positioned as top, right, bottom and left properties. |
A mix-in class that provides chrome helper functions. Chrome is the extraneous visual element that provides the look and feel to some elements i.e. dialogs. Chrome is added inside the element specified but may bleed outside the element to provide drop shadows etc. This is done by absolutely positioning the chrome objects in the container based on calculations using the margins, borders, and padding of the jxChrome class and the element it is added to.
Chrome can consist of either pure CSS border and background colors, or a background-image on the jxChrome class. Using a background-image on the jxChrome class creates four images inside the chrome container that are positioned in the top-left, top-right, bottom-left and bottom-right corners of the chrome container and are sized to fill 50% of the width and height. The images are positioned and clipped such that the appropriate corners of the chrome image are displayed in those locations.
| Properties | |
| chrome | the DOM element that contains the chrome |
| Functions | |
| makeChrome | create chrome on an element. |
| showChrome | show the chrome on an element. |
| hideChrome | removes the chrome from the DOM. |
showChrome: function( element )
show the chrome on an element. This creates the chrome if necessary. If the chrome has been previously created and not removed, you can call this without an element and it will just resize the chrome within its existing element. You can also pass in a different element from which the chrome was previously attached to and it will move the chrome to the new element.
| element | {HTMLElement} the element to show the chrome on. |
addTo: function( reference, where )
adds the object to the DOM relative to another element. If you use ‘top’ or ‘bottom’ then the element is added to the relative element (becomes a child node). If you use ‘before’ or ‘after’ then the element is inserted adjacent to the reference node.
| reference | {Object} the DOM element or id of a DOM element to append the object relative to |
| where | {String} where to append the element in relation to the reference node. Can be ‘top’, ‘bottom’, ‘before’ or ‘after’. The default is ‘bottom’. |
the object itself, which is useful for chaining calls together
Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s.
Jx.applyPNGFilter = function( o )
Request that an image be set to a DOM IMG element src attribute.
Jx.addToImgQueue = function( obj )
An internal method that ensures no more than 2 images are loading at a time.
Jx.checkImgQueue = function()
An internal method actually populate the DOM element with the image source.
Jx.loadNextImg = function()
Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them.
Jx.createIframeShim = function()
safely parse a number and return its integer value.
Jx.getNumber = function( n, def )
return the dimensions of the browser client area.
Jx.getPageDimensions = function()
return the size of the content area of an element.
getContentBoxSize : function()
return the size of the border area of an element.
getBorderBoxSize: function()
return the size of the margin area of an element.
getMarginBoxSize: function()
set either or both of the width and height of an element to the provided size.
setContentBoxSize : function( size )
set either or both of the width and height of an element to the provided size.
setBorderBoxSize : function( size )
returns the padding for each edge of an element
getPaddingSize : function ()
returns the border size for each edge of an element
getBorderSize : function()
determines if the element is a descendent of the reference node.
descendantOf: function( node )
search the parentage of the element to find an element of the given tag name.
findElement: function( type )
triggers loading of content based on options set for the current object.
loadContent: function( element )
Is fired after a delay to check the request to make sure it’s not failing in AIR.
checkRequest: function()
positions an element relative to another element based on the provided options.
position: function( element, relative, options )
create chrome on an element.
makeChrome: function( element )
show the chrome on an element.
showChrome: function( element )
removes the chrome from the DOM.
hideChrome: function()
adds the object to the DOM relative to another element.
addTo: function( reference, where )