Categories
Technology

X-Objects: HTML Replacement

Copy found at Wayback Machine Archive.

HTML Replacement is functionality to replace the contents of an HTML tag. The contents could be the element’s data or could consist of one or more embedded HTML elements.

Internet Explorer has four proprietary methods to replace the contents of an HTML tag: innerHTML to replace the contents with new HTML and innerText to replace the HTML tag’s data, and outer versions of each (outerHTML and outerText). Netscape Navigator 4.x also has its own form of HTML replacement — CSS positioned DIV blocks actually come with their own document object, you can use document.write with the element to replace its contents.

The IE 4.x and up and Navigator 4.x cross-browser objects have a method, replace_html, that uses each of the browsers specific HTML replacement technique to implement the exposed functionality:

// replace html (IE)
function ieReplaceHTML(html_string) {
	this.css2.innerHTML = html_string;
}

// replace html (navigator)
function nsreplace_html(html_string) {
	this.css2.document.write(html_string);
	this.css2.document.close();
}

These methods have been left, as is, with the new X-Objects.

DOM compatible browsers have several techniques that can be used to clear or replace the contents of an element. For instance, the method removeNode was exposed in DOM Level 1 to remove a specific element, and DOM Level 2 has a new Range object, which can be used to select (and delete) a range of HTML elements. However, I haven’t yet found a W3C standard technique that can be used as innerHTML is used with IE: replacing existing contents with new contents, passed as a string to the method and that can consist of more than one HTML element. The DOM (Level 1 and 2) provides techniques to create specific HTML elements, add CSS classes to the elements, and then append or insert these elements into the existing document, but nothing on creating document elements based on element definitions within a string.

Starting with Mozilla build M16 (released June, 2000) and for Navigator 6.0 PR 2.0, innerHTML has been implemented for both of these browsers, with functionality identical to that of IE 4.x and up as far as I can see. (The innerText, outerHTML, and outerText may also be implemented, but the X-Objects only use innerHTML).

Based on this implementation, the domReplaceHTML method now reads:

// replace HTML (equivalent to innerHTML)
function domReplaceHTML(html_string) {

	this.css2.innerHTML = html_string;

}

Both IE and Mozilla M16 and up (and Navigator 6.0 PR 2.0 and up) use this new object method.

DOM compatible replacement

I did create a new method in X-Objects to provide a second way to handle HTML replacement, the objReplaceHTML method. This method has four parameters: an HTML tag name, a CSS class name, an element identifier, and element contents. Within the method, the contents of the existing element are deleted and a new HTML element is created with the provided element tag type, id, class, and contents. This new element is then appended to the current element.

The implementation for the new method for each browser type — IE, Mozilla/Navigator 6.0, and Navigator 4.x — reflects the functionality supported by each:

// replace HTML -- DOM
function domParamReplaceHTML(tag,clss,id,contents) {

    this.objHide();
    var r = this.css2.ownerDocument.createRange();
    r.selectNodeContents(this.css2);
    r.deleteContents();

    var elem = document.createElement(tag);
    elem.setAttribute("id",id);
    elem.setAttribute("className",clss);
    var txt = document.createTextNode(contents);
    elem.appendChild(txt);
    this.css2.appendChild(elem);
    this.objShow();
  }


// replace html -- IE
function ieParamReplaceHTML(tag, clss, id, contents) {
    var strng = "<" + tag + " class='" +
             clss + "' id='" + id + "'>";
    strng = strng + contents;
    strng = strng + "</" + tag +  ">";
    this.css2.innerHTML = strng;
     }


// replace html -- Navigator 4.x
function nsParamReplaceHTML(tag, clss, id, contents) {
    var strng = "<" + tag + " class='" +
                         clss + "' id='" + id + "'>";
    strng = strng + contents;
    strng = strng + "</" + tag + ">";
    this.css2.document.write(strng);
    this.css2.document.close();
    }

Notice in the code for the DOM implementation of objReplaceHTML that I hide the element contents before making the change, and then show the contents at the end of the HTML replacement. The reason for this is that I have found with Mozilla build M14, which I used for testing the new X-Objects, would not re-paint the DIV element after I added new content. The element would be added — I could see it when I minimized the browser and then maximized it, forcing a repaint — but it wouldn’t show without a forced repaint. By hiding and showing the content I’m programatically forcing a repaint of the contents.

