DHTML Tutorials

Dynamic Content In NS4
Previous Home Next

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.

  1. layer.document.write() Writes new content to a layer.
  2. 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>
Previous Home Next