Tips
DHTML Layer Example
DHTML Layers allow you do create some interesting dynamic page effects such as dropdown menus and other interesting navigation effects. This simple example displays four hyperlinks, which dynamically show different layers of information in the same location. This particular example supports IE, NE 4.x and NE 6.x which all utilize different JavaScript Object Models which require slightly different coding.
Â
Layer 1
Layer 2
Layer 3
Layer 4
Layer 1
Layer 2
Layer 3
Layer 4
Specifying Font-Weight Styles
You can specify font-weight styles in ... tags, too. The font-weight is essentially a specification of whether the font is bold or not. Legal values for font-weight are
* bold
* normal
Here's a document that shows how the two values affect the appearance of text:
Â
This page illustrates the font-weight style.
This is bold text.
This is normal text.
Save that as weight.html and note the bold formatting applied to the middle line of text.
Specifying Letter-Spacing Styles in Internet Explorer
In Microsoft Internet Explorer, you can use the letter-spacing style to specify the white space between individual letters. The letter-spacing style isn't in the Netscape Navigator DOM.
You can use any of the standard measurement units (pt, px, cm, mm, in) to specify the value of a letter-spacing attribute. You can also use em values. An em is a printer's term that refers to the width of the capital M in the current font. Additionally, some word values are available to you:
* normal--Denotes normal letter spacing.
* auto--Denotes "justified" letter spacing, in which a single-line span fills the width of the browser window. This value isn't implemented in either major browser.
Here's an illustrative document:
Â
This page illustrates the letter-spacing style.
This is normal text.
This is text with 2-emspacing.
This is text with five-pixel
spacing.
This is text with six-point
spacing.
This is text with half-centimeter spacing.
This is text with two-millimeter
spacing.
This is text with quarter-inch
spacing.
This is normal text.
Save that as spacing.html and see the effects of the letter-spacing style in Internet Explorer.?
Absolute Positioning
Without using layers, it's possible to position text and other visual elements within the browser window. All you need to do is take advantage of the position style.
The position style takes several arguments. To position an element relative to the top-left corner of the document-display space in the browser window, use the position: absolute specification. look at this code:
Â
This was positioned absolutely.
The key line in that document is There, the absolute variant of the position style is invoked. The left and top attributes get values that move the top-left corner of the entity 100 pixels from the left edge of the document-display space and 200 pixels from its top edge.
Relative Positioning
You've seen how to position a entity in relation to the top-left corner of the document-display portion of the browser window. It's also possible to use the position: relative style to move a element relative to a element that contains it. Here's an example:
Â
This was positioned absolutely.
This was positioned relatively.
You see? The contents of the
element are moved 100 pixels from the left edge and 200 pixels from the top edge. But there's a element nested inside the
. Its boundaries start 20 pixels to the right of the left edge of the
element, and 20 pixels down from its top edge. The location of the element exists in relation to the
element only.
Overlapping is possible
For better or worse, it's possible to use the positioning capabilities of cascading style sheets to put multiple graphic elements in the same place at the same time. That's what this page does:
Â
XXXXXXXXXXXXXXXXXXXX
_______________________
Â
The Xs and dashes fill what is visually the same line on the browser window. This might be handy if you were going for some kind of strikethrough effect, but it might also lead to confusion if words and other elements overlapped accidentally. Take care.
Form Elements Are Not Displayed Equally
One of the laudable goals of DHTML is to provide more interactivity for your Web page viewer, and DHTML offers us myriad methods to move, size, change, and react to user input. However, there are only one or two methods of gathering that user input. The most fundamental is through forms and form objects.
You probably know that you can use form objects without ever submitting a form. However, the Form tag is still an essential element. Keep in mind that form objects will not display in Netscape Navigator unless they are enclosed in a Form tag.
Referencing Form Objects
In our previous tip, we mentioned the importance of enclosing form objects with the Form tag. In addition to ensuring that your form objects display properly in Internet Explorer and Netscape Navigator, we suggest that you name your form.
Naming your form makes it easy to use JavaScript to refer to the form and its objects. For example, if you place a text field named First_Name into a form with the name MyForm, you can refer to the value of the text field through the following line of JavaScript:window.document.MyForm.First_Name.value]
Referencing Items On Your Page
Items on an HTML page are organized into a pecking order, beginning with the browser window, then the document, the images on the page, the forms and their form objects, and so on. The most important object order to remember is windows - document - form - form objects.
Using this methodology, your HTML page can freely access or react to any user action that affects a page object. This means that your pages are no longer limited to run-of-the-mill form objects. You can use images instead of form objects and use JavaScript to gather the user input.
Setting a Background
As you probably know, you can specify an image to appear as a tillable background in a Web page. However, you may not know that DHTML and Cascading Style Sheets (CSS) allow you to set the position and repeat the pattern. To set an image, redefine the BODY tag like so:
 BODY {
Background-image: url(images/bg.gif);
Backgournd-color:#FFFFFF;
Background-repeat: no-repeat
}
We discussed how to use DHTML to set the position and repeat the pattern of a background image. Unfortunately, setting these specifics for a background image is another inconsistency between browsers and browser versions.
Netscape Navigator 4 and varying iterations of Internet Explorer 4 do not allow you to customize background image position or repeat patterns. However, the latest version of Internet Explorer and the upcoming release of Netscape Navigator 6 do fully support this DHTML feature.
Properly Close P Tags
You can redefine the formats of HTML tags by using Cascading Style Sheets (CSS). However, because of inconsistent versions of HTML, there is one tag that can cause your CSS styles to fail.
In previous versions of HTML, it wasn't necessary to close a P tag with an end /P tag. However, if you redefine the P tag format with a CSS style, you must close the P tag or the style will not work.
A Document Window In Your Document
Although this tip is strictly for Internet Explorer users, it's just too cool to pass up. The DHTML at the end of this tip allows you to view another HTML page through a mini-window in your HTML document. You can do something similar with a frameset, but this DHTML tag allows you to place the mini-window almost anywhere on the page.
To create the mini-window, open a new HTML document in your text editor of choice. Then enter the following DHTML in the body content of your page. Change the SRC attribute to point to an HTML page on your server or computer.
Â
Â
Canceling An Event
Irrevocably, when you script any user interaction into a DHTML document, you will direct the page to do something if a certain state is fulfilled and do nothing if that state is not fulfilled. For example, form validation requires your HTML document to check certain text fields for content. If the text fields contain content, submit the form. If the text fields are empty, display an error message and do not submit the form.
To accomplish this form submit cancellation, you must be certain to include the RETURN element in your event handler. To cancel an event properly, you must return the result of the confirmation question to the event. You do so by directing JavaScript to return True or False from the called event.
To illustrate how, let's walk through an example. Say we have a simple link. When the user clicks the link, we want to confirm that the user wants to go to the link source, which we can do by presenting a yes or no confirmation dialog box. To do this, place a function in the HEAD of the HTML document, like so:
Â
In our example, we've created an HTML page with a hyperlink. When the user clicks the link, we display a dialog box that request confirmation that the user wants to navigate to the link. If the user clicks OK, he or she continues to the link. If the user clicks Cancel, the mouse click action is canceled and nothing happens. In our previous tip, we explained how to add the AreYouSure confirmation JavaScript function to the HEAD of your HTML document. Today we'll cover how to trap when the user clicks the hyperlink and how to cancel the hyperlink.
After you create the HTML document and place the confirmation JavaScript function into the HEAD of the document, enter the following code as the HTML BODY. As you can see, the hyperlink's OnClick event is trapped and sent to the AreYouSure function. From that point on, the page waits for the user to make a yes or no decision. The decision is sent back to the OnClick event, which continues only if the user decision was true.
Mixing DHTML With Server Scripting Languages
As you know, DHTML allows you to change objects dynamically on an HTML page. However, you still have to build each of those objects in the content of the page. Wouldn't it be great if you could use the same dynamic nature to build the content of your Web site pages?
Server scripting languages are your answer. Server scripting languages such as ASP (Active Server Pages), CFM (Allaire's ColdFusion), and JSP (Java Scripting Pages) enable you to build DHTML pages dynamically from a database. This means that you can create or change content just by making a text change in a database. In addition, your Web site can serve content through one or two pages. By using a server scripting language to build DHTML pages, you can greatly extend the content you provide your Web site visitors.
Naming Your Colors
Hexadecimal code is used for specifying colors in documents. If you find this too complex, you can simply replace the hexadecimal codes with the one-word color names recognized by Microsoft Internet Explorer and Netscape Navigator. For example, instead of specifying #0000FF for the color blue, you can simply use the color name Blue. For a complete list of valid color names, go to
http://developer.netscape.com/docs/manuals/htmlguid/colortab.htm
Comment Your DHTML
Comments are notes you leave for yourself that describe the purpose of a section of DHTML code. Comments are particularly useful when you create a complex DHTML layout, use JavaScript, or embed an object such as Shockwave or Flash into your HTML document. To add a comment, position the cursor in your document and type:
Â
The opening
comment tags mark the contained statement as a comment.
Separate Form From Function
When you create your DHTML masterpieces, try to separate form from function. That is, try to keep all of your JavaScript functions in the HEAD section of your HTML document. Further, create your JavaScript functions as generically as possible so that you can reuse code as much as possible.
For example, if you create a JavaScript function that moves an item across a page, write it with the assumption that the event handler will pass all the pertinent information to the function. This way, you can place the function in an external script page and refer to it from several pages. This makes the script much easier to maintain and manage than if it were on every page.
Testing DHTML Across Operating Systems
There is only one tried and true method to ensure that your DHTML pages work correctly across operating systems, browsers, and browser versions--test, test, and test. Complete and accurate testing can be difficult, especially if you don't have access to more than one computer. Several versions of Internet Explorer cannot coexist on the same machine.
Therefore, the best scenario is to grab an old computer and install the older browser versions (Navigator 2.0, 3.01, and 3.03 Gold and Internet Explorer 3.02). Then install the 4.0 or above browsers on a second machine. In addition, don't forget the Macintosh and all the browser versions it supports.
Understanding the Version 4.0 DOMs
Both Interne t Explorer and Navigator have a Document Object Model, which provides access to Web page elements through a scripting language such as JavaScript. The problem is that Navigator and IE have different object models. Significant compatibility issues have not yet been documented for 5.0 and later browsers, in part because of their relatively low market share. Until version 5.0 and 6.0 browsers gain more market share, it's important to understand how to work around the differences between majority leaders IE and Navigator version 4.0 DOMs and to create scripts that work for both.
IE 4.0 and later gives you scripting access to all HTML page elements, including style sheet properties. IE also reflects page elements as objects contained in a document. all collection, and it lets you access elements by index, name, or ID.
For example, you'd use the following code to write out the names of all tags on a page:
 for (i=0; i < document.all.length; i++)
{
document.write(document.all[i].tagName + "\n");
}
Try this code to access a tag by ID:?
  document.write("myLayer visibility is:" +
document.all['myLayer'].style.visibility);?
Any changes to object properties appear on the page instantaneously. Netscape's model provides scripting access to specific collections of HTML page elements, such as layers on the page. The layer collection in Navigator includes areas bounded by a tag and areas positioned using Cascading Style Sheet (CSS) attributes. You can access elements accessed by index, name, or ID within those collections.?
For example, you'd use the code below to write out the names of all layers:?
Â
for (i=0; i < document.layers.length; i++)
{
document.write(document.layers[i].name + "\n");
}?
This bit of code accesses a layer by ID:?
Â
document.write("myLayer visibility is:" +
document.layers['myLayer'].visibility);?
As with IE 4.0 and later, Navigator instantaneously displays changes to layer position, visibility, and clipping on the page.?
To access objects in either browser, you can create a reference variable that encapsulates the syntax for whichever browser the reader is using when the page is loaded.
 if (navigator.appName == "Netscape") {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}?
By building references to objects this way, you can use one script in both browsers. For example, the code below tests the current visibility of an element named myLayer:?
 isVisible = eval(layerRef + '["myLayer"]' + styleRef + '.visibility');?
Test Until It Hurts
The only way to truly ensure that your DHTML Web sites work with all browsers is to test your pages on all the browsers you plan to support. Such thorough testing can be hard to do. If you need to support Internet Explorer 3.0, 4.0, and 5.0, you'll need multiple PCs, since only one version can exist on a single machine at a time (unless you set up multiple boot capability, which is effectively like putting two PCs on one machine).
One useful hint is to run the older browsers on one PC (Navigator 2.0 and 3.x and Internet Explorer 3.x and 4.x) and then put the newer browsers on a second PC. And remember that the Mac versions of these browsers are not exactly the same as their PC counterparts, so if you plan on supporting Macs you'll need to test all the browsers on those machines as well.
