Copy found at Wayback Machine.
All of the X-Objects have several methods for handling visibility and movement:
- objSetLeft: set the left position of the element
- objSetTop: set the top position of the element
- objGetLeft: get the current left position of the element, if set
- objGetTop: get the top position of the element, if set
- objMoveRelative: move the object by a given horizontal and vertical change, relative to current position
- objMoveAbsolute: move the object, absolutely, by given horizontal and vertical values
- objHide: hide the object
- objShow: show the object
- objGetVisibility: show the object’s current visibility
The Navigator 4.x implementations of all of these interface methods is unique to this browser and version except for objMoveRelative and objMoveAbsolute, which are shared with the DOM and IE implementations.
The Navigator 4.x implementations of the movement and visibility methods are:
// hide element
function nsobjHide() {
this.css2.visibility = "hidden";
}
// show element
function nsobjShow() {
this.css2.visibility = "inherit";
}
// element's left position
function nsobjGetLeft() {
return this.css2.left;
}
// element's top position
function nsobjGetTop () {
return this.css2.top;
}
// set element's top position
function nsobjSetTop(top) {
this.css2.top = top;
}
// set element's left position
function nsobjSetLeft(left) {
this.css2.left = left;
}
As stated in the introduction, the IE-specific and the DOM objects (which Mozilla/Navigator 6.0 use) share much of the same interface implementations. The reason this can occur is because of a key shared concept between both browsers — all CSS properties are set through one specific object, the style object. Each HTML element has a property “style”, a reference to the Style object associated with that element and which contains all CSS settings for the element. Based on this, the implementations for movement and visibility for DOM-compatible browsers are:
// element's left position
function domGetLeft() {
var lt = parseInt(this.css2.style.left);
return lt;
}
// element's top position
function domGetTop () {
var tp = parseInt(this.css2.style.top);
return tp;
}
// set element's top position
function domSetTop (top) {
this.css2.style.top = top + "px";
}
// set element's left position
function domSetLeft(left) {
this.css2.style.left = left + "px";
}
// hide element
function domHide() {
this.css2.style.visibility = "hidden";
}
// show element
function domShow() {
this.css2.style.visibility = "visible";
}
The DOM compliant methods need to specify a unit of measurement as well as the numeric value for the new values. The X-Objects use pixels (px) for all of the DHTML effects.
The Navigator 4.x and the DOM-compatible browsers (IE and Mozilla/Navigator 6.0) share two method implementations, domMoveRelative and domMoveAbsolute, as these methods are higher-level implementations that call existing lower-level object methods to perform the actual movements:
// make absolute move
function domMoveAbsolute(newleft, newtop) {
this.objSetLeft(newleft);
this.objSetTop(newtop);
}
// move relative to current location
function domMoveRelative(left, top) {
this.objSetLeft(left + this.objGetLeft());
this.objSetTop(top + this.objGetTop());
}
By calling the exposed interface methods within the X-Object implementation, the correct version of the interface implementation is used for the movement. So, from Navigator 4.x, the left and top methods invoked when using objSetLeft and objSetTop are nsobjSetLeft and nsobjSetTop; from DOM-compatible browsers, the methods invoked are domSetLeft and domSetTop.
Now that we’ve provided the interface implementations for movement and visibility, let’s try them out.
Testing the implementations
I created an HTML page that contains a form with several buttons and a test block that is moved or hidden based on the user pushing the form buttons. The Body of the page contains the form and the test block:
<BODY onload="create_objects()">
<DIV style="position:absolute; left:10;
top:10; background-color: yellow;
layer-background-color: yellow; padding-top: 20px;
width: 500; height:150; clip: rect(0,500,150,0)">
<form action="">
<center>
<INPUT type="button" value="Move Block Left"
onclick="move_left()">
<INPUT type="button" value="Move Block right"
onclick="move_right()"><p>
<INPUT type="button" value="Move Block Up"
onclick="move_up()">
<INPUT type="button" value="Move Block Down"
onclick="move_down()"><p>
<INPUT type="button" value="Hide Block"
onclick="hide()">
<INPUT type="button" value="Show Block"
onclick="show()">
<INPUT type="button" value="Show Visibility"
onclick="get_visibility()">
</center>
</FORM>
</DIV>
<DIV id="info" style="position:absolute;
left: 250; top: 180; width: 300;
height: 200; background-color:red;
layer-background-color: red; clip: rect(0,300,200,0)">
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements:
a header and a paragraph
</p>
</DIV>
</BODY>
Notice that the test block is positioned using absolute CSS positioning. This is necessary to access the DIV block with Navigator 4.x. Also, notice that the block has a reference to a CSS attribute, layer-background-color, that is not a valid CSS attribute. This is again necessary for Navigator 4.x in order for the background color to fit the block width and height, rather than just being background for the block contents.
| Notice in the example that I’m not using units with the positional elements (i.e. using top: 180 instead of top: 180px) in the stylesheet settings. This was a bad habit I got into and one you shouldn’t get into.
You’ll find that this can cause problems with IE 6.0. You’ll also find that if you use standard mode with Mozilla (using a particular doctype of HTML strict or HTML transitional), that the examples won’t work at all. Read more on Mozilla’s standard and “quirky” modes at Mozilla – reporting a bug. |
The HTML page’s HEAD section contains the reference to the X-Objects script file and the DHTML code to implement the functions of the form buttons. These functions move the test block to the right or left, up or down, or show and hide the block. One last form button retrieves the current visibility setting for the block. The implementations of these functions are:
<SCRIPT src="cbobjects.js" language="javascript"
type="text/javascript">
</SCRIPT>
<SCRIPT LANGUAGE = "JAVASCRIPT"
type="text/javascript">
<!--
// move element left
function move_left() {
var lft = -10;
theobjs["info"].objMoveRelative(lft,0);
}
// move element right
function move_right() {
var lft = theobjs["info"].objGetLeft();
lft += 10;
theobjs["info"].objSetLeft(lft);
}
// move element up
function move_up() {
var top = theobjs["info"].objGetTop();
top+= -10;
theobjs["info"].objSetTop(top);
}
// move element down
function move_down() {
var top = theobjs["info"].objGetTop();
top += 10;
var lft = theobjs["info"].objGetLeft();
theobjs["info"].objMoveAbsolute(lft,top);
}
// hide element
function hide() {
theobjs["info"].objHide();
}
// show element
function show() {
theobjs["info"].objShow();
}
function get_visibility() {
alert(theobjs["info"].objGetVisibility());
}
//-->
</script>
You can access the Movement and Visibility testing page, using Internet Explorer 4.x and up, Navigator 4.x and up, and Mozilla.
I converted one of my existing DHTML pages to use the X-Objects. This page contains an Animated Menu using both the movement and visibility methods, and a timer to create the animation effect. Once you open the page, the menu animation starts. To see the code used, View source once the example is opened.
Another existing DHTML example is relatively simple, using hidden DIV blocks to create a “shadow” effect for Web page text. The example moved as is to the new X-Objects (as did the animated menu, above) without any modifications. Check out the Shadow Effect example, using View source once the example is opened to see the script.