Additionally, I also created another new interface method, this one to replace the data contents of an element. This new method, objReplaceText, is implemented only for IE and for Mozilla/Navigator 6.0 — the method provided for the Navigator 4.x implementation is a placeholder only. The code for the three implementations of objReplaceText is:

// replace text -- DOM and IE
function domReplaceText(txt_string) {

   var nodes = this.css2.childNodes;
   var node = nodes.item(0);
   node.replaceData(0,node.length,txt_string);
}

// Navigator 4.x implementation
function nsReplaceText(text_string) {
  // this function not implemented
}

This method grabs the first child node for the element, and replaces its data with the new data string.

Testing HTML Replacement

To test the new HTML replacement method, I modified an existing DHTML example to use the new X-Objects, including using objReplaceHTML. The example has two HTML forms with only one form showing at a time. Each form is contained within a CSS positioned DIV block. Pressing a button switches which form shows at a time. You can try out the Forms Example before viewing the code.

Pushing another button starts an animated effect that shows which HTML input element is mandatory for the page. An arrow moves through the form showing the mandatory items, and the name of the block is shown above the form. The form element name is the content that changes with the HTML replacement.

To make things interesting, in this example I’m using my higher-level animation objects, the Animators, in order to provide the form animation. The Animator objects do such things as control a movement from point A to point B in timed increments, creating an animated movement effect. By packaging whole animation effects (such as movement, clipping, and sliding) into objects, I can simplify the amount of code I need to create for my individual pages.

One of the Animators replaces HTML using the old replace_html method. As I’m using a new interface method for HTML replacement, objReplaceHTML, I create a new Animator that uses this method rather than the existing one — The parameterized HTML replacement Animator.

View the Animator Objects source code directly. You can also read a more detailed discussion of the Animator objects in the InterActZone article Demonstrating PhotoShop functionality using DHTML and X-Objects. This article looks at four detailed examples of using the new X-Objects to create demonstrations of PhotoShop capabilities.

Once I modified the Animator objects, I’m ready to modify my form switching example to using X-Objects.

The BODY of the example contains four separate content areas. First, the top of the document has a form with buttons used to control form page switching, showing mandatory values, and submitting the form. Each of the two forms is in its own content area, and the fourth and final content is a message stating that the form has been successfully submitted:

<BODY onload="create_objects();setup();setup_animation()">
<H2>Press the button to display the second part of the form</H2>
<form>
<input type=button value="Switch Form Pages"
                    onclick="switch_forms()">
<input type=button value="Submit Information"
	onclick="submit_form()">
<input type=button value="Show Mandatory Fields"
        onclick="play_animation()">
</form>
<DIV id="error" style="position:absolute; z-index: 3;
        top: 120; left: 150; visibility:hidden">
<p>
Missing Information
</p>
</DIV>

<DIV id="mandatory"
  style="position:absolute; z-index: 3; top: 100; left: 150;
  visibility:hidden">
<p class="mandatory" >
Mandatory Fields are:
</p>
</DIV>

<DIV id="arrow" style="position:absolute; top: -50; left: 600;
     visibility: hidden">
<img src="arrow.jpg" width=51>
</DIV>

<DIV id="one" style="position:absolute; left: 100; top: 150;
         clip: rect(0,500,400,0);
	width: 500; height: 400; background-color: lime;
        layer-background-color: lime">
<h2>Please enter information about yourself:</h2>
<form name="firstform">
<table cols=2 width=200>
<tr><td width=150>Enter Name:</td><td>
<input type="text" name="readername"
        onchange="values[0] = 1"></td></tr>
<tr><td >Street Address: </td><td>
<input type="text" name="address"
        onchange="values[1] = 1"></td></tr>
<tr><td >City:</td><td>
<input type="text" onchange="values[2] = 1"></td></tr>
<tr><td>State:</td><td>
<input type="text" onchange="values[3] = 1"></td></tr>
<tr><td >Phone: </td><td>
<input type="text" name="phone"></td></tr></table>
</form>
</DIV>

<DIV id="two" style="position:absolute; left: 100; top: 150;
          clip: rect(0,500,400,0); visibility: hidden;
	width: 500; height: 400; background-color: yellow;
        layer-background-color: yellow">
