Categories:

Rotating regular HTML content via DHTML

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- generally not a fun experience:

<script type="text/javascript">

var message=new Array()
message[0]="<b><a href='http://javascriptkit.com'>Click here</a> for JavaScript Kit!</b>"
message[1]="The weather will be nice today"
"
"
</script>

In this tutorial we look at using DHTML to help break out from this limitation, so ordinary HTML content on your page can become participants to being dynamically shown as your script dictates, without the need to make any changes to the content themselves.

The general idea

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

Lets turn theory into action, one step at a time.