Making Objects Appear and Disappear

One of the core features of any dynamic Web site is the ability to control the visibility of an element, allowing it to be shown or not shown at any given moment while the visitor is using the Web site. Whether an object is visible or hidden on the page can be changed using JavaScript, which offers two distinct methods for controlling an object's visibility:

Using visibility: hidden will preserve the space needed to show the object even when it's hidden (like the Invisible Man, who still takes up space in his clothes showing his outline, even though you can't see him). When visibility is set back to visible, the object simply fills the space.
Using display: none completely removes the object from display, leaving no space. If the object's display style is then changed to one of the other visible display styles (block, inline, and so on), the object will be placed back into the Web page, even if that means redrawing the page to accommodate the "new" object.

Changing the Visibility Style

The visibility property allows you to tell an object whether to appear (visible) or not (hidden) on the screen (see "Setting the Visibility of an Element" in Chapter 8). Using JavaScript, you can not only determine the current visibility state (see "Finding an Object's Style Property Values" in Chapter 14), but also change the state back and forth.

In this example (Figures 16.3 and 16.4), the Cheshire cat's visibility can either be turned on, off, or toggled back and forth, like a switch. Notice that although the image disappears, the text underneath does not move, because space is still reserved in the layout for the hidden element.

Figure 16.3. Before the link is clicked to change the visibility style, the cat is visible with the title underneath the image.

Figure 16.4. After the link is clicked, the Cheshire cat does its vanishing act, but the title underneath remains in the exact same position because the invisible object still takes up space.

To change the visibility state of an object:

function setVisibility(objectID, state) {...}

Add the function setVisibility() to your JavaScript (Code 16.2).

