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) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id+'.document') : 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
| Home | Next Lesson: Changing Styles |