CBE v4b10 Object Reference | Cross-Browser.com

window |  | Methods | Properties
document |  | Methods | Properties
CrossBrowserElement | Events | Methods | Properties
CrossBrowserEvent |  | Methods | Properties
ClientSnifferJr |  |  | Properties
Parameter Syntax Top ## window Methods
cbeDebugMsg | cbeDebugMsg(sMsg)
cbeDebugWindow | cbeDebugWindow([sBaseUrl])
cbeDegrees | cbeDegrees(iRad)
cbeEval | cbeEval(xExpression [, arg1, ...])
cbeGetCookie | cbeGetCookie(sName)
cbeGetElementById | cbeGetElementById(sId)
cbeGetFormByName | cbeGetFormByName(sName)
cbeGetImageByName | cbeGetImageByName(sName)
cbeGetNodeFromPoint | cbeGetNodeFromPoint(iX, iY)
cbeGetURLArguments | cbeGetURLArguments()
cbeHexString | cbeHexString(uN, uDigits, sPrefix)
cbeMouseMoveStatus | cbeMouseMoveStatus()
cbeNativeAddEventListener | cbeNativeAddEventListener(oEle, sType, fListener, bCapture)
cbeNativeRemoveEventListener | cbeNativeRemoveEventListener(oEle, sType, fListener, bCapture)
cbeNewImage | cbeNewImage(sName, sUrl [, uWidth, uHeight])
cbePad | cbePad(sStr, uFinalLen, sPadChar, bLeft)
cbePropagateEvent | cbePropagateEvent(oCrossBrowserEvent)
cbeRadians | cbeRadians(iDeg)
cbeRefWindow | cbeRefWindow([sBaseUrl])
cbeSetCookie | cbeSetCookie(sName, sValue [, dExpire])
cbeSetImage | cbeSetImage(sTarget | oTarget, sSource | oSource)
cbeShowProps | cbeShowProps(oObj, sObjName, bShowValues)
cbeTileWindows | cbeTileWindows()
cbeTraverseTree | cbeTraverseTree(sOrder, oStart, fVisit)
Top ## window Properties
Property | Browser Support | Data Type | Notes
cbe | I | N | G | O | CrossBrowserElement | For window, document and every DIV or SPAN with id != "", a CrossBrowserElement object is created and added to the native Element object as a property with the name cbe.
cbeAll | I | N | G | O | Array of CrossBrowserElement | An array of all CrossBrowserElement objects.
cbeButton | I | N | G | O | Array of string | An enumeration for the CrossBrowserEvent.button property: 'LEFT', 'MIDDLE', 'RIGHT', 'undefined', 'non-mouse event'
cbeDebugJsLoaded | I | N | G | O | boolean | True if cbe_debug.js has loaded.
cbeDocumentId | I | N | G | O | string | Assigned to document.cbe.id
cbeEventJsLoaded | I | N | G | O | boolean | True if cbe_event.js has loaded.
cbeEventPhase | I | N | G | O | Array of string | An enumeration for the CrossBrowserEvent.eventPhase property: '', 'AT_TARGET', 'BUBBLING_PHASE', 'CAPTURING_PHASE'
cbeImageCount | I | N | G | O | integer | The number of Image objects created with cbeNewImage().
cbeImageName | I | N | G | O | Array of string | An array of the names of the Image objects created with cbeNewImage().
cbeImageObj | I | N | G | O | Array of Image | An array of the Image objects created with cbeNewImage().
cbeSlideJsLoaded | I | N | G | O | boolean | True if cbe_slide.js has loaded.
cbeSlide2JsLoaded | I | N | G | O | boolean | True if cbe_slide2.js has loaded.
cbeUtilJsLoaded | I | N | G | O | boolean | True if cbe_util.js has loaded.
cbeWindowId | I | N | G | O | string | Assigned to window.cbe.id
cbeVersion | I | N | G | O | string | The current CBE version.
is | I | N | G | O | ClientSnifferJr | The client detection object.
Top ## document Methods
getElementById | getElementById(sId)
Top ## document Properties
Property | Browser Support | Data Type | Notes
cbe | I | N | G | O | CrossBrowserElement | For window, document and every DIV or SPAN with id != "", a CrossBrowserElement object is created and added to the native Element object as a property with the name cbe.
Top ## CrossBrowserElement Methods ### Size:
height | height([iH])
resizeBy | resizeBy(iDw, iDh)
resizeTo | resizeTo(iWidth, iHeight)
sizeBy | sizeBy(iDw, iDh)
sizeTo | sizeTo(iWidth, iHeight)
width | width([iW])
### Clipping:
autoClip | autoClip(sCP, sDirection, uIncrement, xEndListener)
clip | clip(iTop, iRight, iBottom, iLeft)
clipArray | clipArray()
clipBottom | clipBottom()
clipBy | clipBy(iDT, iDR, iDB, iDL)
clipHeight | clipHeight()
clipLeft | clipLeft()
clipRight | clipRight()
clipTop | clipTop()
clipWidth | clipWidth()
scrollBy | scrollBy(iDX, iDY)
### Appearance:
background | background(sColor [,sImage])
color | color([s])
hide | hide()
innerHtml | innerHtml(sHtml)
show | show()
visibility | visibility([s | b])
zIndex | zIndex([i])
### Position:
contains | contains(iLeft, iTop [, iClipTop [, iClipRight [, iClipBottom, iClipLeft]]])
left | left([iX])
moveBy | moveBy(iDx, iDy)
moveTo | moveTo(iX, iY [, xEndListener ]) moveTo(sCardinal [, iMargin [, bOutside [, xEndListener ]]])
offsetLeft | offsetLeft()
offsetTop | offsetTop()
pageX | pageX()
pageY | pageY()
scrollLeft | scrollLeft()
scrollTop | scrollTop()
top | top([iY])
### Animation:
ellipse | ellipse(uXRad, uYRad, iRadInc, uTime, iStartAngle, iStopAngle [, xEndListener])
parametricEquation | parametricEquation(xX, xY, uTime [, xEndListener])
slideCornerBy | slideCornerBy(sCorner, iDX, iDY, uTime [, xEndListener])
slideCornerTo | slideCornerTo(sCorner, iX, iY, uTime [, xEndListener])
slideBy | slideBy(iDX, iDY, uTime [, xEndListener])
slideTo | slideTo(iX, iY, uTime [, xEndListener]) slideTo(sCardinal, iMargin, uTime [, xEndListener ])
startSequence | startSequence([uIndex])
stopSequence | stopSequence()
stopSlide | stopSlide()
### Event Management:
addEventListener | addEventListener(sType, xListener, bCapture)
dispatchEvent | dispatchEvent(oCrossBrowserEvent)
removeEventListener | removeEventListener(sType, xListener, bCapture)
### Element Creation:
createElement | createElement(sEleType)
### Derived from CrossBrowserNode:
appendChild | appendChild(oElement)
Top ## CrossBrowserElement Properties
Property | Browser Support | Data Type | Notes
ele | I | N | G | O | native Element | The native Element object that this CrossBrowserElement object is associated with.
id | I | N | G | O | string | The same id as it's associated Element object.
index | I | N | G | O | unsigned integer | This object's index into the array of CrossBrowserElement objects: cbeAll.
moving | I | N | G | O | boolean | True if this object is currently sliding.
parentElement | I | N | G | O | native Element | The parent Element object of this object's associated Element object.
slideRate | I | N | G | O | unsigned integer | Assign one of the following constants to this property: cbeSlideRateLinear - slides at a constant rate. cbeSlideRateSine - (default) starts fast and decelerates toward the target. cbeSlideRateCosine - starts slow and accelerates toward the target.
Derived from CrossBrowserNode:
childNodes | I | N | G | O | unsigned integer | The number of child nodes for this node - the number of elements nested one level deep within this element.
firstChild | I | N | G | O | CrossBrowserElement | This object's first child node, or null if there is none.
lastChild | I | N | G | O | CrossBrowserElement | This object's last child node, or null if there is none.
nextSibling | I | N | G | O | CrossBrowserElement | The CrossBrowserElement object after this one, in this object's parent's child list.
parentNode | I | N | G | O | CrossBrowserElement | This object's parent CrossBrowserElement object.
previousSibling | I | N | G | O | CrossBrowserElement | The CrossBrowserElement object before this one, in this object's parent's child list.
Top ## CrossBrowserElement Events
Event | Browser Support | Notes
The following events are supported within CBE's implementation of the DOM2 event model:
click | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
mousedown | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
mouseup | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
mousemove | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
mouseover | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
mouseout | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
keypress | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
keyup | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
keydown | I | N | G | O | The listener will receive a CrossBrowserEvent argument.
CBE also provides support for the following events but not within the new event model:
drag | I | N | G | O | The listener will receive a CrossBrowserEvent argument originated by the mouseMove event. If you do not supply a listener, a pre-implemented listener will provide basic drag support.
dragStart | I | N | G | O | The listener will receive a CrossBrowserEvent argument originated by the mouseDown event.
dragEnd | I | N | G | O | The listener will receive a CrossBrowserEvent argument originated by the mouseUp event.
slide | I | N | G | O | The slide event occurs before each move, during a slide. The event listener will receive four arguments: cbe: a reference to the CBE object about to move, newX: the x coordinate to which the object is about to move, newY: the y coordinate to which the object is about to move, time: the elapsed time of the slide, in milliseconds.
slideStart | I | N | G | O | The slideStart event occurs before the first move of the slide. The event listener will receive one argument: a reference to the CBE object about to slide.
slideEnd | I | N | G | O | The slideEnd event occurs after the last move which completes the slide. The event listener will receive one argument: a reference to the CBE object which just completed a slide.
dragResize | I | N | G | O | Not a formal event. A pre-implemented listener will provide basic drag and resize support. File dependencies: cbe_core.js, cbe_event.js, cbe_util.js
scroll | I | N | G | O | Currently only for window object. Simulates this event in browsers that don't directly support it.
resize | I | N | G | O | Currently only for window object. Simulates this event in browsers that don't directly support it. CBE automatically installs a basic resize listener which reloads the page on resize for NN4 and Opera.
Top ## CrossBrowserEvent Methods
preventDefault | preventDefault()
stopPropagation | stopPropagation()
Top ## CrossBrowserEvent Properties
Property | Browser Support | Data Type | Notes
From DOM2 Interface Event
type | I | N | G | O | DOMString | The name of the event (case-insensitive).
target | I | N | G | O | EventTarget | Used to indicate the EventTarget to which the event was originally dispatched.
currentTarget | I |  | G | O | EventTarget | Used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling.
eventPhase |  |  | G |  | unsigned short | Used to indicate which phase of event flow is currently being evaluated. Masks: cbeEvent.AT_TARGET==1, cbeEvent.BUBBLING_PHASE==2, cbeEvent.CAPTURING_PHASE==3
bubbles | I |  | G |  | boolean | Used to indicate whether or not an event is a bubbling event. If the event can bubble the value is true, else the value is false.
cancelable |  |  | G |  | boolean | Used to indicate whether or not an event can have its default action prevented. If the default action can be prevented the value is true, else the value is false.
timeStamp |  |  | G |  | DOMTimeStamp | Used to specify the time (in milliseconds relative to the epoch) at which the event was created.
From DOM2 Interface MouseEvent
screenX | I | N | G | O | long | The horizontal coordinate at which the event occurred relative to the origin of the screen coordinate system.
screenY | I | N | G | O | long | The vertical coordinate at which the event occurred relative to the origin of the screen coordinate system.
clientX | I | N | G | O | long | The horizontal coordinate at which the event occurred relative to the DOM implementation's client area.
clientY | I | N | G | O | long | The vertical coordinate at which the event occurred relative to the DOM implementation's client area.
ctrlKey | I |  | G | O | boolean | Used to indicate whether the 'ctrl' key was depressed during the firing of the event.
shiftKey | I |  | G | O | boolean | Used to indicate whether the 'shift' key was depressed during the firing of the event.
altKey | I |  | G |  | boolean | Used to indicate whether the 'alt' key was depressed during the firing of the event.
metaKey |  |  | G |  | boolean | Used to indicate whether the 'meta' key was depressed during the firing of the event.
button | I | N | G | O | unsigned short | During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. Masks: cbeEvent.LEFT==0, cbeEvent.MIDDLE==1, cbeEvent.RIGHT==2
relatedTarget | I |  | G |  | EventTarget | Used to identify a secondary EventTarget related to a UI event. Currently this attribute is used with the mouseover event to indicate the EventTarget which the pointing device exited and with the mouseout event to indicate the EventTarget which the pointing device entered.
From IE4 Event Model
keyCode | I | N | G | O | long | The ASCII value of the key pressed. During onKeyDown and onKeyUp keyCode will be uppercase only.
offsetX | I | N | G |  | long | The pixel X coordinate of the mouse pointer with respect to the current rendering context.
offsetY | I | N | G |  | long | The pixel Y coordinate of the mouse pointer with respect to the current rendering context.
From NN4 Event Model
pageX | I | N | G | O | long | The pixel X coordinate of the mouse pointer with respect to the page.
pageY | I | N | G | O | long | The pixel Y coordinate of the mouse pointer with respect to the page.
From CBE Event Model
cbeTarget | I | N | G | O | CrossBrowserElement | When an event occurs, a specific CrossBrowserElement object is designated as the event target, and is specified in the event object's cbeTarget property.
cbeCurrentTarget | I | N | G | O | CrossBrowserElement | The event object's cbeCurrentTarget property points to the CrossBrowserElement object whose listener is currently processing the event. In effect, this is a this pointer for the listener.
dx | I | N | G | O | unsigned integer | During a drag event only, dx is the change in the mouse X coordinate.
dy | I | N | G | O | unsigned integer | During a drag event only, dy is the change in the mouse Y coordinate.
Top ## ClientSnifferJr Properties
Property | Browser Support | Data Type | Notes
aol | I | N | G | O | boolean | For any version of AOL.
dom1getbyid | I | N | G | O | boolean | True if document.getElementById() exists before cbeInitialize().
dom2events | I | N | G | O | boolean | True if document.addEventListener() and document.removeEventListener() exists before cbeInitialize().
gecko | I | N | G | O | boolean | For NS6 or Mozilla.
hotjava | I | N | G | O | boolean | For any version of HotJava.
ie | I | N | G | O | boolean | For any version of IE.
ie3 | I | N | G | O | boolean | For IE3.xx only.
ie4 | I | N | G | O | boolean | For IE4.xx only.
ie4up | I | N | G | O | boolean | For IE4.xx and above.
ie5 | I | N | G | O | boolean | For IE5.xx only.
ie5up | I | N | G | O | boolean | For IE5.xx and above.
ie6 | I | N | G | O | boolean | For IE6.xx only.
ie6up | I | N | G | O | boolean | For IE6.xx and above.
konq | I | N | G | O | boolean | For any version of Konqueror.
major | I | N | G | O | integer | Only the integer part of the version number.
minor | I | N | G | O | float | The full floating point version number.
nav | I | N | G | O | boolean | For any version of NN as well as NS6.
nav4 | I | N | G | O | boolean | For NN4.xx only.
nav4up | I | N | G | O | boolean | For NN4.xx as well as NS6.
nav5up | I | N | G | O | boolean | For NS6 and above. Use nav6up instead.
nav6 | I | N | G | O | boolean | For NS6.xx only.
nav6up | I | N | G | O | boolean | For NS6 and above.
opera | I | N | G | O | boolean | For any version of Opera.
opera5 | I | N | G | O | boolean | For Opera5.xx only.
opera6 | I | N | G | O | boolean | For Opera6.xx only.
ua | I | N | G | O | string | The userAgent string, all lowercase.
webtv | I | N | G | O | boolean | For any version of WebTV.
# Functions & Object Methods Top ## clip Description: Set the clipping (visible) area. The parameters define the corners. Syntax: clip(iTop, iRight, iBottom, iLeft) iTop: Y coordinate of top-right corner. iRight: X coordinate of top-right corner. iBottom: Y coordinate of bottom-left corner. iLeft: X coordinate of bottom-left corner. Alternate Syntax: clip('auto') 'auto': Clip to the current width and height. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Snippet: The following is a method from the library file cbe_clip.js. It implements scrolling by clipping and moving.
    CrossBrowserElement.prototype.scrollBy = function(dx, dy) {
      var ct = this.clipTop();
      var cr = this.clipRight();
      var cb = this.clipBottom();
      var cl = this.clipLeft();
      var w = this.width();
      var h = this.height();
      // Don't scroll beyond the edge of the element
      if (cl + dx < 0) dx = -cl;
      else if (cr + dx > w) dx = w - cr;
      if (ct + dy < 0) dy = -ct;
      else if (cb + dy > h) dy = h - cb;
      // Clip and move to simulate scrolling
      this.clip(ct + dy, cr + dx, cb + dy, cl + dx);
      this.moveBy(-dx, -dy);
    }
