X-Objects: Element Width and Height

Copy found at Wayback Machine archive.

In addition to being able to change an HTML element’s position within a page, or hide or show the element, you can also use the X-Objects to change the HTML element’s width and height. The X-Objects interface methods to control width and height are:

• objSetWidth: set an element’s width
• objGetWidth: get an element’s width, if set
• objSetHeight: set an element’s height
• objGetHeight: get an element’s height, if set
• objResizeBy: resize an element with a given height and width

As with the movement interface methods, Navigator 4.x has unique method implementations for all but the objResizeBy method. Unlike those for the DOM compatible browsers (IE and Mozilla/Navigator 6.0), the Navigator 4.x object methods set width properties directly on the objects rather than through the use of a Style object:

// get element's width
function nsobjGetWidth() {
	return this.css2.clip.width;
}

// get element's height
function nsobjGetHeight() {
	return this.css2.clip.height;
}

// set element's width
function nsobjSetWidth(width) {
	this.css2.clip.width = width;
}

// set element's height
function nsobjSetHeight(height) {
	this.css2.clip.height = height;
}

IE and Mozilla/Navigator 6.0 apply width and height changes directly to the Style object associated with the object:

// get element's width
function domGetWidth() {
        var wd = parseInt(this.css2.style.width);
	return wd;
}

// get element's height
function domGetHeight() {
        var ht = parseInt(this.css2.style.height);
	return ht;
}

// set element's height
function domSetHeight(height) {
	this.css2.style.height = height + "px";
}

// set element's width
function domSetWidth(width) {
	this.css2.style.width = width + "px";
}

All of the X-Objects use the same implementation for the method objResizeBy:

function domResizeBy(wincr,hincr) {
   var wdth = this.objGetWidth();
   wdth += wincr;
   this.objSetWidth(wdth);

   var ht = this.objGetHeight();
   ht += hincr;
   this.objSetHeight(ht);
}

Testing Element Sizing

I created a Web page that uses the X-Object width and height methods. The page has a Web form and a test block created within a CSS Positioned DIV block. In the form, buttons are used by the client to shrink or grow the test block horizontally (through the width methods), or vertically (through the height methods).

The BODY contents of the test page has the following:

<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="Shrink Block Horizontally"
    onclick="decr_width()"> 
<INPUT type="button" value="Grow Block Horizontally"
    onclick="incr_width()"><p>
<INPUT type="button" value="Shrink Block Vertically"
    onclick="decr_height()"> 
<INPUT type="button" value="Grow Block Vertically"
    onclick="incr_height()"><p>
</center>
</FORM>
</DIV>

<DIV id="info" style="position:absolute;
left: 250; top: 180; width: 300;
height: 300;  background-color:red;
layer-background-color: red">
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements:
   a header and a paragraph
</p>
</DIV>

The JS to perform the DHTML effects based on the choices the user makes from the form elements is:

<SCRIPT language="javascript"
type="text/javascript">
<!--
// increase width
function incr_width() {
   var wdth = theobjs["info"].objGetWidth();
   wdth+= 10;
   theobjs["info"].objSetWidth(wdth);
}

function decr_width() {
   theobjs["info"].objResizeBy(-10,0);

}
// move element up and down
function incr_height() {
   var top = theobjs["info"].objGetHeight();
   top+= 10;
   theobjs["info"].objSetHeight(top);
}

function decr_height() {
   theobjs["info"].objResizeBy(0,-10);
}

//-->
</script>

As you can see from the code, the DHTML effects based in this example are created using a combination of objGetWidth and objSetWidth, objGetHeight and ObjSetHeight, and objResizeBy. Access the Sizing example for yourself.