Code 16.2. The `setVisibility()` and `toggleVisibility()` functions change the visibility state of the designated object in the browser window.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Making Objects Appear and Disappear | Changing Visibility  Style</title> <script type="text/javascript"> function setVisibility(objectID, state) {      var object = document.getElementById(objectID);      object.style.visibility = state; } function toggleVisibility(objectID) {      var object = document.getElementById(objectID);      state = object.style.visibility;      if (state == 'visible')          object.style.visibility = 'hidden';      else          object.style.visibility = 'visible'; </script> <style type="text/css" media="screen"> #cheshireCat {      visibility: visible;      margin: 8px;} </style> </head> <body onload="setVisibility('cheshireCat', 'visible');"> <div > <a      onclick="setVisibility('cheshireCat', 'hidden'); return false;"      href="#">Hide The Cat</a> | <a      onclick="setVisibility('cheshireCat', 'visible'); return false;"      href="#">Show the Cat</a> | <a      onclick="toggleVisibility('cheshireCat'); return false;"      href="#">Change the Cat's Visibility</a> </div> <div > <img src="/books/3/292/1/html/2/alice24.gif" height="283" width="416" alt="The Cheshire Cat" /> </div> <h1>The Cheshire Cat</h1> </body></html>

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object to be changed. It can then use this ID to access the object's current visibility property value and change it to whatever state you specify when you trigger it from an event handler, as shown in Step 5.

function toggleVisibility(objectID) {...}

Add the function toggleVisibility() to your JavaScript.

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object. It then checks the current visibility state of the object and switches it to its opposite. If the value is null, it assumes that the element should be shown.

#cheshireCat {...}

Set up the CSS rules for your object(s) with a visibility value.

onload="setVisibility('cheshireCat', 'visible');"

In the <body> tag, use the setVisibility() function to initialize the visibility of all the objects for which you need to know the initial visibility.

onclick="setVisibility('cheshireCat', 'hidden');"

Add an event handler to an element to trigger the function you created in Step 1, and pass to it the ID for the object you want to address, as well as the visibility state you want it to have.

onclick="toggleVisibility ('cheshireCat');"

Add an event handler to an element to trigger the function you created in Step 2, and pass to it the ID for the object you want to address. Repeat this step for each object you defined in Step 3.

<div >...</div>

Set up the object(s) that will have visibility changed.

Changing the Display Style

The display property lets you tell an object how it should be treated by the surrounding content, for example, as a block element, an inline element, or as if it weren't there at all (see "Setting How an Element Is Displayed" in Chapter 6). Using JavaScript, you can not only determine the current display state, but also change the state.

In this example (Figures 16.5 and 16.6), the Cheshire cat can be made to appear, disappear, or toggle back and forth between the two. However, the difference between this example and the previous example is that the image is completely removed from the page, as evidenced by the title moving up to fill what would be empty space.

Figure 16.5. Before the link is clicked to change the display state, the cat is visible with the title underneath the image.

Figure 16.6. After the link is clicked, the Cheshire cat does its vanishing act, but the title underneath moves up because the object is no longer there (unlike in Figure 16.4, where the title stays in the same place).

To change the display state of an object:

function setDisplay(objectID, state) {...}

Add the function setdisplay() to your JavaScript (Code 16.3).

Code 16.3. The `setDisplay()` and `toggleDisplay()` functions change the display style of the designated object in the browser window.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Making Objects Appear and Disappear | Changing Visibility  Style</title> <script type="text/javascript"> function setDisplay(objectID, state) {      var object = document.getElementById(objectID); object.style.display = state; } function toggleDisplay(objectID) {      var object = document.getElementById(objectID);      state = object.style.display;      if (state == 'none')          object.style.display = 'block';      else if (state != 'none')          object.style.display = 'none'; } </script> <style type="text/css" media="screen"> #cheshireCat {      display: block;      margin: 8px;} </style> </head> <body onload="setDisplay('cheshireCat', 'block');"> <div > <a      onclick="setDisplay('cheshireCat', 'none'); return false;"      href="#">Remove The Cat</a> | <a      onclick="setDisplay('cheshireCat', 'block'); return false;"      href="#">Display the Cat</a> | <a      onclick="toggleDisplay('cheshireCat'); return false;"      href="#">Change the Cat's Display State</a> </div> <div > <img src="/books/3/292/1/html/2/alice24.gif" height="283" width="416" alt="The Cheshire Cat" /> </div> <h1>The Cheshire Cat</h1> </body></html>

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object to be changed. It then uses this ID to access the object's current display property and change it to whatever state you specify when you trigger it from an event handler, as shown in Step 5. To hide the object, you'll need to desinate none for the state.

function toggleDisplay(objectID) {...}

Add the function toggleDisplay() to your JavaScript.

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object. It then checks the current display state of the object and switches it to either none to hide the object or block to display it. If the value is null, then the object is set to none.

#cheshireCat {...}

Set up the CSS rules for your object(s) with a display value.

onload="setDisplay('cheshireCat', 'block');"

In the <body> tag, use the setDisplay() function to initialize the visibility of all the objects for which you need to know the initial display value.

onclick="setDisplay('cheshireCat', 'none');"

Add an event handler to an element to trigger the function you created in Step 1, and pass to it the ID for the object you want to address, as well as to the display state you want it to have. Add this code to each object.

onclick="toggleDisplay ('cheshireCat');"

Add an event handler to an element to trigger the function you created in Step 2, and pass to it the ID for the object you want to address. Repeat this step for each object.

<div >...</div>

Set up your object(s).

Tips

In both examples, we used a JavaScript function to initially set the values rather than relying on the CSS. We did this because JavaScript cannot directly access the value of a style until it has been set using JavaScript. For an alternative method, see "Finding a Style Property's Value" in Chapter 18.
Although these examples show the ID being passed directly to the function using an anchor element to trigger the event, you can also pass the event to the function (as shown in "Changing CSS Property Values" earlier in this chapter) if you trigger the function with an event handler directly from the object.
It may seem like a good idea to set the initial visibility of elements to hidden or their display to none using CSS so that you don't have to muck around with JavaScript to set the initial state of the object when the page loads. The problem, though, is that if the visitor has JavaScript turned off, then you run the risk of having the content not ever showing up. Instead, make sure you design pages to be displayed without JavaScript, and then use JavaScript to hide elements when the page loads.