Top ## autoClip Description: autoClip is not yet time-based, like the slide methods. It clips by uIncrement until the specified cardinal point is reached. Syntax: autoClip(sCP, sDirection, uIncrement, xEndListener) sCP: One of: 'n', 'ne', 'e', 'se', 's', 'sw', w, 'nw', 'cen', 'center'. sDirection: One of: 'clip', 'unclip'. uIncrement: The amount, in pixels, that is clipped at each iteration. xEndListener: A function reference or string. If present, it will be evaluated after the last clip. Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipArray Description: Used internally by CBE. Returns an array of string such as: ("rect", "0px", "200px", "300px", "0px") Syntax: clipArray() Returns: array of string; returns null for NN4 and Opera. Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipBottom Description: The Y coordinate of the bottom-left corner of the clipping area. Syntax: clipBottom() Returns: integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipBy Description: Add the arguments to the existing clip coordinates. Syntax: clipBy(iDT, iDR, iDB, iDL) iDT: The change in the Y coordinate of the top-right corner of the clipping area. iDR: The change in the X coordinate of the top-right corner of the clipping area. iDB: The change in the Y coordinate of the bottom-left corner of the clipping area. iDL: The change in the X coordinate of the bottom-left corner of the clipping area. Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipHeight Description: The height of the clipping area: clipBottom() - clipTop(). Syntax: clipHeight() Returns: unsigned integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipLeft Description: The X coordinate of the bottom-left corner of the clipping area. Syntax: clipLeft() Returns: integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipRight Description: The X coordinate of the top-left corner of the clipping area. Syntax: clipRight() Returns: integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipTop Description: The Y coordinate of the top-left corner of the clipping area. Syntax: clipTop() Returns: integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## clipWidth Description: The width of the clipping area: clipRight() - clipLeft(). Syntax: clipWidth() Returns: unsigned integer Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## scrollBy Description: Simulate scrolling by clipping and moving. Syntax: scrollBy(iDX, iDY) iDX: the change in horizontal scroll, in pixels iDY: the change in vertical scroll, in pixels Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. Example Top ## height Description: Set or return the element's height. Do not change the clipping area. Syntax: height([uH]) uH: the new height in pixels Returns: unsigned integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: E1's height is set to half the height of it's container.
    function windowOnload() {
      var E1 = document.getElementById('e1').cbe;
      E1.height( E1.parentNode.height() / 2 );
    }
