Dynamic Content

If you're not yet scared off by all the differences in syntax and functionality between DHTML in NS 4 and IE 4, you're ready to learn how to make content on your page dynamic, or change on demand!

-Dynamic content in NS 4

Changing content in NS 4 involves- you guessed it- the layer tag. All layers are treated by the NS browser as a separate entity from the rest of the page, with their own document object (which in turn contains other objects supported by document). This is very important to understand, since the fact that layers contains another document object is what makes it possible to create dynamic content in NS. I'll first construct a basic layer, then show how to change the contents inside of it:

<layer id="alayer" width=100% height=30></layer>

Ready to access the document object of the above layer? Here's the required syntax:

    
document.alayer.document

So, knowing this piece of information, I can write a script that changes the contents of the layer every 3 seconds. Look at how its done:

<script language="JavaScript1.2">
var thecontents=new Array()
thecontents[0]="How are you today?"
thecontents[1]="I am fine, thank you."
thecontents[2]="Well, nice talking to you!"
var current=0

function changecontent(){
document.alayer.document.write(thecontents[current])
document.alayer.document.close()
if (current==2) current=0
else current++
setTimeout("changecontent()",3000)
}
window.onload=changecontent
</script>

See, text is being dynamically generated and erased, without the need to reload the document!

-Dynamic content in IE 4

In IE 4, dynamic content is realized through a special property called innerHTML that exists on the <span> and <div> tag. Just set this property to a new HTML value, and the contents inside that span or div is instantly updated to the new value! I'll illustrate how it's done by modifying the above example to create dynamic content for IE 4 users:

<div id="mydiv"></div>
<script language="JavaScript1.2">
var thecontents=new Array()
thecontents[0]="How are you today?"
thecontents[1]="I am fine, thank you."
thecontents[2]="Well, nice talking to you!"
var current=0
   
function changecontent(){
mydiv.innerHTML=thecontents[current]
if (current==2) current=0
else current++
setTimeout("changecontent()",3000)
}
window.onload=changecontent
</script>

Same results, just a different way to get there!

DHTML in IE 4
Beginner's Guide to DHTML
Moving elements around in the document