|
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!
| 
