By: George Chiang

May 23rd, 2004

Reader Rating: 7

One of the great pitfalls of using client side techniques, such as JavaScript, to display content on demand is the prerequisite that everything be contained in variables. This makes adding and updating the content very cumbersome.

An example would be inputting the messages to display in a JavaScript scroller -- not generally a fun experience:

<script type="text/javascript">

var message=new Array();
message[0]="<b><a href='http://www.javascriptkit.com'>Click here</a> for JavaScript Kit!</b>";
message[1]="<a href='http://www.google.com'>Google it</a>";
"
"
</script>

In this tutorial, we'll look at using DHTML to help break out from this limitation, so that ordinary HTML content on your page can be shown dynamically as your script dictates, without the need to make any changes to the content itself.

The General Idea

Here's the basic idea -- all modern browsers (IE4+/NS6+) support the CSS attribute display:none, which completely hides any content to which it's applied. By utilizing this useful CSS attribute, we can choose the page content we want to conceal, then use scripting to bring them back to life dynamically per our script's agenda. The key would be to devise a robust way to "mark" these contents on the page, so that our script can easily identify, gather, and then manipulate them.

Let's turn theory into action, one step at a time.

Hide HTML Content Using CSS

In order to pull regular HTML from our page and shown it based on a more selective process -- our script –- first, we need to hide the content from view. As mentioned, the CSS attribute display:none will do the job nicely, but there's also an NS4 compatibility issue. You see, NS4 sends all bearers of this attribute on a one way trip to the Black Hole. To make sure our content is backwards-compatible, the simplest solution is to write out the style sheet dynamically:

<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
 document.write('<style type="text/css">');
 document.write('.dyncontent{display:none;}');
 document.write('</style>');
}
</script>

<p class="dyncontent">This content is hidden from view initially</p>
<p class="dyncontent">This content is hidden from view initially as well</p>
<p >This content is not hidden from view.</p>

Notice that we used the "class" attribute of CSS to identify the chosen content and apply styling to it. This allows for a more generic approach to "tagging" content than using the ID attribute. In legacy browsers such as NS4, no content will be hidden at all, so these users can at least read your page.

Having hidden the content, what we need now is a way to use DHTML to create a custom collection out of those hidden content items. The sky is the limit on what we can do with such a collection; for instance, we might choose to display our content items one at a time in a scroller.

Create Custom Collections Out of "class" Elements on the Page

So far, we've hidden certain content on our page by dynamically generating the appropriate stylesheet and applying it to content via the "class" attribute of CSS:

<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
 document.write('<style type="text/css">');
 document.write('.dyncontent{display:none;}');
 document.write('</style>');
}
</script>

<p class="dyncontent">This content is hidden from view initially</p>
<p class="dyncontent">This content is hidden from view initially as well</p>
<p >This content is not hidden from view.</p>

The real question becomes, how do we get to those contents into our script? By worshipping the DOM (Document Object Model) of modern browsers, of course!

The DOM allows us to assess theoretically any element on the page and manipulate it. Now, you may be familiar with methods like document.getElementById or document.getElementsByTagName, which allow you to access an element based on these two criteria. However, there's currently no pre-build method to retrieve an element by ClassName (as of IE6/NS7), the way we've chosen to identify our content above. All is not lost, however. We can still do it in a roundabout way:

<script type="text/javascript">
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)
     customcollection[inc++]=alltags[i];
 }
}

getElementbyClass("dyncontent");
</script>

The key here is the line:

var alltags=document.all? document.all: document.getElementsByTagName("*");

We rely on document.getElementsByTagName("*") to first retrieve all elements on the page (the * denotes "everything"), then scan through each element to see if it carries the className we're interested in. If so, it's added to our custom collection. Notice that document.all is also used if it's supported -- this is for sake of IE4 browsers that don't recognize document.getElementById, yet with document.all can mimic what's required to get the job done.

That's a big hurdle out of the way. With our custom collection in place, what you do with regular HTML page content becomes a matter for the imagination. Let's now create a slideshow out of it!

Example: Rich HTML Slideshow

Are you ready to use what we've discussed so far to create something useful? 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.

The ProHTML Scroller [1] script from Dynamic Drive [2] uses this technique to create a scroller that rotates regular HTML blocks on the page. Enjoy!

[1] http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm
[2] http://www.dynamicdrive.com/