| CBE Object Reference | Cross-Browser.com |
window Methods
window Properties
document Methods
document Properties
CrossBrowserElement MethodsSize:
Clipping:
Appearance:
Position:
Animation:
Event Management:
Element Creation:
Derived from CrossBrowserNode:
CrossBrowserElement Properties
CrossBrowserElement Events
CrossBrowserEvent Methods
CrossBrowserEvent Properties
ClientSnifferJr Properties
Functions & Object MethodsclipDescription: Set the clipping (visible) area. The parameters define the corners. Syntax: clip(iTop, iRight, iBottom, iLeft)
Alternate Syntax: clip('auto')
Returns: void Method of: CrossBrowserElement Library File: cbe_core.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. 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);
}
autoClipDescription: 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)
Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. clipArrayDescription: Used internally by CBE. Returns an array of string such as: 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. clipBottomDescription: 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. clipByDescription: Add the arguments to the existing clip coordinates. Syntax: clipBy(iDT, iDR, iDB, iDL)
Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. clipHeightDescription: 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. clipLeftDescription: 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. clipRightDescription: 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. clipTopDescription: 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. clipWidthDescription: 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. scrollByDescription: Simulate scrolling by clipping and moving. Syntax: scrollBy(iDX, iDY)
Returns: void Method of: CrossBrowserElement Library File: cbe_clip.js Dependencies: cbe_core.js Browser Support: Opera6 does not support clipping. heightDescription: Set or return the element's height. Do not change the clipping area. Syntax: height([uH])
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 );
}
resizeByDescription: Add the arguments to the width and height, and clip to the resulting dimensions. Syntax: resizeBy(iDw, iDh)
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
}
resizeToDescription: 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)
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());
}
sizeByDescription: Add the arguments to the width and height. Do not change the clipping area. Syntax: sizeBy(iDw, iDh)
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
}
sizeToDescription: Set the width and height. Do not change the clipping area. Syntax: sizeTo(uWidth, uHeight)
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());
}
widthDescription: Set or return the element's width. Do not change the clipping area. Syntax: width([uW])
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 );
}
backgroundDescription: Sets the background color and, optionally, the background image. Returns the background color. Syntax: background(cBgColor [,sImage])
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);
}
}
colorDescription: Sets and returns the text color. Syntax: color([cTxtColor])
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
}
hideDescription: 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();
}
innerHtmlDescription: Replaces the innerHTML of an element with the argument. Syntax: innerHtml(sHtml)
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);
}
showDescription: 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();
}
visibilityDescription: Return false if visibility is 'hide' or 'hidden', else return true. Syntax: visibility([s | b])
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);
}
zIndexDescription: Set or get the current zIndex (stacking order). Syntax: zIndex([uNewZ])
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);
}
containsDescription: 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]]])
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;
}
}
leftDescription: 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])
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);
}
moveByDescription: Add the arguments to the current position. Syntax: moveBy(iDx, iDy)
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);
}
}
moveToDescription: Position the top left corner of the element at the given coordinate. Syntax: moveTo(iX, iY [, xEndListener ])
Alternate Syntax: moveTo(sCardinal [, iMargin [, bOutside [, xEndListener ]]])
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);
}
offsetLeftDescription: 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 offsetTopDescription: 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 pageXDescription: 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 pageYDescription: 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();
}
}
scrollLeftDescription: The number of pixels the element has been scrolled horizontally. Syntax: scrollLeft() Returns: integer Method of: CrossBrowserElement Library File: cbe_core.js scrollTopDescription: 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
);
}
topDescription: 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])
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);
}
ellipseDescription: 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])
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
);
}
parametricEquationDescription: 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])
Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js slideCornerByDescription: 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])
Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js slideCornerToDescription: This is a time-based resize - and you can specify which corner slides to the target point. Syntax: slideCornerTo(sCorner, iX, iY, uTime [, xEndListener])
Returns: void Method of: CrossBrowserElement Library file: cbe_slide2.js slideByDescription: 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])
Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js slideToDescription: 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])
Alternate Syntax: slideTo(sCardinal, iMargin, uTime [, xEndListener ])
Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js startSequenceDescription: 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])
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();
stopSequenceDescription: 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 stopSlideDescription: Stop any slide method currently executing on this element. Syntax: stopSlide() Returns: void Method of: CrossBrowserElement Library file: cbe_slide.js ExampleaddEventListenerDescription: 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)
Returns: void Method of: CrossBrowserElement Library file: cbe_event.js Snippet:
function windowOnload() {
var cbe = document.getElementById('e1').cbe;
cbe.addEventListener('drag');
}
cbeNativeAddEventListenerDescription: Add an event listener to the element. This is a cross-browser interface for native event handling. Syntax: cbeNativeAddEventListener(oEle, sType, fListener, bCapture)
Returns: void Method of: window Library file: cbe_event.js cbeNativeRemoveEventListenerDescription: Remove an event listener from the element. Syntax: cbeNativeRemoveEventListener(oEle, sType, fListener, bCapture)
Returns: void Method of: window Library file: cbe_event.js dispatchEventDescription: 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)
Returns: void Method of: CrossBrowserElement Library file: cbe_event.js removeEventListenerDescription: Remove the listener from this element. The arguments must be the same as were passed to addEventListener(). Syntax: removeEventListener(sType, xListener, bCapture)
Returns: void Method of: CrossBrowserElement Library file: cbe_event.js removeEventListenerDescription: Remove the listener from this element. The arguments must be the same as were passed to addEventListener(). Syntax: removeEventListener(sType, xListener, bCapture)
Returns: void Method of: CrossBrowserElement Library file: cbe_event.js createElementDescription: 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)
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. appendChildDescription: 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)
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>
cbeDegreesDescription: Converts radians to degrees. Syntax: cbeDegrees(iRad)
Returns: integer Method of: window Library file: cbe_util.js cbeEvalDescription: 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, ...])
Returns: void Method of: window Library file: cbe_core.js cbeGetCookieDescription: Get the value of the cookie name. Syntax: cbeGetCookie(sName)
Returns: string Method of: window Library file: cbe_util.js cbeGetElementByIdDescription: Return a reference to the native Element object with id equal to the argument. Syntax: cbeGetElementById(sId)
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.
cbeGetFormByNameDescription: Return an object reference to the form with sName. You can call cbeGetElementById() instead of this. Syntax: cbeGetFormByName(sName)
Returns: Reference to form object or null if sName is invalid. Method of: window Library file: cbe_util.js cbeGetImageByNameDescription: Return an object reference to the Image with sName. You can call cbeGetElementById() instead of this. Syntax: cbeGetImageByName(sName)
Returns: Reference to Image object or null if sName is invalid. Method of: window Library file: cbe_util.js cbeGetNodeFromPointDescription: 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)
Returns: A CrossBrowserElement object reference. Method of: window Library file: cbe_event.js cbeGetURLArgumentsDescription: 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 cbeHexStringDescription: Convert a number to a hex string with the specified number of digits and the optional prefix. Syntax: cbeHexString(uN, uDigits, sPrefix)
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);
}
}
cbeMouseMoveStatusDescription: 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:
Syntax: cbeMouseMoveStatus() Returns: void Method of: window Library file: cbe_debug.js cbeNewImageDescription: 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])
Returns: Image object reference or null if sURL is invalid. Method of: window Library file: cbe_util.js cbeDebugWindowDescription: 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])
Returns: void Method of: window Library file: cbe_debug.js Dependencies: cbe_core.js, cbe_event.js cbeRefWindowDescription: Open or close the Reference Window. Syntax: cbeRefWindow([sBaseUrl])
Returns: void Method of: window Library file: cbe_debug.js Dependencies: cbe_core.js cbePadDescription: 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)
Returns: the modified argument sStr Method of: window Library file: cbe_util.js cbePropagateEventDescription: 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)
Returns: void Method of: window Library file: cbe_event.js cbeRadiansDescription: Converts degrees to radians. Syntax: cbeRadians(iDeg)
Returns: integer Method of: window Library file: cbe_util.js cbeSetCookieDescription: 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])
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);
}
cbeSetImageDescription: Assign the source's src property to the target's src property. Syntax: cbeSetImage(sTarget | oTarget, sSource | oSource)
Returns: void Method of: window Library file: cbe_util.js cbeShowPropsDescription: Open a window and display the object's properties and, optionally, their values. Syntax: cbeShowProps(oObj, sObjName, bShowValues)
Returns: void Method of: window Library file: cbe_debug.js Browser Support: Opera6 does not support enumeration of object properties. cbeTraverseTreeDescription: Executes a preorder traversal on the object tree beginning at oStart node. Syntax: cbeTraverseTree(sOrder, oStart, fVisit)
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;
}
getElementByIdDescription: Return a reference to the native Element object with id equal to the argument. Syntax: getElementById(sId)
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(). preventDefaultDescription: 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 stopPropagationDescription: 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 cbeDebugMsgDescription: 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 cbeTileWindowsDescription: 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. Parameter SyntaxAny 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.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||