Top ## resizeBy Description: Add the arguments to the width and height, and clip to the resulting dimensions. Syntax: resizeBy(iDw, iDh) iDw: The change in width in pixels. iDh: The change in height in pixels. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet:
    function windowOnload() {
      var cbe = document.getElementById('e1').cbe;
      cbe.resizeTo(100, 100);
      cbe.resizeBy(-25, 25);
      // the element is now 75 wide and 125 high
    }
Top ## resizeTo Description: Set the width and height, and set clipping to the new dimensions. This is the preferred way to resize an element, unless you don't want clip to change. Syntax: resizeTo(uWidth, uHeight) uWidth: The new width in pixels. uHeight: The new height in pixels. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function maximizes an element within it's parent element.
    function maximize(id) {
      var cbe = document.getElementById(id).cbe;
      cbe.moveTo(cbe.parentNode.scrollLeft(), cbe.parentNode.scrollTop());
      cbe.resizeTo(cbe.parentNode.width(), cbe.parentNode.height());
    }
Top ## sizeBy Description: Add the arguments to the width and height. Do not change the clipping area. Syntax: sizeBy(iDw, iDh) iDw: The change in width in pixels. iDh: The change in height in pixels. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet:
    function windowOnload() {
      var cbe = document.getElementById('e1').cbe;
      cbe.sizeTo(100, 100);
      cbe.sizeBy(-25, 25);
      // the element is now 75 wide and 125 high
      // but clip (the visible area) remains at it's initial settings
    }
