Section 12.5. Display, Visibility, and Opacity

12.5. Display, Visibility, and Opacity

An interesting thing about web-page elements: they can be completely transparent and invisible, but still affect the layout of the page. The reason is that invisibility/transparency and display/lack of display are not the same thing in CSS.

An element can be hidden by setting visibility to hidden, or shown by setting visibility to visible. The property can also be set to inherit, and the element inherits its visible property setting from the containing element.

As demonstrated in Chapter 11, an element's opacity can also be altered until it is completely transparent, making it invisible. However, just as with the visibility property, the element still maintains its position within the page flow.

If an element's display property is set to none, it's also hidden; however, any effect the element has on the page layout is also removed. To make it visible, you have a couple of options. You can make it visible and have it act as a block-level element (line breaks before and after the element) by setting display to block. If you don't want block behavior, you can set display to inline, and it's displayed in-place and not as a block.

In addition, you can display the element using the default display characteristics of several HTML elements, which include inline-block, table, table-cell, list-item, compact, run-in, etc. It's a rather powerful attribute, and one worth playing around with until you're comfortable with its modifying results.

12.5.1. Right Tool for Right Effect

Given all these various ways to hide and display elements, which method should be used for what effect?

If you're absolutely positioning an element and then hiding and showing it based on an event such as a mouse click or form submission, use the visibility property. It's simple and easy to use, and an absolutely positioned element is removed from the page flow regardless. Use visibility, then, for just-in-time help.

If the content that's hidden should push down the page elements that follow when it's displayed, such as clicking a collapsed option list when filling out a form, then use display, switching between a display value of none and a display value of block. Use display to hide and show form fields to get user input.

If you're creating a fade effect or want to de-emphasize a page element, use the opacity property. You may eventually adjust it so that it's completely transparent, but usually only after an animated fade of whatever duration. Use opacity to emphasize and provide visual information. opacity can also be used to signal a transition, as demonstrated with the photo slideshow in Chapter 11.

A note on using visual effects for information purposes: these effects should also include some textual element, so that people using non-visual browsers or ones with limited visual capability also receive the same level of notification. Never rely completely on a visual effect to provide feedback.

Time, then, for a little live action.

12.5.2. Just-in-Time Information

Some of the best sites I've visited provide some form of help any time information is requested from the web-page reader. Even if you're asking a person's name, you want to provide an explanation of the privacy controls in place and how that data is used.

You can provide a tooltip type of help by setting the title attribute of a link surrounding the field label, but this usually constrains how much information you can include. You can also pop up a dialog with information, and this is especially helpful if the information is long and detailed, with a description of options. But for those in-between cases where you have more than a little information, but less than a lot, it would be nice to include this information directly in the page.

For the most part, though, forms take up most of the space, and a lot of text can make the page seem cluttered. One approach then is to put the information in the page, but have it show up based on some event.

This is one of the more useful DHTML effects you can create, and also one of the easiest. Example 12-8 shows the page, including two form elements, each of which has a hidden help block. In the script, when the label for the element is clicked, if any item's help is already showing, the visible help is hidden and the new help block is shown.

