Layer Writing

The contents of your layers (the text and HTML) can be re-written like a variable by using a trick. It's well known that Internet Explorer has the ability to change what's inside a DIV tag, but you can do a similar thing in Netscape - and that's to use document.write's to re-write the entire layer.

Internet Explorer 4.0:

In Explorer, you can access the HTML inside a DIV tag (or any other tag for that matter) by writing:


document.all.divID.innerHTML = "your new text"

Where divID is the ID of the DIV tag you want to change. You can also write it another way which I prefer more:


document.all["divID"].innerHTML = "your new text"

This way it evaluates "divID" as a string which will be more useful for making it cross-browser capable.

Netscape Navigator 4.0:

Since each layer is essentially it's own document, it has most of the capabilities that the main document does. Importantly for this lesson you can re-write what's in that document.

Now to normally re-write a document, you'd use the document.write() command for the text, and the document.close() command to signal that the writing process has finished:


document.open()

document.write("my text here")

document.close()

For a CSS layer, you can use the Netscape Layers() array before using document.write() and document.close():


document.layers["divID"].document.open()

document.layers["divID"].document.write("my text here")

document.layers["divID"].document.close()

Putting Them Together

The syntax differences between IE and Netscape lend themselves very nicely to being included in one generic function that can do both at the same time:


function layerWrite(id,nestref,text) {

	if (ns4) {

		if (nestref) var lyr = eval('document.'+nestref+'.document.'+id+'.document')

		else var lyr = document.layers[id].document

		lyr.open()

		lyr.write(text)

		lyr.close()

	}

	else if (ie4) document.all[id].innerHTML = text

}

Using this function all you have to do is tell it what layer to change, and what text to change it too:


layerWrite("mylayer",null,"my text here")

View writing1-function.html for a layer-writing example

The DynLayer write() Method

If the layer is also a DynLayer, what you can do is use the following method to write the contents of a layer:


// DynLayer Write Method

// copyright Dan Steinman 1998

// http://www.dansteinman.com

function DynLayerWrite(html) {

	if (ns4) {

		this.doc.open()

		this.doc.write(html)

		this.doc.close()

	}

	else if (ie4) {

		this.event.innerHTML = html

	}

}

To implement this method you'll have to assign the write method to your DynLayer before using it:


mylayer = new DynLayer('mylayerDiv')

mylayer.write = DynLayerWrite

mylayer.write('my new content goes here')

View writing2-method.html for a DynLayer write method example

Home Next Lesson: Changing Styles
copyright 1998 Dan Steinman