X Library Function Reference

Notes

Almost complete for X version 3.15.2  ;-)

Beginning with v3.15, the main library files do not provide support for NN4. If you need NN4 support, use 'x_core_nn4.js' and 'x_event_nn4.js' instead of 'x_core.js' and 'x_event.js'.

Parameter Syntax

Parameters in square brackets are optional. Parameter names use the following data type prefixes.

b - boolean
i - signed integer
u - unsigned integer
f - floating point (real)
s - string
fn - function reference
o - object reference

The first parameter to most functions is an exception to the above. The ele argument can be an id string or an object reference (window, document, or Element).

Global Variables

xVersion - X version string

As much as possible, object-detection is used instead of browser-detection. The following variables are used. They are created when you include 'xlib.js'.

xUA - lowercase user-agent string
xIE4Up - true if browser is IE 4 or greater
xIE4 - true if browser is IE 4.x
xIE5 - true if browser is IE 5.x
xNN4 - true if browser is Netscape Navigator 4.x
xOp5or6 - true if browser is Opera 5.x or 6.x
xOp7 - true if browser is Opera 7.x

For some browsers, the window resize and scroll events are simulated. Some of the following variables may be used.

xPCW - previous clientWidth
xPCH - previous clientHeight
xREL - resize event listener
xPSL - previous scrollLeft
xPST - previous scrollTop
xSEL - scroll event listener

FUNCTIONS

xShow(ele)

Set the element's visibility to 'visible' ('show' for NN4).
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xHide(ele)

Set the element's visibility to 'hidden' ('hide' for NN4).
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xZIndex(ele[,uZ])

Return and optionally set the element's z-index.
Parameters:
ele - id string or object reference
uZ - unsigned integer z-index
Uses: xGetElementById(), xDef(), xNum()
File: x_core.js
Demo:

xColor(ele[,sColor])

Return and optionally set the element's text color.
Parameters:
ele - id string or object reference
sColor - color string
Uses: xGetElementById(), xDef(), xStr()
File: x_core.js
Demo:

xBackground(ele[,sBgColor[,sBgImage]])

Return and optionally set the element's background color and image.
Parameters:
ele - id string or object reference
sBgColor - background color string
sBgImage - background image URL string
Uses: xGetElementById(), xDef(), xStr(), xOp5or6
File: x_core.js
Demo:

xMoveTo(ele,iX,iY)

Set the element's x and y coordinates.
Parameters:
ele - id string or object reference
iX - integer x coordinate
iY - integer y coordinate
Uses: xLeft(), xTop()
File: x_core.js
Demo:

xLeft(ele[,iX])

Return and optionally set the element's x coordinate.
Parameters:
ele - id string or object reference
iX - integer x coordinate
Uses: xGetElementById(), xDef(), xStr(), xNum()
File: x_core.js
Demo:

xTop(ele[,iY])

Return and optionally set the element's y coordinate.
Parameters:
ele - id string or object reference
iY - integer y coordinate
Uses: xGetElementById(), xDef(), xStr(), xNum()
File: x_core.js
Demo:

xPageX(ele)

Return the element's absolute x coordinate.
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xPageY(ele)

Return the element's absolute y coordinate.
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xOffsetLeft(ele)

Return the element's X offset within its parent element.
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xOffsetTop(ele)

Return the element's Y offset within its parent element.
Parameters:
ele - id string or object reference
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xScrollLeft(ele)

Return the number of pixels the element (or window) has scrolled horizontally.
Parameters:
ele - id string or object reference. If undefined return document scrollLeft.
Uses: xGetElementById(), xDef(), xNum()
File: x_core.js
Demo:

xScrollTop(ele)

Return the number of pixels the element (or window) has scrolled vertically.
Parameters:
ele - id string or object reference. If undefined return document scrollTop.
Uses: xGetElementById(), xDef(), xNum()
File: x_core.js
Demo:

xSlideTo(ele,iX,iY,iTime)

Animated, linear motion with sinusoidal rate. Slide the element to the target position in the given time.
Parameters:
ele - id string or object reference
iX - integer x target
iY - integer y target
iTime - total time of slide in ms
Uses: xGetElementById(), xMoveTo()
File: x_slide.js
Demo:

xResizeTo(ele,uW,uH)

Set the element's width and height.
Parameters:
ele - id string or object reference
uW - unsigned integer width
uH - unsigned integer height
Uses: xWidth(), xHeight()
File: x_core.js
Demo:

xWidth(ele[,uW])

Return and optionally set the element's width.
Parameters:
ele - id string or object reference
uW - unsigned integer width; it is rounded to an integer
Uses: xGetElementById(), xDef(), xNum(), xStr()
File: x_core.js
Demo:

xHeight(ele[,uH])

Return and optionally set the element's height.
Parameters:
ele - id string or object reference
uH - unsigned integer height; it is rounded to an integer
Uses: xGetElementById(), xDef(), xNum(), xStr()
File: x_core.js
Demo:

xClip(ele[,iTop,iRight,iBottom,iLeft])

Set the element's clipping rectangle. If ele is the only argument then set clip to existing width and height. Return void.
Parameters:
ele - id string or object reference
iTop - integer y coordinate of top-left corner
iRight - integer x coordinate of right-bottom corner
iBottom - integer y coordinate of right-bottom corner
iLeft - integer x coordinate of top-left corner
Uses: xGetElementById(), xNum(), nn4:xWidth(), nn4:xHeight()
File: x_core.js
Demo:

xAddEventListener(ele,sEventType,fnEventListener,bCapture)

Register an event listener on the element. For some browsers the window.onscroll and window.onresize events are simulated.
Parameters:
ele - id string or object reference
sEventType - string event type (mousemove, click, resize, etc.)
fnEventListener - reference to the listener function
bCapture - boolean capture event flag
Uses: xGetElementById()
File: x_event.js
Demo:

xRemoveEventListener(ele,sEventType,fnEventListener,bCapture)

Unregister an event listener on the element.
Parameters:
ele - id string or object reference
sEventType - string event type ('mousemove', 'click', 'resize', etc.)
fnEventListener - reference to the listener function
bCapture - boolean capture event flag
Uses: xGetElementById()
File: x_event.js
Demo:

xEvent(oEvent)

Resolve browser differences for selected event properties and return an object with those properties. This is an object prototype.
Parameters:
oEvent - native event object (null for IE)
The following are the current xEvent properties.
type - string, event type
target - element object, target of event
pageX - absolute X coordinate of mouse
pageY - absolute Y coordinate of mouse
offsetX - target-relative X coordinate of mouse
offsetY - target-relative Y coordinate of mouse
keyCode - unsigned integer
Uses: xDef(), xPageX(), xPageY(), nn4:xLayerFromPoint()
File: x_event.js
Demo:

xClientWidth()

Return the inner width of the window.
Uses: xOp5or6, xDef()
File: x_core.js
Demo:

xClientHeight()

Return the inner height of the window.
Uses: xOp5or6, xDef()
File: x_core.js
Demo:

xGetElementsByAttribute(sTag, sAtt, sRE, fn)

Return an array of all sTag elements whose sAtt attribute matches sRE. sAtt can also be a property name but the property must be of type string.
Parameters:
sTag -
sAtt -
sRE -
fn - callback function, iterates thru the returned list
Uses: none
File: x_dom.js
Demo:

xGetElementsByClassName(sClsName, oParentEle, sTagName, fn)

Returns an array of elements which are descendants of parentEle and have tagName and clsName. If parentEle is null or not present, document will be used. If tagName is null or not present, "*" will be used.
Parameters:
sClsName -
oParentEle -
sTagName -
fn - callback function, iterates thru the returned list
Uses: xGetElementsByTagName
File: x_dom.js

xGetElementsByTagName(sTagName, oParentEle)

Returns an array of elements which are descendants of parentEle and have tagName. If parentEle is null or not present, document will be used. If tagName is null or not present, "*" will be used. This even works with IE4.
Parameters:
sTagName -
oParentEle -
Uses: none
File: x_dom.js

xGetComputedStyle(oEle, sProp)

