Categories:

Example- Rich HTML Slideshow

Are you ready to put 1 and 1 together to create something useful? Revisiting what we talked about in the beginning, how about a DHTML slideshow that rotates and displays regular HTML content on your page?

<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Dynamic Content:
<div class="dyncontent" style="display: block">First scroller content (visible)</div>
<div class="dyncontent">Second scroller content</div>
<div class="dyncontent">Third scroller content</div>

The rest of your page.

Example:

Dynamic Content:

Visit JavaScript Kit for comprehensive JavaScript tutorials and scripts!
Need help on web coding? Interact with other coders at CodingForums.com
Freewarejava.com, your place to find free Java applets and resources!

Pretty cool eh? There's not much new here. We wait until the entire page has loaded first to gather up all the elements on the page with class="dyncontent". Then the fun begins. By using some simple logic, the current message in line to be shown and previous message already shown is kept track of. Then by manipulating the two elements' display property, we can display each participating message one at a time.

Finally, here are two examples from Dynamic Drive that use the exact technique discussed here to rotate and display HTML content easily:

-ProHTML Scroller
-Multi-Part content script