Top ## sizeTo Description: Set the width and height. Do not change the clipping area. Syntax: sizeTo(uWidth, uHeight) uWidth: The new width in pixels. uHeight: The new height in pixels. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet: Maximizes an element in the browser window but does not change the clipping (visible) area.
    function windowOnload() {
      var cbe = document.getElementById('e1').cbe;
      cbe.moveTo(cbe.parentNode.scrollLeft(), cbe.parentNode.scrollTop());
      cbe.sizeTo(document.cbe.width(), document.cbe.height());
    }
Top ## width Description: Set or return the element's width. Do not change the clipping area. Syntax: width([uW]) uW: The new width in pixels. Returns: unsigned integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: E1's width is set to half the width of it's container.
    function windowOnload() {
      var E1 = document.getElementById('e1').cbe;
      E1.width( E1.parentNode.width() / 2 );
    }
Top ## background Description: Sets the background color and, optionally, the background image. Returns the background color. Syntax: background(cBgColor [,sImage]) cBgColor: A string specifying the background color. All color values as strings are 6 digit hex numbers preceded with '#'. sImage: A string specifying the URL (absolute or relative) of an image file to be tiled on the background. Returns: string, the background color Method of: CrossBrowserElement Library File: cbe_core.js Browser Support: In NN4 the background color of text cannot be changed after the page is loaded. In the CSS, make the text's background transparent, then changing the element's background will appear to change the text's background also. Opera5 had problems with transparent backgrounds. Snippet: Displays random background colors for 5 seconds. Uses the utility function cbeHexString().
    function windowOnload() {
      with (document.getElementById('e1').cbe) {
        moveTo('center');
        show();
      }
      // random background colors for 5 seconds
      randomColors('e1', 5000);
    }

    // This function cycles an element through
    // random background colors for the time specified.
    function randomColors(id, elapsedTime) {
      if (elapsedTime > 0) {
        elapsedTime -= 125;
        setTimeout("randomColors('"+id+"',"+elapsedTime+")", 125);
        var newColor = cbeHexString(Math.random() * 0xffffff, 6, '#');
        window.status = 'color: '+newColor + ', time: '+elapsedTime;
        document.getElementById(id).cbe.background(newColor);
      }
    }
Top ## color Description: Sets and returns the text color. Syntax: color([cTxtColor]) cTxtColor: A string specifying the text color. All color values as strings are 6 digit hex numbers preceded with '#'. Returns: string Method of: CrossBrowserElement Library File: cbe_core.js Browser Support: In NN4 the text color cannot be changed dynamically. Snippet:
    function windowOnload() {
      var cbe = document.getElementById('e1').cbe;
      cbe.color('#0000FF'); // set text color to blue
    }
Top ## hide Description: Sets visibility to 'hide' (NN4) or 'hidden' (others). Syntax: hide() Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet:
    function windowOnload() {
      document.getElementById('e1').cbe.hide();
    }
Top ## innerHtml Description: Replaces the innerHTML of an element with the argument. Syntax: innerHtml(sHtml) sHtml: string Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Browser Support: Not supported by Opera6. In IE and Gecko the native innerHTML is used. In NN4 document.write() is used. NN4 does not retain CSS associations with the element after writing - you must code it into the string to be written. Snippet:
    function windowOnload() {
      var t = 'dynamic text';
      if (is.nav4) t = "<span class='myClass'>" + t + "</span>";
      document.getElementById('e1').cbe.innerHtml(t);
    }
Top ## show Description: Sets visibility to 'visible' (Opera) or 'inherit' (others). Syntax: show() Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet:
    function windowOnload() {
      document.getElementById('e1').cbe.show();
    }
Top ## visibility Description: Return false if visibility is 'hide' or 'hidden', else return true. Syntax: visibility([s | b]) s: One of the strings: 'inherit', 'visible' (NN4: 'show'), or 'hidden' (NN4: 'hide'). Or a boolean value indicating true or false visibility. The same as calling show() or hide(). Returns: boolean Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function toggles the visible state of an element.
    function toggleVisibility(sId) {
      var prevVisState = document.getElementById(sId).cbe.visibility();
      cbe.visibility(!prevVisState);
    }
Top ## zIndex Description: Set or get the current zIndex (stacking order). Syntax: zIndex([uNewZ]) uNewZ: The new z-Index. Returns: unsigned integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function swaps the z-index of the element arguments.
    function swapZ(ele1, ele2) {
      var z1 = ele1.zIndex();
      ele1.zIndex(ele2.zIndex());
      ele2.zIndex(z1);
    }
Top ## contains Description: Return true if the point (iLeft,iTop) is contained within the given clipping area defined by the iClip* arguments. The iClip* arguments are offsets from their respective sides. A positive offset is toward the inside of the element. A negative offset is toward the outside of the element. Syntax: contains(iLeft, iTop [, iClipTop [, iClipRight [, iClipBottom, iClipLeft]]]) iLeft: The x coordinate of the target point. iTop: The y coordinate of the target point. iClipTop: The top offset. iClipRight: The right offset. iClipBottom: The bottom offset. iClipLeft: The left offset. Returns: boolean Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function is the mouseMove event listener from one of the menu examples.
    function menuHide(e)
    {
      if (!menuOpen) return;
      var x = e.pageX;
      var y = e.pageY;
      if (!menuArray[activeMenu].contains(x,y,-2,0,0,0) && !menuBar.contains(x,y)) {
        menuArray[activeMenu].hide();
        cbeSetImage(menuArray[activeMenu].lblImg, menuArray[activeMenu].lblOut);
        menuOpen = false;
      }
    }
Top ## left Description: Set or get the current x coordinate. For absolutely positioned elements this coordinate is relative to the containing CrossBrowserElement object. For relatively positioned elements this coordinate is relative to the element's natural position in the flow of HTML. Syntax: left([iX]) iX: The new x coordinate in pixels. Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function is from the library file cbe_core.js.
    function domLeft(newLeft) {
      if (arguments.length) this.ele.style.left = newLeft + "px";
      else return parseInt(this.ele.style.left);
    }
