Categories:

Dynamic Content in NS 4

Dynamic content in the ancient NS 4 is archived using a combination of two old methods and a choice between two new tags. The old methods are document.write() and document.close(), while the new tags, <layer> or an absolutely positioned <div>. For your information, NS4 tends to favor layers over divs.

Here are the two methods you'll be needing

Dynamic content properties of NS 4
layer.document.write()   Writes new content to a layer
layer.document.close()   Closes the document stream of the layer

Where "layer" refers to the name or id of the <layer> in question, as designated by it's name or id attribute, respectively.

Check out the following demonstration, which changes a layer's content on button press:

<script type="text/javascript">
function changeit(){
document.test.document.write("<big>How are you doing?</big>")
document.test.document.close()
}
</script>

<LAYER id="test" width=200px 
    height=20px><big>My name is Bob</big></LAYER>

<br><br><form>

    <input type="button" onClick="changeit()" value="Click here">

    </form>

Example:

My name is Bob

As you can see, to access the layer, we use the document object followed by the name of the layer. To write to it, we use document.write() and document.close() on top of the layer.

-The <ilayer> tag

One problem that may arise when using LAYERS to display content is that the content is displayed out of context from the rest of the document, positioned according to absolute left and top coordinates. This is problematic should you wish to display the dynamic content inline (like normal text or images). There is a solution- or workaround- however, and that is to use <ILAYER> in conjunction with <LAYER>. The former tag allows us to "anchor" the later, so the layer is pulled downed and displayed according to whereever it's positioned on the page.

Let's modify the above example to incorporate <ILAYER>:

<script>
function changeit(){
document.anchorit.document.test.document.write("<big>How are you doing?</big>")
document.anchorit.document.test.document.close()
}
</script>
<ILAYER id="anchorit" width=200px height=20px><LAYER id="test" width=200px height=20px><big>My name is Bob</big></LAYER></ILAYER>
<br><br><form>
<input type="button" onClick="changeit()" value="Click here">
</form>

Notice the changes in syntax to accessing and writing new content to the layer now- we first access the anchorit ilayer, then it's document, then the test layer.

For the most part, you should couple <ILAYER> with <LAYER> when rendering on-the-fly content. The source code for the first example actually uses the above, since I want to display the resulting demo inline on the page.