by George Chiang

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