Top ## moveBy Description: Add the arguments to the current position. Syntax: moveBy(iDx, iDy) iDx: The change in the X coordinate. iDy: The change in the Y coordinate. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This function slides an element for a certain length of time.
    function animate(id, dx, dy, elapsedTime) {
      if (elapsedTime > 0) {
        elapsedTime -= 55;
        setTimeout("animate('"+id+"',"+dx+","+dy+","+elapsedTime+")", 55);
        document.getElementById(id).cbe.moveBy(dx, dy);
      }
    }
Top ## moveTo Description: Position the top left corner of the element at the given coordinate. Syntax: moveTo(iX, iY [, xEndListener ]) iX: The new X coordinate. iY: The new Y coordinate. xEndListener: A function reference or string. If present, it will be evaluated after the element is moved. Alternate Syntax: moveTo(sCardinal [, iMargin [, bOutside [, xEndListener ]]]) sCardinal: One of the following strings: 'n', 'ne', 'e', 'se', 's', 'sw', w, 'nw', 'cen', 'center'. The element will be positioned in a corner, on a side, or in the center. iMargin: An integer indicating the distance between the edge of the element and it's container. Assumed zero, if not present. bOutside: A boolean value. If it is true, the element will be positioned outside of the window. If it is false (or not present), the element will be positioned inside the window. xEndListener: A function reference or string. If present, it will be evaluated after the element is moved. Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Snippet: Various examples of using moveTo().
    function windowOnload() {
      // Center e1 in it's container.
      with (document.getElementById('e1').cbe) {
        resizeTo(300,300);
        background('#ccccff');
        moveTo('cen');
        show();
      }
      // Position e2 inside the bottom right corner of it's container,
      // with a four pixel margin.
      with (document.getElementById('e2').cbe) {
        resizeTo(100,100);
        background('#ffcccc');
        moveTo('se', 4);
        show();
      }
      // Position e3 outside the top left corner of it's container.
      with (document.getElementById('e2').cbe) {
        hide();
        moveTo('nw', 0, true);
      }
    }

    // This function positions an element at a random position
    // in the visible area of it's container.
    function randomPosition(id)
    {
      var cbe = document.getElementById(id).cbe;
      var rndX = Math.random() * (cbe.parentNode.width() - cbe.width());
      var rndY = Math.random() * (cbe.parentNode.height() - cbe.height());
      rndX += cbe.parentNode.scrollLeft();
      rndY += cbe.parentNode.scrollTop();
      cbe.moveTo(rndX, rndY);
    }
Top ## offsetLeft Description: Return the x coordinate of the element relative to it's parent CrossBrowserElement object. This is only useful for relatively positioned elements. offsetLeft() has the same meaning for relatively positioned elements as left() has for absolutely positioned elements. Syntax: offsetLeft() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Top ## offsetTop Description: Return the y coordinate of the element relative to it's parent CrossBrowserElement object. This is only useful for relatively positioned elements. offsetTop() has the same meaning for relatively positioned elements as top() has for absolutely positioned elements. Syntax: offsetTop() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Top ## pageX Description: Return the x coordinate relative to the top-left corner of the page. This is the absolute page position of an element, even if it is deeply nested. This works the same for absolutely and relatively positioned elements. Syntax: pageX() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Top ## pageY Description: Return the y coordinate relative to the top-left corner of the page. This is the absolute page position of an element, even if it is deeply nested. This works the same for absolutely and relatively positioned elements. Syntax: pageY() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This is part of the windowOnload() function from this site's home page.
    function windowOnload() {
      anchor = document.getElementById('idAnchor').cbe;
      with (menu = document.getElementById('idMenuBar').cbe) {
        background('#cccccc');
        resizeTo(document.cbe.width(), 22);
        moveTo(0,anchor.pageY());
        zIndex(100);
        show();
      }
    }
Top ## scrollLeft Description: The number of pixels the element has been scrolled horizontally. Syntax: scrollLeft() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Top ## scrollTop Description: The number of pixels the element has been scrolled vertically. Syntax: scrollTop() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: To position an element in the visible area of the window use scrollLeft() and scrollTop(). This is from the sliding menu example.
    function windowOnload()
    {
      menuAnchor = document.getElementById('menuAnchor').cbe;
      slidingMenu = document.getElementById('slidingMenu').cbe;
      slidingMenu.moveTo(10, menuAnchor.pageY()-10);
      slidingMenu.show();
      window.cbe.addEventListener("scroll", slidingMenuListener);
    }

    function slidingMenuListener()
    {
      slidingMenu.slideTo(
        10,
        menuAnchor.pageY() - 10 + document.cbe.scrollTop(),
        1000
      );
    }
Top ## top Description: Set or get the current y coordinate. For absolutely positioned elements this coordinate is relative to the containing CrossBrowserElement object. For relatively positioned elements this coordinate is relative to the element's natural position in the flow of HTML. Syntax: top([iY]) iY: The new y coordinate in pixels. Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js Snippet: This is from the library file cbe_core.js.
    CrossBrowserElement.prototype.moveBy = function(dX, dY, endListener) {
      if (dX) this.left(this.left() + dX);
      if (dY) this.top(this.top() + dY);
      if (endListener) cbeEval(endListener, this);
    }
Top ## ellipse Description: Slide the element along an elliptical path. The y axis is opposite from the cartesian system, so sliding from 0 to 360 degrees is a clockwise slide. Sliding from 0 to -360 is a counter-clockwise slide. The center of the ellipse is determined by the radii and the start angle. Imagine that the element is initially sitting at iStartAngle. Syntax: ellipse(uXRad, uYRad, iRadInc, uTime, iStartAngle, iStopAngle [, xEndListener]) uXRad: The x radius. uYRad: The y radius. iRadInc: The increment or decrement for both axes. uTime: The total time for the slide, in milliseconds. iStartAngle: The start angle in degrees. iStopAngle: The non-zero stop angle in degrees. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Dependencies: cbe_core.js, cbe_event.js, cbe_util.js Snippet:
    function windowOnload() {
      var e1 = document.getElementById('e1').cbe;

      // Moves e1 in a clockwise circle with radius=100.
      // The slide is completed in one second.
      e1.ellipse(100, 100, 0, 1000, 0, 360);

      // Moves e1 in 4 counter-clockwise circles with
      // x radius = to it's container's width,
      // and with y radius = to it's container's height.
      // The slide is completed in 4 seconds.
      e1.ellipse(
        e1.parentNode.width(),  // uXRad
        e1.parentNode.height(), // uYRad
        0,                      // iRadInc
        4000,                   // uTime
        0,                      // iStartAngle
        -1440                   // iStopAngle
      );
    }
