Hiding HTML content from view using CSS
In order to pull regular HTML on our page out of normalcy and shown based on a more selective process that is our script, we need to hide them from view first. As mentioned, the CSS attribute display:none will do the job nicely, but there's also the 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 simply to dynamically write out the style sheet:
<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 how we used the "class" attribute of CSS to identify the chosen content and apply styling to them. This allows for a more generic way of "tagging" content rather then 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's needed now is a way in DHTML to create a custom collection out of them. With such a collection the sky becomes the limit on what we can do with it, such as displaying our content one at a time like in a scroller.
- 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
