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