Previous Page
Next Page

Hack 79. Dynamically Display More Information About a Topic

Use a simple technique to let users manage their own screen real estate.

You've got too much information to display, and not enough room on the screen. What do you do? You can cram it all on the page and let the user scroll down through your content. You can make two pages and force the user to navigate between them. Or you can let the user dynamically choose which sections of your page to display.

Figure 9-15 shows a simple web page with two content sections: Quote of the Day and Weather Forecast. By themselves, they don't take up much room, but add another dozen sections to the page and you're on the road to information overload.

Figure 9-15. Two content sections, eating up page real estate


The two page sections are built with HTML tables. The following code sample shows the Quote of the Day table. The Weather Forecast table has an identical structure:

<table border=0 width="35%" cellpadding="3">
<tr>
    <td bgcolor="404080" onclick="toggle_visible('divQOTD');">
        <font color="#FFFFFF">
        Quote of the Day
        </font>
    </td>
</tr>
<tr>
    <td bgcolor="#E0E0E0">
        <div id="divQOTD">
            <em>"Outside of a dog, a book is man's best friend. 
            Inside of a dog it's too dark to read."</em>
            -- Groucho Marx<br>
        </div>
    </td>
</tr>
</table>

The table has two rows: the top row displays the title, and the bottom row contains the quotation. The quote is surrounded by a div tag named divQOTD. You'll also notice that we've hooked a callback to the top row's onClick event. When the user clicks the mouse on the Quote of the Day title, the toggle_visible( ) function makes the content within the div tag disappear, as in Figure 9-16. If the content is already hidden, clicking the title makes it reappear.

Figure 9-16. Hiding the Quote of the Day


The toggle_visible( ) function simply modifies a couple of the style attributes of any Document object element. You pass the element as a parameter, and toggle_visible( ) checks to see if it's currently visible. If it is, the element is rendered invisible. If the element is already invisible, it reappears:

function toggle_visible (elName) {

    var el = document.getElementById (elName);
    var isVisible = (el.style.visibility == "hidden") ? true : false;

    el.style.visibility = isVisible ? "visible" : "hidden";
    el.style.display = isVisible ? "inline" : "none";
}

Figure 9-17 shows the page with both content boxes invisible. You can use the function to make any page element disappear. You can even attach it to the body tag's onClick event and make the entire page disappear, if so inspired.

Figure 9-17. Both content boxes rendered invisible


The only bit of trickery in the function is when you set the el.style.display attribute. You might think that setting the el.style.visibility attribute would be sufficient to render the element invisible, but alas, no. Setting visibility to hidden makes the text disappear, but the browser still reserves space for it. Setting the display attribute to none (instead of the normal inline) lets the browser take back the space it occupied and adjust other page elements accordingly.

Hacking the Hack

The toggle_visible( ) function isn't limited to tiny sections of the page. You can use it to make large sections appear or disappear, too. A variation of this function might receive a Boolean parameter that sets the visibility. This technique can allow the user to toggle between radically different views of your page without a page refresh or a trip back to the server.

Mark Pruett


Previous Page
Next Page