Browse DevX
Sign up for e-mail newsletters from DevX


Twelve Dynamic HTML Lessons : Page 6

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.

Hide and Zeek
Part of the power of Dynamic HTML lies in its ability to hide and expose parts of your pages. This means whole sections of your pages can be hidden until a user performs some action that will expose them. You've seen this in action at the left in the CSS reference. If not, then go click one of the reference headings and watch how a subsection suddenly appears.

The stylesheet attribute that allows us to do this is the display attribute. Display normally holds a null value. Null is indicated with a pair of double quotes, like this: "" But if you want to hide something, you set "none" as its value instead.

Our experiments have discovered that it's best not to set the display attribute within a style declaration, but instead to use an inline style. In our case we're going to use the "earth" division again, but mark it hidden when the page loads, like this:

<div id="earth" style="display: 'none';"><img src="images/earth.gif" 
width=37 height=37 alt="The Earth"></div>
As you can see, style attributes added inline occur within a tag and are done with the "style=" switch. Just put normal style attributes within the quotes following the "style=" switch.

You can't see it now, but The Earth is hidden on this page. Just press the button to unhide it. When you do, notice how the page opens up to make room for the earth division. Here's that button:

 Toggle The Earth    
Pretty cool, eh? Imagine the types of things you can hide and then bring up when a user needs them. One of the things to take into account though is that space for the division.

Let's take a look at what happens when you move the earth. Click here to bring the movement controls into view. Now move the earth and watch what happens to that space. Nothing. It just sits right where it was created. This is something you have to consider when you are creating pages. You don't want to leave huge gaps in your documents.

Let's see how hiding a division might be used effectively. Click here for the next step.

Thanks for your registration, follow us on our social networks to keep up-to-date