The adaptive layout technique changed the document automatically based on the user's environment. Data display techniques focus on the user interacting with the document to change the display of data. They allow the user to focus on the most important data on the page. For example, rather than present the user with a large document, you might initially display only headers and other relevant information. The user can then click on a header or other text to display or hide any related information, and by doing so will have a highly interactive experience. These techniques also adapt well to down-level browsers on which the document is displayed entirely expanded, without the extra interactivity.
When you make a document dynamic, you turn various elements into click regions or give them other special behavior. In order to use these elements, the user has to know which ones they are. By displaying different cursors when the mouse is on different elements, you can help the user discover them.
By default, the mouse cursor over an informational element is an I-beam that indicates that the text is selectable. Over behavioral elements—for example, all links in the document—the cursor is a hand that indicates that the elements can be clicked.
Internet Explorer 4.0 provides the Web author control over the cursor through a new CSS cursor property. The cursor property allows the author to define the cursor to display when the mouse is on the element. For example, when you create a click region, a hand cursor or other pointer is more appropriate than an I-beam cursor. Chapter 1, "Overview of HTML and CSS," provides a table of all the types of cursors supported through the cursor property.
The following code demonstrates displaying a hand cursor when the mouse is on an H1 element:
<H1 STYLE="cursor:hand" ONCLICK="alert(`clicked');" ONSELECTSTART="event.returnValue = false;"> When on this header, the mouse pointer is a hand. </H1>
The onselectstart event is handled to disable the initiation of text selection inside the header. Canceling this event by returning false prevents the user from starting a selection within the header; it does not prevent the text from being selected. Selections can start outside the header and be extended through the header contents. This behavior is the default behavior for links.
The following example contains generic code that dynamically displays and hides existing data.
<HTML>
<HEAD>
<TITLE>Displaying and Hiding Data</TITLE>
<STYLE TYPE="text/css">
body {background:white}
.expandable {color:blue; cursor:hand}
.expanded {color:black; font-size:"12pt"}
.collapsed {display:none}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// Generic display code
function outliner() {
// Get child element.
var child =
document.all[event.srcElement.getAttribute("child",
false)];
// If child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ?
"expanded" : "collapsed";
}
</SCRIPT>
</HEAD>
<BODY ONCLICK="outliner();">
<H1 CLASS="expandable" child="info">
Click here for more information.
</H1>
<DIV ID="info" CLASS="collapsed">
These contents are not displayed initially. Clicking on the
header above displays them.
</DIV>
</BODY>
</HTML>
With this code, any element can act as the click source for displaying or hiding other information. To make an element act as a click source, assign it a class name of expandable and give it a custom attribute named child.
The expandable class defines the mouse pointer to be a hand when it is over an element of the class. The expandable class only standardizes the appearance of click sources, so using it is optional. You can modify the class to further standardize the appearance of expandable items.
The custom child attribute must contain the ID of the data that is to be displayed or hidden. Clicking on the expandable item causes the data's class name to be changed from collapsed to expanded or vice versa, depending on whether it is currently hidden or displayed. You should initialize the data's class name to collapsed or expanded to specify its initial appearance.
The previous example demonstrates how to generically display and hide contents. The code can be extended to generically create an expanding and collapsing outline. The following scenario demonstrates how to subclass the list container (UL or OL) elements to support outlining. When this code is on the page, lists on the page support expanding and collapsing.
<HTML>
<HEAD>
<TITLE>Expanding and Collapsing Outline</TITLE>
<STYLE TYPE="text/css">
/* Outline style sheet */
UL {cursor:hand; color:navy}
UL UL {display:none; margin-left:5pt}
.leaf {cursor:text; color:black}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function checkParent(src, dest) {
// Search for a specific parent of the current element.
while (src != null) {
if (src.tagName == dest)
return src;
src = src.parentElement;
}
return null;
}
function outline() {
// Expand or collapse if a list item is clicked.
var open = event.srcElement;
// Be sure the click was inside an LI element. This test
// allows rich HTML inside lists.
var el = checkParent(open, "LI");
if (null != el) {
var pos = 0;
// Search for a nested list.
for (pos = 0; pos < el.children.length; pos++)
if ("UL" == el.children[pos].tagName)
break;
if (pos == el.children.length)
return;
}
else
return;
el = el.children[pos];
if ("UL" == el.tagName) {
// Expand or collapse nested list.
if ("" == el.style.display)
el.style.display = "block";
else
el.style.display = "";
}
event.cancelBubble = true;
}
document.onclick = outline;
</SCRIPT>
</HEAD>
<BODY>
<UL>
<LI>Item 1
<UL>
<LI CLASS="leaf">Subitem 1
<LI>Subitem 2
<UL>
<LI CLASS="leaf">Subsubitem 1
</UL>
</UL>
</LI>
<LI CLASS="leaf">Item 2
</UL>
</BODY>
</HTML>
Combining an expanding and collapsing outline with the mouse effects introduced earlier in this chapter can create a highly interactive menu. The HTML used to create this document is the standard HTML for creating nested lists. Style sheets and code bring the standard HTML alive as an interactive outline. Because a standard list is used, this page degrades gracefully on browsers that do not support Dynamic HTML—for example, Internet Explorer 3.0 displays the document as a standard bulleted list.
The code for this example can be found on the companion CD. To create an expandable menu, follow these steps:
/* GIFs of an open and a closed folder to use in
place of the standard bullets */
UL.toc LI {list-style-image:url(close.gif)}
UL.toc LI.open {list-style-image:url(open.gif)}
/* Colors for highlighted menu options and for the selected
link. */
UL.toc A:active, UL.toc A.select {color:white;
background:blue}
UL.toc .over {color:red} /* Highlight color */
<LI> <A HREF="ch1/overview.htm">Overview of HTML and CSS</A> <UL> <LI><A HREF="ch1/html40.htm" TITLE="HTML 4.0"> HTML "4.0"</A></LI> <LI><A HREF="ch1/css.htm" TITLE="CSS Features"> CSS Features</A></LI> <LI><A HREF="ch1/cssp.htm" TITLE="CSS Positioning"> CSS Positioning</A></LI> <LI><A HREF="ch1/settings.htm" TITLE="System"> System Settings</A></LI> </UL> </LI>
The complete document and the script necessary to create the expanding outline are shown in the following code. This example can be extended with more topics and children simply by adding more HTML—no extra code is necessary.
<HTML>
<HEAD>
<TITLE>Contents</TITLE>
<STYLE TYPE="text/css">
BODY {background:navy; color:white}
UL.toc {cursor:hand}
/* Set image for the bulleted list. */
UL.toc LI {list-style-image:url(close.gif)}
UL.toc LI.open {list-style-image:url(open.gif)}
UL.toc UL {list-style:none}
/* Hide the child elements by default. */
UL.toc UL {display:none}
/* Display the child elements. */
UL.toc UL.expanded {display:block}
UL.toc LI A {text-decoration:none; color:yellow;
font-weight:bold}
UL.toc LI UL A {color:white}
UL.toc A:active, UL.toc A.select
{color:white; background:blue}
UL.toc .over {color:red} /* Highlight color */
UL.toc UL P {margin-top:0; margin-bottom:0}
</STYLE>
<STYLE TYPE="text/JavaScript">
/* Technique to display the outline in Netscape
Navigator 4.0. */
/* Define an alternative style for "UL.toc UL". */
contextual(classes.toc.UL, tags.UL).display = "block";
</STYLE>
<BASE TARGET="DEMO">
<SCRIPT LANGUAGE="JavaScript">
// Generic display code
// This technique allows you to write generic code that
// automatically causes related contents to be either
// displayed or hidden.
var curSelection = null;
function setStyle(src, toClass) {
// Format the element to the specified class.
if (null != src)
src.className = toClass;
}
function mouseEnters() {
// Be sure the element is not the current selection and
// that it is an anchor.
if ((curSelection != event.toElement) &&
("A" == event.toElement.tagName))
setStyle(event.toElement,"over");
}
function mouseLeaves() {
// Again, be sure the element is not the current selection
// and that it is an anchor.
if ((curSelection != event.fromElement) &&
("A" == event.fromElement.tagName))
setStyle(event.fromElement, "");
}
function outliner() {
var child = null, el = null;
/* Assumes that the DIV containing the child
elements immediately follows the heading anchor. */
switch (event.srcElement.tagName) {
case "A":
el = event.srcElement.parentElement;
child = document.all[event.srcElement.sourceIndex + 1];
break;
case "LI":
el = event.srcElement;
child = document.all[event.srcElement.sourceIndex + 2];
break;
}
/* Be sure the child element exists and that it is the
child LI. */
if ((null != child) && ("UL" == child.tagName) &&
("LI" == child.parentElement.tagName)) {
if ("" == child.className) {
// Collapse the item.
child.className = "expanded";
el.className = "open";
}
else {
// Expand the item.
child.className = "";
el.className = "closed";
}
}
if ("A" == event.srcElement.tagName) {
if (null != curSelection)
setStyle(curSelection, "");
// Save and highlight new selection.
curSelection = event.srcElement;
setStyle(curSelection, "select");
}
}
</SCRIPT>
</HEAD>
<BODY>
<UL CLASS="toc" ONCLICK="outliner();"
ONSELECTSTART="return false;" ONMOUSEOVER="mouseEnters();"
ONMOUSEOUT="mouseLeaves();">
<LI>
<A HREF="ch1/overview.htm">HTML and CSS Overview</A>
<UL>
<LI>
<A HREF="ch1/html40.htm" TITLE="HTML 4.0">
HTML "4.0"</A>
</LI>
<LI>
<A HREF="ch1/css.htm" TITLE="CSS Features">
CSS Features</A>
</LI>
<LI>
<A HREF="ch1/cssp.htm" TITLE="CSS Positioning">
CSS Positioning</A>
</LI>
<LI>
<A HREF="ch1/settings.htm"
TITLE="System Settings">
System Settings</A>
</LI>
</UL>
</LI>
<LI>
<A HREF="ch2/overview.htm">
Fundamentals of HTML Scripting</A>
<UL>
<LI>
<A HREF="ch2/langs.htm"
TITLE="Supported Languages">
Supported Languages</A>
</LI>
<LI>
<A HREF="ch2/guidelns.htm"
TITLE="Variable Naming Guidelines">
Naming Conventions</A>
</LI>
</UL>
</LI>
<!-- New options can be added simply by adding
more list items. -->
</UL>
</BODY>
</HTML>
This example demonstrates how to write generic reusable code. The menu is completely encapsulated based on style sheets and scripts that are associated directly with the table of contents list. This example can be used in any document without modification to the document or this script.
While this page downgrades gracefully in browsers that do not support style sheets and with the style sheet support in Internet Explorer 3.0, it uses special code to display correctly in Netscape Navigator 4.0. As of that release, the display:none value is recognized and the child elements are not displayed. Because Netscape Navigator does not support dynamic style manipulation, the outline cannot be dynamically expanded to display the nested data. To display correctly in Netscape Navigator, this document uses the following JASS style sheet script. This style sheet is recognized only by Netscape Navigator 4.0 and is used to redisplay the hidden contents. The JASS style sheet follows the CSS-defined style sheet in the document.
<STYLE TYPE="text/JavaScript"> /* Define an alternative style for "UL.toc UL". */ contextual(classes.toc.UL, tags.UL).display = "block"; </STYLE>
This technique for defining a JASS style sheet is useful for tweaking the rendering between Internet Explorer 4.0 and Netscape Navigator 4.0. You can define other styles for use in Netscape Navigator using JASS; for more information, refer to the Netscape Web site (www.netscape.com).