For sProp use the css property name, not the object property name. For finding width this works in Moz and Op, but in IE this only works if padding and border use pixel units in the CSS.
Parameters:
oEle - element object
sProp - css property name
Uses: none
File: x_dom.js
Demo:

xWalkTree(oNode, fnVisit)

Perform a preorder traversal on the subtree starting at oNode and pass each Element node to fnVisit.
Parameters:
oNode - element object at which to begin traversal
fnVisit - this function will be called for each node and will be passed a reference to that node.
Uses: none
File: x_dom.js
Demo: xWalkTree

xGetElementById(ele)

Return a reference to an Element object or null if ele is invalid.
Parameters:
ele - id string or object reference
Uses: nn4:xLayer()
File: x_core.js
Demo:

xLayer(sId)

Return a reference to a Layer object or null if sId is invalid. This is only for NN4 and is called by xGetElementById().
Parameters:
sId - id string
Uses: none
File: x_core_nn4.js
Demo:

xLayerFromPoint(iX,iY)

Return a reference to the topmost Layer object containing the point or null if no layer contains the point. This is only for NN4 and is called by xEvent().
Parameters:
iX - integer absolute x coordinate
iY - integer absolute y coordinate
Uses: none
File: x_event_nn4.js
Demo:

xParent(ele,bNode)

Return a reference to the element's parent element, or null if not found.
Parameters:
ele - id string or object reference
bNode - pass true if you want parentNode, else you get offsetParent
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:

xDef(ref[,...])

Return true if all arguments are defined.
Uses: none
File: x_core.js
Demo:

xNum(ref)

Return true if typeof(ref) == 'number'.
Uses: none
File: x_core.js
Demo:

xStr(ref)

Return true if typeof(ref) == 'string'.
Uses: none
File: x_core.js
Demo:

xEnableDrag(ele,fnDragStart,fnDrag,fnDragEnd)

Enable dragging for ele.
Parameters:
ele - id string or object reference
fnDragStart - this function will be called on mousedown on ele
fnDrag - this function will be called on each mousemove during dragging
fnDragEnd - this function will be called on mouseup on ele
Uses: xGetElementById(), xAddEventListener(), xRemoveEventListener(), xEvent(), xParent(), xMoveTo()
File: x_drag.js
Demo: Drag1

xImgRollSetup(sPath,sOvrSuffix,sFileExt,sImgEleId[,...])

Image rollover setup. Can not be called before the window onload event. Pass image IDs starting with 4th argument. The only html requirement is for each IMG tag to have an ID. Assumes this image file naming convention:
out img = path + imgEleId + fileExt
over img = path + imgEleId + ovrSuffix + fileExt
Parameters:
sPath - path to image files (requires trailing slash)
sOvrSuffix - see above file name convention
sFileExt - see above file name convention (requires dot)
sImgEleId - pass all img ele IDs starting with the 4th argument
Uses: xGetElementById()
File: x_img.js
Demo:

xName(ref)

Returns a string for displaying. It first tries id, then nodeName, then tagName, else returns ele.
Parameters:
ref - object reference
Uses: none
File: x_debug.js
Demo:

xLoadScript(sUrl)

Load a .js file after the window.onload event.
Parameters:
sUrl - URL to the .js file
Uses: none
File: x_debug.js
Demo:

xInclude(sUrl1[,sUrl2[,...]])

Load .js and/or .css files by document.writing a script or link element into the document. This must be called before the window.onload event. Automatically loads X files with NN4 support if browser is NN4. Returns true if browser has minimal dhtml support, else returns false. Min dhtml support: if (document.getElementById || document.all || document.layers)
Parameters:
sUrl - URL to the .js or .css file
Uses: xNN4
File: xlib.js
Demo: many of the examples use xInclude

xParentChain(ele,sDelim,bNode)

Returns a string for displaying. Iterates up the parent chain of ele.
Parameters:
ele - id string or object reference
sDelim - for example: '\n' or '<br>'
bNode - pass true if you want parentNode, else you get offsetParent
Uses: xGetElementById(), xName(), xParent()
File: x_debug.js
Demo:

xHasPoint(ele,iLeft,iTop,iClpT,iClpR,iClpB,iClpL)

Returns true if iLeft,iTop is contained within the clipped area of ele.
Parameters:
ele - id string or object reference
iLeft -
iTop -
iClpT -
iClpR -
iClpB -
iClpL -
Uses: xNum(), xPageX(), xPageY(), xWidth(), xHeight()
File: x_core.js
Demo:

xWindow(sName, uW, uH, iX, iY, loc, men, res, scr, sta, too)

Create an xWindow object for each child window the page will need. Pass a zero for width, height, left, and top and the window will have default size and position. Pass a zero or one for the boolean parameters (location field, menubar, etc.). For a simpler alternative see xWinOpen() in 'x_alt.js'.
Parameters:
sName - the same name as the 'target' attribute of the A elements
uW -
uH -
iX -
iY -
loc -
men -
res -
scr -
sta -
too -
Uses: none
File: x_win.js
Demo: xWindow

xBar(sDir, sConStyle, sBarStyle)

Parameters:
sDir - direction string, one of: 'ltr', 'rtl', 'ttb', or 'btt'
sConStyle - classname for the bar container
sBarStyle - classname for the bar
Uses: xLeft(), xTop(), xNum(), xResizeTo(), xMoveTo(), xLinearScale()
File: x_bar.js
Demo: xBar

xPopup(sTmrType, uTimeout, sPosition, sStyle, sId, sUrl)

An alternative to popup windows.
Parameters:
sTmrType - 'timeout' or 'interval'
uTimeout - time in ms
sPosition - 'cen', 'e', 'se', etc.
sStyle - classname
sId - id
sUrl - popup URL
Uses: xTimer,xSlideTo,xWidth,xHeight,xClientWidth,xClientHeight
File: x_popup.js
Demo: xPopup

xTimer.set(sTmrType, obj, sMethod, uTime, data)

Register an object method to receive a timeout or interval event. On timeout the event listener will receive a reference to it's xTimerObj which has methods: start, stop, and reset; and properties: elapsed and data. xTimer is a global object created when x_timer.js is included. Multiple timers can be set.
Parameters:
sTmrType - 'timeout' or 'interval'
obj - object to receive event
sMethod - string: name of one of obj's methods
uTime - time in ms
data - passed to listener at event
Uses: none
File: x_timer.js
Demo: xPopup

xEvalTextarea()

Append a textarea and button to the current document. Click the button to evaluate the javascript in the textarea.
Uses: none
File: x_debug.js
Demo:

xTooltipGroup(grpClassOrIdList, tipClass, origin, xOffset, yOffset, textList)

Parameters:
grpClassOrIdList - The css class name which you add to any element you want to trigger a tooltip - Or - an array of id strings.
tipClass - The css class name applied to the tooltip triggered by elements with the grpClass class name (or elements whose id is in the IdList).
origin - One of 'right', 'top', or 'mouse'. For 'right' or 'top', the tooltip is positioned to the right (or top) of the trigger element. For 'mouse' the tooltip will follow the mouse. In all three cases the following offsets are applied.
xOffset/yOffset - The tooltip is positioned relative to the above origin, offset by these amounts.
textList - If grpClassOrIdList is an array of IDs, then textList provides the tooltip text for the corresponding array index. If grpClassOrIdList is a class name then textList is not needed (tooltip text is taken from the element's TITLE attribute).
Uses: xGetElementById, xGetElementsByClassName, xAddEventListener, xPageX, xPageY, xWidth, xHeight, xMoveTo, xShow, xEvent
File: x_tip.js

xIntersection(ele1, ele2, obj)

Returns true if the two elements intersect and assigns properties to obj which describe the intersected rectangle: x, y, w, and h.
Parameters:
ele1 -
ele2 -
obj -
Uses: none
File: x_misc.js

xLinearScale(value, inMin, inMax, outMin, outMax)

...
Parameters:
value -
inMin -
inMax -
outMin -
outMax -
Uses: none
File: x_misc.js
Demo: xBar

Menu

Appearance

Position

Size

Event

DOM

Animation

Misc

Window

Type

Debug

NN4