Home

# Cross-Browser.com

## X Library Function Reference

### Notes

The reference is currently being updated for X version 3.15.4 (30Dec04)

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 'x_core.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
xMoz - true if browser is Mozilla, etc.
xMac - true if OS is Mac

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
Top

## FUNCTIONS

#### xShow(ele)

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

#### xHide(ele)

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

#### xVisibility(ele, bShow)

Return and optionally set the element's visibility.
Parameters:
ele - id string or object reference
bShow - true = show, false = hide
Uses: xGetElementById(), xDef()
File: x_core.js
Demo:
Top

#### xDisplay(ele, sProp)

Return and optionally set the element's display property.
Parameters:
ele - id string or object reference
sProp - 'none', 'inline', 'block', etc.
Uses: xGetElementById(), xStr()
File: x_core.js
Demo:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### xPageX(ele)

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

#### xPageY(ele)

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

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### xEvent(oEvent)

Resolve browser differences for selected event properties and return an object with those properties. This is an object prototype. Create an instance with the new operator.
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:
Top

#### xStopPropagation(evt)

...
Parameters:
evt -
Uses: ...
File: x_event.js
Demo:
Top

#### xPreventDefault(evt)

...
Parameters:
evt -
Uses: ...
File: x_event.js
Demo:
Top

#### xClientWidth()

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

#### xClientHeight()

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

#### 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:
Top

#### 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
Demo: xTooltip, xPopup
Top

#### 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
Demo: xTooltip, xPopup
Top

#### xGetComputedStyle(oEle, sProp, bInt)

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
bInt - if true, return value is an integer
Uses: none
File: x_dom.js
Demo:
Top

#### 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
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### xDef(ref[,...])

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

#### xNum(ref)

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

#### xStr(ref)

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

#### 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
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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:
Top

#### 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
Top

#### 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
Top

#### 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
Top

#### 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
Top

#### 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:
Top

#### 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
Demo: xTooltipGroup
Top

#### 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
Demo: CBE Drag Demo
Top

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

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

#### xEllipse(ele, xRadius, yRadius, radiusInc, totalTime, startAngle, stopAngle)

Elliptical animation.
Parameters:
ele -
xRadius -
yRadius -
radiusInc -
totalTime -
startAngle -
stopAngle -
Uses: ...
File: x_anim.js
Demo:
Top

#### xParaEq(ele, xExpr, yExpr, totalTime)

Parametric equation animation.
Parameters:
ele -
xExpr -
yExpr -
totalTime -
Uses: ...
File: x_anim.js
Demo:
Top

#### xTableRowDisplay(bShow, sec, nRow)

Set row display.
Parameters:
bShow -
sec -
nRow -
Uses: ...
File: x_table.js
Demo: Table Toys
Top

#### xTableCellVisibility(bShow, sec, nRow, nCol)

Set cell visibility.
Parameters:
bShow -
sec -
nRow -
nCol -
Uses: ...
File: x_table.js
Demo: Table Toys
Top

#### xTableColDisplay(bShow, sec, nCol)

Set column display.
Parameters:
bShow -
sec -
nCol -
Uses: ...
File: x_table.js
Demo: Table Toys
Top

#### xTableIterate(sec, fnCallback)

Iterate through all rows and cells in the section.
Parameters:
sec - ID or element reference of table, tHead, tBody, or tFoot.
fnCallback - function reference which will be called for each row and cell in section. If fnCallback returns false then iterations will stop. It will be passed the following arguments:
obj - reference to the current cell or row.
isRow - true if obj is a ref to a TR, false if obj is a ref to a TD.
row - 0-based row number relative to section.
col - 0-based column number relative to section.
data - passed to fnCallback at each call.
Uses: xGetElementById
File: x_table.js
Demo: Table Cursor
Top

#### xTableCursor(id, inh, def, hov, sel)

Mouseover highlight on rows and cells.
Parameters:
id - table id
inh - inherit style
def - default style
hov - row hover style
sel - cell selected style
Uses: xGetElementById, xTableIterate
File: x_table.js
Demo: Table Cursor
Top

#### xImgAsyncWait(fnStatus, fnInit, fnError, sErrorImg, sAbortImg, imgArray)

Asynchronously waits (and monitors the status) of newly created or static images.
Parameters:
fnStatus -
fnInit -
fnError -
sErrorImg -
sAbortImg -
imgArray -
Uses: ...
File: x_img.js
Demo: xImgAsyncWait
Top

#### xTriStateImage(idOut, urlOver, urlDown, fnUp)

Image rollover with a third state - mousedown.
Parameters:
idOut -
urlOver -
urlDown -
fnUp -
Uses: ...
File: x_img.js
Demo: TriStateImage
Top

#### xCapitalize(str)

Capitalize the first letter of every word in str.
Parameters:
str -
Uses: none
File: x_misc.js
Demo:

#### Menu

### Appearance

xBackground

xColor

xHide

xShow

xVisibility

xDisplay

xZIndex

### Position

xHasPoint

xLeft

xMoveTo

xOffsetLeft

xOffsetTop

xPageX

xPageY

xScrollLeft

xScrollTop

xTop

### Size

xClip

xHeight

xResizeTo

xWidth

### Event

xEvent

xAddEventListener

xRemoveEventListener

xStopPropagation

xPreventDefault

### DOM

xGetComputedStyle

xGetElementById

xGetElementsByAttribute

xGetElementsByClassName

xGetElementsByTagName

xParent

xWalkTree

### Animation

xBar

xSlideTo

xEllipse

xParaEq

### Table

xTableRowDisplay

xTableCellVisibility

xTableColDisplay

xTableIterate

xTableCursor

### Image

xImgRollSetup

xImgAsyncWait

xTriStateImage

### Misc

xPopup

xTimer

xTooltipGroup

xEnableDrag

xIntersection

xLinearScale

xGetURLArguments

xCardinalPosition

xCapitalize

xPad

xHex

xRad

xDeg

### Window

xClientHeight

xClientWidth

xWinScrollTo

xWindow

xWinClass

xWinOpen

### Type

xDef

xNum

xStr

### Debug

xName

xEvalTextarea

xLoadScript

xParentChain

xGetElePropsArray

xGetElePropsString

### NN4

xLayer

xLayerFromPoint