Top ## parametricEquation Description: This is a time-based, parametric equation motion engine. Oh well, I still need to experiment with this... but its fun to play with. xX and xY are expressions that generate the x and y coordinates during the slide. These expressions are evaluated with the javascript eval() function. Within the expression you may use any valid sub-expression that eval allows and that is in scope. For example, you may call methods of the Math object such as Math.sin(), Math.cos(), and Math.tan(). You may also reference any global variables or functions. One variable that is within scope for your expression is the parameter t. That is, t is the argument to the equations you provide. At each iteration, the variable t increments by the value of this.tStep (default value of .008). The values from your expressions are plotted on a coordinate system with it's origin at the center of the sliding element's container. The coordinates are then translated by the element's container's scrollLeft and scrollTop values. So the animation will remain visible if the user scrolls or resizes the element's container. Syntax: parametricEquation(xX, xY, uTime [, xEndListener]) xX: A function reference or string. It will be evaluated at each iteration to provide the next x coordinate. xY: A function reference or string. It will be evaluated at each iteration to provide the next y coordinate. uTime: The total time for the slide, in milliseconds. If 0 or not present, the slide will cycle. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js Example Top ## slideCornerBy Description: This is a time-based resize - and you can specify which corner slides to the target point, which is found be adding iDX and iDY to the current position. Syntax: slideCornerBy(sCorner, iDX, iDY, uTime [, xEndListener]) sCorner: One of the strings: 'ne', 'se', 'sw', or 'nw'. iDX: The integer change in the x coordinate of the specified corner. iDY: The integer change in the y coordinate of the specified corner. uTime: The total time for the slide, in milliseconds. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js Example Top ## slideCornerTo Description: This is a time-based resize - and you can specify which corner slides to the target point. Syntax: slideCornerTo(sCorner, iX, iY, uTime [, xEndListener]) sCorner: One of the strings: 'ne', 'se', 'sw', or 'nw'. iX: The integer target for the x coordinate of the specified corner. iY: The integer target for the y coordinate of the specified corner. uTime: The total time for the slide, in milliseconds. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js Example Top ## slideBy Description: This is a time-based slide. The target position is obtained by adding iDX and iDY to the current position. It supports different slide rates, see the description for slideTo(). Syntax: slideBy(iDX, iDY, uTime [, xEndListener]) iDX: The integer change in the x coordinate. Can be negative. iDY: The integer change in the y coordinate. Can be negative. uTime: The total time for the slide, in milliseconds. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Top ## slideTo Description: This is a time-based slide to the target position provided. It supports different slide rates. Assign one of the following constants to the slideRate property: cbeSlideRateLinear - slides at a constant rate. cbeSlideRateSine - (default) starts fast and decelerates toward the target. cbeSlideRateCosine - starts slow and accelerates toward the target. Syntax: slideTo(iX, iY, uTime [, xEndListener]) iX: The integer target for the x coordinate. Can be negative. iY: The integer target for the y coordinate. Can be negative. uTime: The total time for the slide, in milliseconds. xEndListener: A function reference or string. If present, it will be evaluated after the last move of the slide. Alternate Syntax: slideTo(sCardinal, iMargin, uTime [, xEndListener ]) sCardinal: One of the following strings: 'n', 'ne', 'e', 'se', 's', 'sw', w, 'nw', 'cen'. The element will be positioned in a corner, on a side, or in the center. iMargin: An integer indicating the distance between the edge of the element and it's container. bOutside is assumed false, but if isNaN(iMargin) then bOutside is true. uTime: The total time for the slide, in milliseconds. xEndListener: A function reference or string. If present, it will be evaluated after the element is moved. Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Top ## startSequence Description: Start the slide sequence defined by the array property named sequence. Each element of the array is a string which evals to a slide method call. Syntax: startSequence([uIndex]) uIndex: Sets the initial index into the sequence array. If not present the sequence will start at index zero. Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Snippet: The following is from this example.
    var e2;
    function windowOnload() {
      e2 = document.getElementById('E2').cbe;
      e2.sequence = new Array(
        "slideTo('e', 0, 500)",
        "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, 0, 90)",
        "slideTo('n', 0, 500)",
        "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, -90, -180)"
      );
    }

    // The sequence is started with: e2.startSequence();

    // The sequence is stopped with: e2.stopSequence();
Top ## stopSequence Description: Stop the slide sequence started by startSequence(). To make a sequence of slides add an array of slide method calls to an element. This array must be named sequence. Syntax: stopSequence() Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Example Top ## stopSlide Description: Stop any slide method currently executing on this element. Syntax: stopSlide() Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js Example Top ## addEventListener Description: Adds an event listener to the element. When the particular event occurs on this element, the listener will be called. Read about the CBE event model. Syntax: addEventListener(sType, xListener, bCapture) sType: string, one of the supported events xListener: Listener function reference. bCapture: If true, the listener only get's called during the CAPTURING_PHASE of event flow. Returns: void Method of: CrossBrowserElement Library file: cbe_event.js Snippet:
    function windowOnload() {
      var cbe = document.getElementById('e1').cbe;
      cbe.addEventListener('drag');
    }
Top ## cbeNativeAddEventListener Description: Add an event listener to the element. This is a cross-browser interface for native event handling. Syntax: cbeNativeAddEventListener(oEle, sType, fListener, bCapture) oEle: the Element object to which the listener is added. sType: string, one of the natively supported events fListener: Listener function reference. bCapture: If true, the listener only get's called during the CAPTURING_PHASE of event flow - if it is supported natively. Returns: void Method of: window Library file: cbe_event.js Top ## cbeNativeRemoveEventListener Description: Remove an event listener from the element. Syntax: cbeNativeRemoveEventListener(oEle, sType, fListener, bCapture) oEle: the Element object from which the listener is removed. sType: string, one of the natively supported events fListener: Listener function reference. bCapture: All the arguments must be the same as was passed to cbeNativeAddEventListener(). Returns: void Method of: window Library file: cbe_event.js Top ## dispatchEvent Description: This is used in the CBE implementation of the DOM2 event model. The event is dispatched to all appropriate listeners that have been added to this element. Syntax: dispatchEvent(oCrossBrowserEvent) oCrossBrowserEvent: a CrossBrowserEvent object Returns: void Method of: CrossBrowserElement Library file: cbe_event.js Top ## removeEventListener Description: Remove the listener from this element. The arguments must be the same as were passed to addEventListener(). Syntax: removeEventListener(sType, xListener, bCapture) sType: string, one of the supported events xListener: Listener function reference. bCapture: If true, the listener only get's called during the CAPTURING_PHASE of event flow. Returns: void Method of: CrossBrowserElement Library file: cbe_event.js Top ## removeEventListener Description: Remove the listener from this element. The arguments must be the same as were passed to addEventListener(). Syntax: removeEventListener(sType, xListener, bCapture) sType: string, one of the supported events xListener: Listener function reference. bCapture: If true, the listener only get's called during the CAPTURING_PHASE of event flow. Returns: void Method of: CrossBrowserElement Library file: cbe_event.js Top ## createElement Description: Create a new Element object and its associated CrossBrowserElement object. This should be followed by a call to appendChild. This method can be derefereced by any CrossBrowserElement object, but it is more appropriate to use document.cbe, like this: document.cbe.createElement("DIV"). Syntax: createElement(sEleType) sEleType: a string such as "DIV" or "SPAN". Returns: an Element object, or null if the native document.createElement() does not exist. Method of: CrossBrowserElement Library file: cbe_core.js Browser Support: Opera6 does not support dynamic element creation. Top ## appendChild Description: Append the argument to this object's element's child list. This calls the native appendChild. This is to be used after a call to document.cbe.createElement(). Syntax: appendChild(oElement) oElement: Element object to be appended to this object's element's child list. Returns: oElement or null if the native appendChild() does not exist. Method of: CrossBrowserNode Library file: cbe_core.js Browser Support: Opera6 does not support dynamic element creation. Example:
    <html>
    <head>
    <style type='text/css'>
    .clsCBE {
      position:absolute; visibility:hidden;
      width:100%; height:100%; clip:rect(0,100%,100%,0);
    }
    </style>
    <script type='text/javascript' src='cbe_core.js'></script>
    <script type='text/javascript'>
    function windowOnload() {
      var foo = cbeGetElementById('FOO'); // foo is of type Element
      with (foo.cbe) {
        color('#FFFFFF');
        background('#008000');
        resizeTo(300,300);
        moveTo('center');
        show();
      }
      var bar = document.cbe.createElement("DIV"); // bar is of type Element
      bar.id = 'BAR'; // don't omit this step
      // bar.style.position is now equal to 'absolute',
      // if you want it to be relative, make that assignment here
      foo.cbe.appendChild(bar);
      with(bar.cbe) {
        color('#000000');
        background('#FFFF00');
        resizeTo(100,200);
        moveTo('center');
        innerHtml('bar');
        show();
      }
    }
    </script>
    </head>
    <body>
    <div id='FOO' class='clsCBE'>foo</div>
    </body>
    </html>
