DHTML Tutorials

Dynamic content in the ancient NS 4 is 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.

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</layer>

example 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=150px 
    height=20px><big>This is Nitish</big></LAYER>
<br><br><form>
    <input type="button" 
	onClick="changeit()" value="Click here">
    </form>

syntax

The basic syntax of the <layer> tag can't be simpler (as if any tag in HTML is complicated!):

<layer>Text inside layer</layer>

The <layer> tag is a content tag, which means you can add into it content . After that try inserting the above code onto your page. you will notice that the text inside the layer floats above other text, and overlaps them.

Layer attributes

id The name of the layer, used to identify it in your script
left The position of the layer in relationship to the x coordinates
top The position of the layer in relationship to the y coordinates.
width The width of the layer, in px or %
height The height of the layer, in px or %
bgColor The background color of the layer.
background The background image of the layer.
src The external html document contained inside the layer

Layre Example code

<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>This is Nitish</big></LAYER></ILAYER>
<br><br><form>
<input type="button" onClick="changeit()"
value="Click here">
</form>