Example 12-8. Using hidden help fields

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>In-Place Help</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .help { position: absolute;         left: 300px;         top: 20px;         visibility: hidden;         width: 100px;         padding: 10px;          border: 1px solid #f00;       } form { margin: 20px; background-color: #DFE1CB;         padding: 20px; width: 200px } form a {color: #060; text-decoration: none } form a:hover {cursor : help} </style> <script type="text/javascript"> //<![CDATA[ var item = null; function showHelp(newItem) {    if (item) {        item.style.visibility='hidden';    }    item = document.getElementById(newItem);    item.style.visibility='visible'; } //]]> </script> </head> <body> <form> <label><a href="javascript:showHelp('item1')" alt="get help">Item One</a></label> <input type="text"><br /><br /> <label><a href="javascript:showHelp('item2')" alt="get help">Item Two</a></label> <input type="text"> </form> <div  > This is the help for the first item. It only shows when you click on the label for the item. </div> <div  > This is the help for the second item. It only shows when you click on the label for the item. </div> </body> </html>

I also added a little CSS sugar to make the page taste better. The form is set with a color background, a help block is outlined in red, and when the mouse cursor is over the input label for each item, the cursor icon is set to the help icon. This typically looks like an arrow with a little question mark, or just the question mark itself. This is also a very inexpensive way to provide a hint to the web-page readeras is the alt tag that says "get help." Figure 12-3 demonstrates this hidden help system.

Figure 12-3. In-place help using the visibility property

12.5.3. Collapsing Forms

Having to split forms functionality across many pages is a pain, but a page with too many form elements displayed at once can be unreadable.

In addition, in-place editing of data has been growing in popularity; titles for data sections are activated for the person who owns the data, and clicking on these titles opens up a form or input fields in which that section of the data can be changed.

Both situations are rich with potential for using collapsible forms. These are forms or form sections that are hidden in the page; they display only when something is activated. And not just display: they push other data out of the way, occupying the same room the form would normally occupy if displayed.

Google, Flickr, and a host of companies use this type of collapsible content. Considering that it's also one of the easiest to make accessible, it's not surprising. If JavaScript is not enabled, the event handling associated with the titles that would normally display the content is not active, and the forms don't open. Menu items can be added to open a separate page for the form, or perhaps even displayed with the noscript tag.

The last example of this chapter, Example 12-9, demonstrates a collapsible form. In this case, it's a stacked set of form-element blocks. Clicking on the label for each either hides it if it's currently displayed, or shows it if not. For non-JavaScript-enabled browsers, the titles of both blocks are surrounded by hypertext links; clicking on the link, ostensibly, takes you to a separate static form. For pages with JavaScript, a return value of false as an onclick event for the links cancels its default behavior. You can actually see this when you disable JavaScript: clicking the link alters the page URL to reflect the URI fragment (#name or #address). However, when scripting is enabled, you won't see this, but you will see the form display.

Example 12-9. Implementing a collapsable form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Collapsing Forms</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .label { background-color: #003; width: 400px; border-right: 1px solid #fff;          padding: 10px; margin: 0 20px; color: #fff; text-align: center;          border-bottom: 1px solid #fff;} .label a { color: #fff } .elements { background-color: #CCD9FF; margin: 0 20px; padding: 10px;             width: 400px; display: none} </style> <script type="text/javascript"> //<![CDATA[ window.onload=setup; function setup(  ) {    document.getElementById('one').style.display='none';    document.getElementById('two').style.display='none'; } function show(newItem) {    var item = document.getElementById(newItem);    if (item.style.display=='none') {        item.style.display='block';    } else {        item.style.display='none';    } } //]]> </script> </head> <body> <form action="GET"> <div  onclick="show('one')"> <a href="#name" onclick="return false">Name</a> </div> <div  > <label>First Name:</label><br /><input type="text" name="firstname" /><br /><br /> <label>Last Name:</label><br /><input type="text" name="lastname" /><br /><br /> </div> <div  onclick="show('two')"> <a href="#address" onclick="return false">Address</a> </div> <div  > <label>Street Address:</label><br /><input type="text" name="street" /><br /><br /> <label>City:</label><br /><input type="text" name="city" /><br /><br /> <label>State:</label><br /><input type="text" name="state" /><br /><br /> </div> </form> <p>Other data or information.</p> </body> </html>

Again, this is the type of functionality you want to add to your web pages. It's simple, impressive-looking, and relatively easy to convert into non-JavaScript alternatives if scripting is turned off.

I've barely scratched the surface on what you can do with JavaScript and CSS. Hopefully, though, this provides you with a good starting point. Chapter 13 introduces you to the basics of Ajax; following, we'll look at combining Ajax and DHTML effects for powerful applications.