Top ## cbeDegrees Description: Converts radians to degrees. Syntax: cbeDegrees(iRad) iRad: Radians to be converted to degrees Returns: integer Method of: window Library file: cbe_util.js Top ## cbeEval Description: Evaluates the argument, which can be a string or a function reference. If it is the latter, any following arguments are passed to the called function. Syntax: cbeEval(xExpression [, arg1, ...]) xExpression: string or function reference arg1: optional arguments to the function call Returns: void Method of: window Library file: cbe_core.js Top ## cbeGetCookie Description: Get the value of the cookie name. Syntax: cbeGetCookie(sName) sName: The name of the cookie to get. Returns: string Method of: window Library file: cbe_util.js Top ## cbeGetElementById Description: Return a reference to the native Element object with id equal to the argument. Syntax: cbeGetElementById(sId) sId: the id string of the element Returns: native Element object reference or null if invalid id Method of: window Library file: cbe_core.js Browser Support: For NN4 and IE4 (where document.getElementById does not originally exist) a property named getElementById is added to the document object and assigned a reference to cbeGetElementById(). In other browsers when you call document.getElementById(), cbeGetElementById() is not called, but the native document.getElementById() is called. Usually this works out okay because all you want is an Element reference. But here are some advantages to calling cbeGetElementById() directly. If the argument is the value of window.cbeWindowId, the window object is returned. If the argument is the value of window.cbeDocumentId, the document object is returned. If the argument is not found as an id of an element, all form names and ids are searched, if it is still not found, all image names and ids are searched - including the names of the Image objects created with cbeNewImage(). Top ## cbeGetFormByName Description: Return an object reference to the form with sName. You can call cbeGetElementById() instead of this. Syntax: cbeGetFormByName(sName) sName: The value of an id or name attribute of a form element. Returns: Reference to form object or null if sName is invalid. Method of: window Library file: cbe_util.js Top ## cbeGetImageByName Description: Return an object reference to the Image with sName. You can call cbeGetElementById() instead of this. Syntax: cbeGetImageByName(sName) sName: The value of an id or name attribute of an Image element or an Image object created with cbeNewImage(). Returns: Reference to Image object or null if sName is invalid. Method of: window Library file: cbe_util.js Top ## cbeGetNodeFromPoint Description: Return a reference to the CrossBrowserElement object that has the highest z-index of all CrossBrowserElement objects that contain the point. Syntax: cbeGetNodeFromPoint(iX, iY) iX: x coordinate of target point iY: y coordinate of target point Returns: A CrossBrowserElement object reference. Method of: window Library file: cbe_event.js Top ## cbeGetURLArguments Description: If the end of the current URL has name/value pairs, return an array of the values. The array can be indexed with the name. The values are all of type string. Syntax: cbeGetURLArguments() Returns: array of string Method of: window Library file: cbe_util.js Top ## cbeHexString Description: Convert a number to a hex string with the specified number of digits and the optional prefix. Syntax: cbeHexString(uN, uDigits, sPrefix) uN: The number to convert to a string. uDigits: The number of digits in the result. sPrefix: A string that is prepended to the result. Returns: string Method of: window Library file: cbe_util.js Snippet: This function cycles an element through random background colors for the time specified.
    function randomColors(id, elapsedTime) {
      if (elapsedTime > 0) {
        elapsedTime -= 125;
        setTimeout("randomColors('"+id+"',"+elapsedTime+")", 125);
        var newColor = cbeHexString(Math.random() * 0xffffff, 6, '#');
        window.status = 'color: '+newColor + ', time: '+elapsedTime;
        document.getElementById(id).cbe.background(newColor);
      }
    }
