Writing into layers

On this page you'll find the script you need to dynamically write new text and HTML into an element. Not surprisingly, Netscape 4 has a very buggy implementation that almost destroys the practical value of this script.

Example

First of all, try the script. Fill in the text that should appear in the testlayer and press 'Write text'. You may also add HTML tags.

The script

This is the Netscape 4 compatible script:

function writit(text,id)
{
	if (document.getElementById)
	{
		x = document.getElementById(id);
		x.innerHTML = '';
		x.innerHTML = text;
	}
	else if (document.all)
	{
		x = document.all[id];
		x.innerHTML = text;
	}
	else if (document.layers)
	{
		x = document.layers[id];
		text2 = '<P CLASS="testclass">' + text + '</P>';
		x.document.open();
		x.document.write(text2);
		x.document.close();
	}
}

and it works on this element:

<div class="testclass" id="test">Testlayer</div>

For Netscape 4 (and only for Netscape 4) you have to give the element an absolute position:

#test {position: absolute;
	top: 400px;
	left: 80%;
	width: 15%;
	padding: 0px;
}

Explanation

The purpose of the script is to open the element with ID="test" and to write new content into it. The text to be written is handed to the script and put into the variable text; the ID of the target element is put in id.

function writit(text,id)
{

In this page the function is called like:

writit(document.forms[0].text.value,'test');

Of course we'll have to write three separate scripts, one for each DOM. So let's review what's necessary for each DOM:

Level 1 DOM

First of all the Level 1 DOM (Netscape 6, Explorer 5).

	if (document.getElementById)
	{

By using innerHTML we can write text and HTML tags into an object (a layer, for instance). First get the element and put it in x.

		x = document.getElementById(id);

Then we have to solve a browser bug. In Explorer 5.1 and higher on Mac (but not in 5.0), writing new text into the layer causes the layer to become very large. To solve this bug we first have to make the innerHTML entirely empty, and only after that add the new text. This operation is harmless in all other browsers.
(Trick discovered by Richard Meijer)

		x.innerHTML = '';

Now we write the text to the innerHTML of the layer:

		x.innerHTML = text;
	}

document.all

The IE4 DOM works the same.

	else if (document.all)
	{

Get the element

		x = document.all[id];

and change its innerHTML

		x.innerHTML = text;
	}

document.layers

	else if (document.layers)
	{

Then for Netscape 4. Not surprisingly, the whole implementation of Netscape 4 sucks in a really major way. Some points that we'll have to remember:

• The target element must have a position: absolute defined in the style sheet, so you are required to place the target element at an absolute position in the page.
• As soon as the new text is written into it, the target element loses all style information. To circumvent this, I write the text plus a surrounding <P> with the correct class into the target element.
• Writing HTML tags into the layer may not work.

First get the correct element:

		x = document.layers[id];

Secondly, create a Netscape 4 specific output which places the text inside a P with CLASS="testclass" (the same class that the target element has).

		text2 = '<P CLASS="testclass">' + text + '</P>';

Then the actual writing: open the target element for writing, write text2 into it, then close it again.

		x.document.open();
		x.document.write(text2);
		x.document.close();
	}
}

Getting rid of Netscape 4

If you decide that this script doesn't have to work in Netscape 4, you solve many problems at once. Remove the else if (document.layer) bit from the script, give the target element any position you want and you've got a really nice effect without all the silly Netscape 4 bugginess.