Categories:

Cross browser/ version DHTML content

Creating dynamic content that functions in all modern DHTML browsers is now just a matter of picking your poison for changing content on the fly, along with some simple logic. Remember the example we saw on the very first page of this tutorial?

Example:

Here is complete source code to it:

<div id="dcontent" style="width:100%; background-color: #E2E2FC; padding-left: 5px"></div>

<script type="text/javascript">

var mycontent=new Array()
mycontent[0]=' <img src="http://javascriptkit.com/m1.gif"> Learn about JavaScript and get free scripts at <a href="http://javascriptkit.com">JavaScript Kit!</a>'
mycontent[1]=' <img src="http://javascriptkit.com/m2.gif"> Visit <a href="http://dynamicdrive.com">Dynamic Drive</a> for the best DHTML scripts and components on the web!'
mycontent[2]=' <img src="http://javascriptkit.com/m3.gif"> The <a href="http://www.cssdrive.com/">CSS Drive</a> CSS gallery and examples.'
mycontent[3]=' <img src="http://javascriptkit.com/m4.gif"> CodingForums.com- Web coding and development forums'

var i=0

function altercontent(){
if (document.all)
dcontent.innerHTML=mycontent[i];
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes()) el.removeChild(el.lastChild);
el.appendChild(htmlFrag);}

i=(i==mycontent.length-1)? 0 : i+1
setTimeout("altercontent()", 3000)
}

window.onload=altercontent

</script>

And with that we conclude this tutorial. But wait, maybe, just maybe, you are interested in learning how dynamic content is realized in a historic browser called Netscape 4. "Yes" you say? Ok then, lets kill some time and see how.