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:
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
- Rotating regular HTML content through DHTML (introduction)
- Hiding HTML content from view using CSS
- Creating custom collections out of "class" elements on the page
- Example- rich HTML scroller