<h2>Please enter information about your Company:</h2>
<form name="secondform">
<table cols=2 width=200>
<tr><td width=150>Enter Company Name:</td><td>
<input type="text" name="readername"
    onchange="values[4] = 1"></td></tr>
<tr><td >Company Address: </td><td>
<input type="text" name="address"></td></tr>
<tr><td >City:</td><td>
<input type="text"></td></tr>
<tr><td>State:</td><td>
<input type="text"></td></tr>
<tr><td >Voice Phone: </td><td>
<input type="text" name="phone"
      onchange="values[5] = 1"></td></tr>
<tr><td >FAX: </td><td>
<input type="text" name="phone"
      onchange="values[6] = 1"></td></tr></table>
</form>
</DIV>

<DIV id="message" style="position:absolute; left: 100;
            top: 150; clip: rect(0,500,200,0);
	width: 400; height: 200; background-color: aqua;
        layer-background-color: aqua; visibility: hidden;">
<H2>Your form information has been submitted successfully</H2>
</DIV>
</BODY>

The X-Objects create_objects method is called to create the object wrappers for the page’s DIV blocks. Additionally, the animation sequences are setup through a call to the setup_animation function:

function setup_animation() {

	seq[0] = new animatorSequence();
	var anim = seq[0].newAnimator(1,50);
	anim.addAnimator(theobjs["one"],"S");
	anim.addAnimator(theobjs["arrow"],"S");
	anim.addAnimator(theobjs["mandatory"],"S");

      seq[1] = new animatorSequence();
	anim = seq[1].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",210, 600);

	anim = seq[1].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
        "<p style='color: red; font-weight: bold'>
            Personal Name</p>");

      seq[2] = new animatorSequence();
	anim = seq[2].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",240, 600);

	anim = seq[2].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
        "<p style='color: red; font-weight: bold'>
            Address</p>");

      seq[3] = new animatorSequence();
	anim = seq[3].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",270, 600);

	anim = seq[3].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
       "<p style='color: red; font-weight: bold'>
           City</p>");

      seq[4] = new animatorSequence();
	anim = seq[4].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",300, 600);

	anim = seq[4].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
       "<p style='color: red; font-weight: bold'>
          State</p>");

	seq[5] = new animatorSequence();
	var anim = seq[5].newAnimator(1,50);
	anim.addAnimator(theobjs["one"],"H");
	anim.addAnimator(theobjs["two"],"S");

      seq[6] = new animatorSequence();
	anim = seq[6].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",225, 600);

	anim = seq[6].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
        "<p style='color: red; font-weight: bold'>
         Company Name</p>");

      seq[7] = new animatorSequence();
	anim = seq[7].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",350, 600);

	anim = seq[7].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
       "<p style='color: red; font-weight: bold'>
         Company Phone</p>");

      seq[8] = new animatorSequence();
	anim = seq[8].newAnimator(5, 20);
	anim.addAnimator(theobjs["arrow"], "M",380, 600);

	anim = seq[8].newAnimator(1, 20);
	anim.addAnimator(theobjs["mandatory"],"R",
        "<p style='color: red; font-weight: bold'>
          Company FAX</p>");
}

Several Animation sequences are created to control the mandatory field display, consisting of several different animation steps. The steps control which form shows, the position of the arrow pointing out the mandatory field, and the replacement of the HTML containing the mandatory form field name. When the form button labeled “Show Mandatory Fields” is pressed, the function play_animation is called to play the animation:

var slide = 0;

function play_animation() {
      if (slide == 0)
         reset();
      seq[slide].play();
	if (slide < 8) {
		setTimeout("play_animation()",2000);
		slide++;
		}
	else {
		setTimeout("reset()", 2000);
		}
}

Two other functions are created: one to reset the display after showing the Mandatory fields; one to switch between the forms:

function reset() {
      theobjs["message"].objHide();
      theobjs["two"].objHide();
      theobjs["one"].objShow();
      theobjs["mandatory"].objHide();
	theobjs["mandatory"].
          replace_html("<p style='color:red; font-width: bold'>
                           Mandatory Fields Are:</p>");
	theobjs["arrow"].objHide();
      theobjs["arrow"].objMoveAbsolute(-50,600);
	slide = 0;
}

function switch_forms() {
	// just in case, hide the message layer
	theobjs["message"].objHide();
	if (side == 1) {
		theobjs["one"].objHide();
		theobjs["two"].objShow();
		side = 2;
		}
	else {
		theobjs["two"].objHide();
		theobjs["one"].objShow();
		side = 1;
		}
}

The last function for the page is submit_form. This function checks to see if the mandatory fields have values, and if not to provide an error message and field indicator. If all the mandatory fields have data, then a message is provided to that effect:

// form values
var values = new Array(7);
for (var i = 0; i < values.length; i++)
	values[i] = 0;

function submit_form() {
	// hide error and arrow
	theobjs["arrow"].objHide();
	theobjs["error"].objHide();
	theobjs["one"].objHide();
	theobjs["two"].objShow();
	// check out page one for mandatory fields
	if (values[0] != 1) {
		missing("one", 1);
		return;
		}
	if (values[1] != 1) {
		missing("one", 2);
		return;
		}
	if (values[2] != 1) {
		missing("one", 3);
		return;
		}
	if (values[3] != 1) {
		missing("one", 4);
		return;
		}
	if (values[4] != 1) {
		missing("two", 1);
		return;
		}
	if (values[5] != 1) {
		missing("two", 5);
		return;
		}
	if (values[6] != 1) {
		missing("two", 6);
		return;
		}

	theobjs["message"].objShow();
}

The values array elements used in the function is set when the mandatory fields are changed.

Try the example for yourself, using Internet Explorer 4.x and up, Mozilla/Navigator 6.0, or Navigator 4.x. Specifically, try out the HTML replacement by clicking on the “Show Mandatory Fields” button.

Before I leave this page, I wanted to point out something in the example just shown. Using Mozilla/Navigator 6.0, try clicking in any of the text elements in the forms that are switched — you’ll find that you can’t put the mouse cursor in these elements. However, if you try the example with IE or Navigator 4.x, you don’t have any problem with the forms.

The example is performing incorrectly not because Mozilla/Navigator 6.0 did something wrong. On the contrary, Mozilla/ Navigator 6.0 did something right, and that’s the challenge as we’ll see in the next section.

Visibility vs. Display

In the example, the forms and the success message are layered on each other. To control which form is shown at a time, the CSS visibility property is set to either “visible”, for showing the form or message, or “hidden” to hide the form or message.

This works without a hitch in IE and Navigator 4.x, primarily because these two browsers have implemented visibility as it was defined with the original CSS-P specification, submitted to the W3C a couple of years ago.

However, the visibility property with CSS2 can hide page content, but it doesn’t remove the content from the page layout — and this includes the layout even if the content is layered. So, when I “hid” any of the forms, all I’m doing is effecting their appearance not their impact on the page.

Another thing about the example is that Web page contents that are not given specific Z-order values, or are given the same Z-order value, are given implicit z-orders by the browser, and those that occur later in the page are given an implicitly higher z-order than those that occur earlier. As the example’s message block occurs last in the page, it is given a higher z-order than the two forms, even if the message block is hidden.

So, with Mozilla/Navigator 6.0 when I hide one of the forms and show the other, I still can’t access the form contents of the shown layer as this higher z-order content is “blocking” my access, though not blocking my view.

To actually hide a Web page element AND remove it from the page layout, I need to use the display CSS property instead.

I could have also changed the z-order of whichever DIV block was showing at the time — making it a higher value than the others. Then, when the block was hidden, I would reset the z-order back to a lower value.

To correct the forms example I need to add a new method to the X-Objects, objDisplay. This property sets the value of the Display to whatever is passed into the method. For my DHTML X-Browser effects, I’m using only two values for Display at this time: “block”, to show the content, and “none” to remove the content from display.

The implementation of objDisplay is the same for both IE and Mozilla/Navigator 6.0:

// display element
function domDisplay(type) {
   this.css2.style.display = type;
}

The implementation of objDisplay for Navigator 4.x checks the value of type passed to the method, and either shows or hides the element using the visibility methods:

// element display
function nsobjDisplay(type) {
   if (type == "none")
       this.objHide();
   else
       this.objShow();
}

As the CSS Display property is not implemented with Navigator 4.x, we have to use visibility with this browser. However, for layered content, the behavior is the same.

Since the underlying X-Objects implementation has changed, I also need to change my Animator objects to handle setting the display value as well as setting visibility, so another Animator type is added, the display_animator (again see the implementation in the text version of the Animator objects, above).

The example is modified to remove the visibility setting from the two forms and the message that are layered on each other. Additionally, a setup function is created to “hide” the second form and the message when the page is loaded.

function setup() {
   theobjs["two"].objDisplay("none");
   theobjs["message"].objDisplay("none");
}

By setting the display programmatically rather than using CSS style settings, the correct implementation of objDisplay is used for the specific browser. Other changes are made to the code to use objDisplay rather than objHide or objShow, as shown in the function to switch the forms:

function switch_forms() {
	// just in case, hide the message layer
	theobjs["message"].objDisplay("none");
	if (side == 1) {
	   theobjs["one"].objDisplay("none");
	   theobjs["two"].objDisplay("block");
	   side = 2;
	   }
	else {
	   theobjs["two"].objDisplay("none");
	   theobjs["one"].objDisplay("block");
	   side = 1;
	   }
}

Try out the new version of the forms example, and you’ll find that you can now access the form elements with Mozilla/Navigator 6.0, as with IE 4.x and up and Navigator 4.x.

Categories
Technology

X-Objects: Layering and Z-Order

Copy found at Wayback Machine archive.

Internet Explorer 6.x differs from IE 5.x in one very important area: In IE 6.0 and up, units must be specified with all CSS styles that take units, if you use some combination of CSS positional attributes — what combination, exactly, I haven’t been able to figure out yet. This includes width, height, as well as the positional attributes of top, left, bottom, and right. In IE 5.x and lower, as well as Mozilla and Netscape, positional attributes were given a default unit of pixel.

The index card example in this chapter didn’t specify pixels with the positional attributes, and the results were completely wrong. However, after a quick fix, the example’s just fine now. That’ll teach me to be sloppy. Units should be specified in all uses.

DHTML developers can layer HTML elements one on top of each other, using a combination of visibility to hide and show elements located in the same location, or by using the CSS z-order style attribute, or both. You’ve had a chance to see visibility, but we’ll take a look at z-order layering in this section, as well as looking at layering using both techniques.

The z-order methods exposed on the X-Objects interface are:

  • objGetZIndex – to get the element’s current z-order, if set
  • objSetZIndex – to set the element’s current z-order

Again, Navigator 4.x has unique implementations for setting and getting the z-order:

// set element's zindex order
function nsobjSetZIndex(zindex) {
	this.css2.zIndex = zindex;
}

// get element's current zindex order
function nsobjGetZIndex() {
	return this.css2.zIndex;
}

The DOM compliant versions of objGetZIndex and objSetZIndex again use the Style object to change or access the current settings:

// set element's zindex order
function domSetZIndex(zindex) {
   this.css2.style.zIndex = zindex;
}

// get element's current zindex order
function domGetZIndex(zindex) {
   return this.css2.style.zIndex;
}

Testing z-order and layering

Instead of creating new examples to test layering, I modified existing DHTML examples to use the new X-Objects.

The first example is an emulation of a graphical button that doesn’t require an HTML form, or the use of form elements. Intead, the example uses two DIV blocks, both containing the same image, but each with a different image border. One border is set using the CSS outset setting, one using the inset setting.

The two images with the different CSS borders are layered on one another. Clicking (mouse down) on the image “hides” the top image by changing its z-order to a lower order than the image in the bottom layer. The mouse up event changes the z-order of this image layer to a higher number again, returning the “button” to the unclicked state.

Try this button effect created using X-Objects by accessing the Button page. View the source to see the code for the example.

Stacked Index Card Example

A second example I modified to use the new X-Objects is a stacked index card application. A group of names are created as separate layers each stacked on the others, with only the topmost layer being visible. Clicking on the Next and Prev command texts shows the next or previous card in the “stack”. When you access the last card in the stack, a surprise occurs: the text-based card navigation icons are replaced by labeled tabs above the cards. Clicking on the tabs displays the address associated with the tab. View the Index Card Example View the source to see the code for the example.

Categories
Technology

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.