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.