Top ## cbeMouseMoveStatus Description: Install a mouseMove event listener that displays the absolute mouse position and information about the CrossBrowserElement object under the mouse cursor on the status bar. This is a toggle, call it again to remove the listener. Currently the following is displayed: MOUSE: X: e.pageX Y: e.pageY OBJECT: ID: e.cbeTarget.id P: e.cbeTarget.parentNode.id L: e.cbeTarget.left() T: e.cbeTarget.top() X: e.cbeTarget.pageX() Y: e.cbeTarget.pageY() Z: e.cbeTarget.zIndex() W: e.cbeTarget.width() H: e.cbeTarget.height() B: e.cbeTarget.background() Syntax: cbeMouseMoveStatus() Returns: void Method of: window Library file: cbe_debug.js Top ## cbeNewImage Description: Create a new Image object with the given arguments. The object is stored in the array cbeImageObj, and the name is stored in the array cbeImageName. This is useful for preloading images. Also see cbeSetImage(). Syntax: cbeNewImage(sName, sUrl [, uWidth, uHeight]) sName: a name which can later be used with cbeSetImage() sUrl: the URL of the image file uWidth: width of image uHeight: height of image Returns: Image object reference or null if sURL is invalid. Method of: window Library file: cbe_util.js Top ## cbeDebugWindow Description: Open, close, or refresh the Debug Window. This window provides development/debugging support. It shows the object tree for the current page, the properties for the selected object, provides a command line for calling methods of the selected object, and provides an area where the application can display messages. Select an object by clicking it's id in the object tree, or by clicking on the object itself on the application page. Some of the selected object's properties and method values are then displayed. You can call a method of the selected object by typing the method and it's arguments into the text field provided and pressing Enter or clicking the Call button. For example, type this: hide() and click Call. The selected object will be hidden. Type this: background('#cccccc') and click Call. The background color of the selected object will change. Your application script can pass a string to cbeDebugMsg() and it will be displayed in the message area of the debug window. Syntax: cbeDebugWindow([sBaseUrl]) sBaseUrl: the base url to the file cbe_debug.html, for example: "./cbe/". It must have a trailing slash unless it's the empty string. Returns: void Method of: window Library file: cbe_debug.js Dependencies: cbe_core.js, cbe_event.js Top ## cbeRefWindow Description: Open or close the Reference Window. Syntax: cbeRefWindow([sBaseUrl]) sBaseUrl: the base url to the file cbe_reference.html, for example: "./cbe/". It must have a trailing slash unless it's the empty string. Returns: void Method of: window Library file: cbe_debug.js Dependencies: cbe_core.js Top ## cbePad Description: Prepend or append sPadChar to sStr until the resulting string has uFinalLen characters. This is useful for formatting a string before displaying it. Syntax: cbePad(sStr, uFinalLen, sPadChar, bLeft) sStr: the string to be padded uFinalLen: the number of characters in the result sPadChar: the character that is added as padding bLeft: if true then prepend, else append. Returns: the modified argument sStr Method of: window Library file: cbe_util.js Top ## cbePropagateEvent Description: This is used in the CBE implementation of the DOM2 event model. The event is propagated throughout the event target's parent chain in the three event phases. To dispatch the event to each node's listeners, each node's dispatchEvent() method is called. Syntax: cbePropagateEvent(oCrossBrowserEvent) oCrossBrowserEvent: a CrossBrowserEvent object Returns: void Method of: window Library file: cbe_event.js Top ## cbeRadians Description: Converts degrees to radians. Syntax: cbeRadians(iDeg) iDeg: the number to be converted Returns: integer Method of: window Library file: cbe_util.js Top ## cbeSetCookie Description: Store a value in a cookie on the local machine. This function adds "path=/" so that all pages on the site can read and write this cookie. Cookies have these limitations: (1) 300 total cookies in the cookie file. (2) 4 KB per cookie, for the sum of both the cookie's name and value. (3) 20 cookies per server or domain. Syntax: cbeSetCookie(sName, sValue [, dExpire]) sName: the cookie name sValue: the value to store in the cookie dExpire: the expiration date of this cookie, if null it expires at the end of the current browser session Returns: void Method of: window Library file: cbe_util.js Browser Support: Note that Opera6 doesn't allow cookies while viewing a site on the local machine. Snippet: The following sets a cookie that expires one year from the current date.
    function SetOneYearCookie(name, value) {
      var today = new Date();
      var expires = new Date();
      expires.setTime(today.getTime() + 1000*60*60*24*365);
      cbeSetCookie(name, value, expires);
    }
Top ## cbeSetImage Description: Assign the source's src property to the target's src property. Syntax: cbeSetImage(sTarget | oTarget, sSource | oSource) Target: name string or image object whose src property will be assigned the value of the src property of Source Source: name string or image object Returns: void Method of: window Library file: cbe_util.js Top ## cbeShowProps Description: Open a window and display the object's properties and, optionally, their values. Syntax: cbeShowProps(oObj, sObjName, bShowValues) oObj: the object whose properties will be enumerated sObjName: the object identifier as a string bShowValues: if true, most of the properties' values will be shown. Returns: void Method of: window Library file: cbe_debug.js Browser Support: Opera6 does not support enumeration of object properties. Top ## cbeTraverseTree Description: Executes a preorder traversal on the object tree beginning at oStart node. Syntax: cbeTraverseTree(sOrder, oStart, fVisit) sOrder: currently only 'preorder' is supported. Postorder traversal can be added if you need it. oStart: the CrossBrowserElement object at which to begin the traversal fVisit: the visit function must return true (to continue traversal) or false (to halt traversal). It is passed the following arguments. node: the current CrossBrowserElement object in the traversal level: this number indicates how deep the current object is in the tree. oStart node has level equal to zero. branch: this number indicates the current subtree relative to oStart beginning at zero. Returns: void Method of: window Library file: cbe_util.js Snippet: The following is from the Debug Window html file. It displays the complete CBE object tree.
    var sTree;

    function printTree() {
      sTree = "";
      window.opener.cbeTraverseTree(
        'preorder',
        window.opener.self.cbe,
        printTreeVF
      );
      document.write(sTree);
    }

    var levelFlag = new Array();

    function printTreeVF(node, level, branch) {
      levelFlag[level] = node.nextSibling ? true : false;
      for (var i=0; i < level-1; ++i) {
        if (levelFlag[i+1]) sTree += '| ';
        else sTree += '  ';
      }
      if (level) sTree += "|_";
      sTree +=
        ("<a href=\"javascript:inst('" + node.id+ "')\">"
        + node.id + "</a><br>");
      return true;
    }
Top ## getElementById Description: Return a reference to the native Element object with id equal to the argument. Syntax: getElementById(sId) sId: the id string of the element Returns: native Element object reference or null if invalid id Method of: document Library file: cbe_core.js Browser Support: See the notes on cbeGetElementById(). Top ## preventDefault Description: An event listener can call this to prevent any default action resulting from the event. Syntax: preventDefault() Returns: void Method of: CrossBrowserEvent Library file: cbe_event.js Top ## stopPropagation Description: An event listener can call this to stop subsequent propagation of the event. The event will still complete it's dispatch on the current node. Syntax: stopPropagation() Returns: void Method of: CrossBrowserEvent Library file: cbe_event.js Top ## cbeDebugMsg Description: Display the argument in the textarea on the Debug Window. Also see cbeDebugWindow(). Syntax: cbeDebugMsg(sMsg) Returns: void Method of: window Library file: cbe_debug.js Top ## cbeTileWindows Description: Tile the Debug, Reference and application windows. The application window is the window from which the call is made. Syntax: cbeTileWindows() Returns: void Method of: window Library file: cbe_debug.js Dependencies: cbe_core.js Browser Support: This assumes you are using a browser in SDI mode. Top ## Parameter Syntax Any parameter in square brackets is optional. The OR symbol '|' is used to indicate a choice of two different parameters. Each parameter has a data type prefix which will be one of the following. b - boolean i - signed integer u - unsigned integer s - string c - string specifying a color, preceded with '#' (use cbeHexString() to convert numbers to color strings) d - date object o - object reference f - function reference x - either a string that can be evaluated, or a function reference. cbeEval() accepts x arguments