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!
-Tutorial
Introduction
-What
is DHTML?
-DHTML
in NS- The <layer> tag
-DHTML
in IE 4
-Dynamic Content
-Moving
elements around in the document
-Creating
cross-browser DHTML
-DHTML
resources
Discussion - Client Side Scripting
Dynamic Content