DHTML

Last updated: 21 March 2003 04:19:51 -0600

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:

<HTML>

<HEAD>
<TITLE>Overlapping Positioning</TITLE>
</HEAD>

<BODY>

XXXXXXXXXXXXXXXXXXXX

</DIV>

--------------------------------------------

</DIV>

</BODY>
</HTML>

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.

SETTING UP A FRAMESET

One neat way to help users navigate your Web site (or those of others, if you're that kind of person) is by using frames. You can put navigation controls in one small frame and use the other, larger frame to display content. This approach comes in handy for building interfaces to large quantities of data. But the technical problem you'll quickly run into is that of making one frame control the content of another. There are several ways to solve the problem, but
JavaScript, one element of Dynamic HTML, solves this problem with relative ease. First, let's review HTML frameset syntax. Here's a frame-defining document:

</HEAD>

</FRAMESET>

</HTML>

Go ahead and save that as frameset.html. Next time, we'll build control.html, which contains the JavaScript code that adjusts the contents of the right-hand frame.

----------------------------------------------

CONTROLLING FRAME CONTENTS WITH JAVASCRIPT

In our previous tip, we established a frameset with a mind toward using the left-hand frame as a control pad and the right-hand frame as a place to display content. Today, we'll take a look at the contents of the left-hand frame. Here's the code:

function changeRightFrame(target)

{

switch (target)

{

case "yahoo":

{
parent.content.location.href = "http://www.yahoo.com"
break
}

case "tipworld":

{
parent.content.location.href = "http://www.techsinfo.net"
break
}

case "deja":

{
parent.content.location.href = "http://www.deja.com"
break
}

}

return false

}

</SCRIPT>

</HEAD>
<BODY>

<P>Choose a site.

<P><A HREF="javascript: void changeRightFrame('yahoo')"> Yahoo </A>
<P><A HREF="javascript: void changeRightFrame('techsinfo')"> Techsinfo
</A>
<P><A HREF="javascript: void changeRightFrame('deja')"> Deja.com </A>

</BODY>
</HTML>

Save that as control.html in the same folder in which you stored the frame-defining document, frameset.html, last time. Load up frameset.html and you should see a series of links on the left, with Techsinfo.net on the right. There are a couple of interesting things going on here. First, note the URLs that fit into the links' HREF arguments. A typical one looks like this:

<P><A HREF="javascript: void changeRightFrame('techsinfo')"> Techsinfo
</A>

The URL uses "javascript:" where the protocol usually goes. This allows you to put JavaScript code right there in the link. The code calls a function called changeRightFrame(), which consists of a switch statement (valid only in fourth-generation browsers and newer). The switch statement catches three cases, each of which refers to the href property of the right frame with a line like this:

parent.content.location.href = "http://www.techsinfo.net"

----------------------------------------------

FOR MORE INFORMATION

By now you might be looking for more information on DHTML and how to
use it. For readers who want a tutorial approach, try

DHTML for the World Wide Web
by Jason Teague
Addison-Wesley
ISBN: 0201353415

And for those who already use DHTML regularly and who need a more
advanced approach, check out

Dynamic HTML: The Definitive Reference
by Danny Goodman
O'Reilly & Associates
ISBN: 1565924940

----------------------------------------------

GET FREE DHTML CODING

You have plenty to do as it is--let Dynamic Drive help you out with
what's gone before. This site has free, original DHTML scripts and
components to enhance your Web site. All scripts offered here take
advantage of the latest in DHTML and JavaScript technology, with
emphasis on practicality and backwards compatibility. Categories of
available scripts include menus and navigation systems, browser
windows, special document effects, scrollers, DHTML games, image
effects, links and buttons, and more. The site also offers online
wizards and a newsletter, among other resources. See for yourself at

http://www.dynamicdrive.com/

----------------------------------------------

DHTML IF YOU LOVE NETSCAPE

Netscape's Dynamic HTML Developer Central site focuses on the features
of DHTML that Netscape Navigator supports. News, demos, newsgroups, a
FAQ, documentation, articles, sample code, downloads, and book reviews
are available. HTTP, Java, JavaScript, XML, and LDAP are also covered,
and the site emphasizes cross-platform compatibility. Go to

http://developer.netscape.com/tech/dynhtml/index.html

----------------------------------------------

INDUSTRY SITE OFFERS INFO

The makers of the popular Dreamweaver DHTML authoring tool have a site
with a lot of cool examples and solid information. The Macromedia
DHTML zone contains articles, demos, links to resources, discussion
groups, and information on how to use DHTML with Shockwave,
Macromedia's animation and entertainment product. The DHTML tutorial
demonstrates step by step how to launch SuperFly Fashions. Check it
out at

http://www.dhtmlzone.com/index.html

----------------------------------------------

FROM THE FOLKS WHO BROUGHT YOU HOTWIRED

Here's where you can find out more about DHTML, especially if you're
new to the technology or want to get your hands on easy-to-find,
practical information fast. The WebMonkey site seems to emphasize the
learning side of the quotient, but you'll find lots of articles here
on e-business, design, JavaScript, HTML, databases, multimedia, Java,
browsers, style sheets, and XML, in addition to what it's got on
DHTML. Join the discussion, look up a term, and find out more at

http://www.hotwired.com/webmonkey/dynamic_html/

----------------------------------------------

DHTML AND MICROSOFT

If you're developing for Internet Explorer 4 and above, be sure you
check out this part of Microsoft's gigantic site. It covers everything
related to that company's implementation of DHTML. The MSDN Online Web
Workshop offers white papers, articles, and lessons that will guide
you through the thickets of Web page design, covering DHTML, HTML,
cascading style sheets, and related technologies. For more info, go to

http://msdn.microsoft.com/workshop/author/default.asp

----------------------------------------------

DHTML JOINT EFFORT

WebReview brings together the expertise of Songline Studios, an
O'Reilly & Associates affiliate, and Web Techniques magazine. There's
a Web tools guide and store, but the site's strength is the tons of
articles it has on every aspect related to DHTML. Read more at

http://webreview.com/wr/pub/Dynamic_HTML

----------------------------------------------

GOT A QUESTION? ASK A PRO!

This may not be the fastest way to get a question answered, and
there's no guarantee that it EVER will be answered. Still, DevX's Pros
have been solving problems for long time, and there's a hefty database
of questions and answers that you can draw on if you get stuck. Browse
through the 33 categories and search for your question. Voila! And if
it's not there, just ask the Pro. You may not get the answer tonight,
but you'll have the satisfaction that your problem will help somebody
else out in the future. The site also has links to related areas on
the site. For more, check out

http://www.inquiry.com/techtips/dhtml_pro/

----------------------------------------------

DHTML ONLINE--INFOWORLD ELECTRIC

InfoWorld is a great source of industry news, in either its print or
its online version. InfoWorld is published weekly, and this format
ensures that everything you read is fresh. The hefty size includes
news, product reviews (InfoWorld runs its own testing facility),
opinions, forums, features, and a job resource center with articles
and job postings. The search engine is quick, and when I searched on
"DHTML," 56 returns popped up. To read InfoWorld, go to

http://www.infoworld.com/

----------------------------------------------

DHTML AT DEVX

DevX, a comprehensive Web site for experienced computer programmers,
brings you the latest in articles, links, downloads, FAQs, book
reviews, and more, all for DHTML developers. For an added bonus, you
can get all this for Web developers as well. Check out what's
happening at

http://www.dhtml-zone.com/

----------------
WHAT'S ON YOUR DESKTOP?

The MyDesktop site is just what it sounds like: a collection of
articles, links, tips, tutorials, and downloads, many of which lead
you to other sites for further exploration. You'll find plenty of info
on DHTML and just about any other Web topic you might want to know
about. Go to

http://www.mydesktop.com/

----------------------------------------------

NETSCAPE ON DHTML

Netscape's Dynamic HTML Developer Central has a ton of information,
including articles, book excerpts, documentation, newsgroups, a FAQ,
sample code, downloads, presentations, industry moves and news, and
more. The section on DHTML is just one part of a much larger
programming site; if your interests expand beyond DHTML, you might
want to check it out. Go to

http://developer.netscape.com/tech/dynhtml/index.html

----------------------------------------------

INSIDE DHTML

The Site Experts (formerly the folks at Inside DHTML) have renamed
themselves in an effort to reflect more accurately what they do. Check
out this site for the community aspects of the Web--you can submit,
rate, or discuss any feature of the site's enhanced Develop's Paradise
section; join a discussion group; post a personal profile; or post
your resume or look for a career change in the jobs section. All this
in addition to software downloads, product reviews, and book news. Go
to

http://www.siteexperts.com/

----------------------------------------------

NEW BUG FOUND IN INTERNET EXPLORER 5

Microsoft's Internet Explorer 5.0 browser has been hit with another
coding bug, with news in October of a bug that allows documents to be
stolen and read--even through a firewall. The attack could take the
form of HTML JavaScript that could be activated when a user visits an
Internet site or through other means. Once activated, the JavaScript
could then begin downloading files not to another computer, which
would be detected by a firewall, but rather back to the computer
itself.

"Once it has downloaded the file from itself to itself, that
information is downloaded to any IP address," said Steve Anderson,
vice president of marketing at BigFix, a bug-fixing service in
Berkeley, California.

Microsoft, which is scrambling to issue a patch, stressed that the bug
will not allow hackers to steal or alter information; hackers will
only be able to read it. "The only thing that a Web site can do with
[the security hole] is read selected files from a user's machine if
they know the name of the file," said Scott Culp, a security product
manager at Microsoft. "We're recommending as a workaround that
customers who are worried about this vulnerability disable active
scripting."

For more information, check out BigFix at

http://www.bigfix.com

----------------------------------------------

WANT TO BE CERTIFIED?

If you want to become certified as a bona fide Web developer (maybe
you'll get a raise!), you can check out the University of Illinois's
online Academic Outreach program. This department offers an
interactive learning certification plan that teaches you all the
basics, including DHTML, JavaScript, CGI scripting, Perl, SQL, and
more. Some of the learning labs don't require opening an account. The
group also offers Web building and management tools, hosting services,
chat rooms, and other development features. To find out more, go to

http://www.useractive.com/main2/

----------------------------------------------

THE WEB LEARNING CENTER

Featured last spring in PC Magazine and now undergoing a site
redesign, the Web Learning Center has a ton of resources for those who
want to learn more. Check out the links for authoring tools and
application servers, client/server programming, Web scripting and
programming, Web server solutions, encryption and security, network
solutions, and Web multimedia and animation. Oh, yes--the DHTML
section (along with HTML, XML, SGML, CSS, and VRML) is located under
Web markup and modeling languages. To enter the contest and find out
more, check out

http://www.weblearningcenter.com/

----------------------------------------------

LOOKING FOR WORK? NEED AN EMPLOYEE?

If you're in the employment business, either hiring on or hiring out,
you might want to check out this site. Classified Ads for Programming
Services offers free (for a month) classifieds in the following
categories: CGI (Perl, Visual Basic, C); Java, JavaScipt; HTML, DHTML,
XML, VRML; database developing; Web design, graphics; and general Web
services. To submit an ad or to learn more, go to

http://www.ads-programming.com/

----------------------------------------------
SHAREWARE AND FREEWARE ARCHIVE

Most developers are probably aware of shareware.com and download.com,
C/Net's repositories of all things software. However, C/Net isn't the
only download fish in the sea. One other place to try if you're
looking for products to get you over an ugly development trough is
Simply the Best, which offers tools and utilities for programming,
graphics, business, and Internet development, as well as games.
There's not a ton of stuff on DHTML, but the broader categories might
keep you busy for a while. You can also submit software for
consideration to be posted, and there's a newsletter that keeps you
abreast of what's going on. To check it out, go to

http://simplythebest.net/

----------------------------------------------

FOR THOSE WHO LIKE PAPER

Finding a good book for reference, tutorial, or general learning
experience can take a bit of work. Individual publishers have only
their own titles, and Amazon is so big. You might want to check out
SmartBooks, which lists titles under specific programming categories
(the site's marketing subtext is "books about the Internet") and then
lists books, all by major publishers, in the date order in which they
were published. (The earliest title I saw was one on HTML, published
in December 1996.) Contact info for publishers is provided (links to
their home pages and e-mail links), as well as excerpts and ordering
information. The biggest drawback is that no independent reviews are
provided to help you make purchasing decisions; the book descriptions
are marketing hype from the publishers (although the newsletter may be
more helpful). To find out more, go to

http://www.smartbooks.com/

----------------------------------------------

A SHED FOR TOOLS AND OTHER STUFF

Developer's Shed is a Web site that has general useful things. Check
out the articles, and add some comments of your own. Clip and/or
change some code. Subscribe to the free newsletter. Read an interview
conducted by the site's authors. Join a discussion thread, and find
out how you can write for the site. There's even links to current news
stories. The easy-to-read navigation bar makes everything simple. To
find out if this Shed's for you, go to

http://www.devshed.com/

----------------------------------------------

BUILD A WEB PAGE

The Page Resource Web site will help you understand the new Internet
technologies and give you the tools and techniques to build Web sites.
Included are HTML, JavaScript, DHTML/Cascading Style Sheet, and
CGI/Perl tutorials. Get free graphics and backgrounds for your pages,
and check out the articles on Web design. Be sure to go to the Web
hosting directory, which lists 1,500 Web hosting companies, includes a
guide, and ranks 25 companies it thinks are the best hosting services.
There are also tips, a newsletter, and more. To find out if Page
Resource is a good resource for you, go to

http://www.pageresource.com/index.html

----------------------------------------------

PUBLISHING GIANTS, UNITE!

Two huge high-tech publishers, CMP and Miller Freeman, Inc., merged
this year, sending industry analysts into a tizzy wondering what would
happen to two big companies that just got bigger. For the moment, CMP
still has its own Web presence ("The Online Source for Technology
Professionals") at

http://www.cmpnet.com/

There's a ton of news, features, columns, and downloads there, on all
conceivable development topics. To get more specific, however, you can
find news, downloads, and tutorials on DHTML at the WebTools subsite
section. Go to

http://www.webtools.com/toolbox/dhtml

----------------------------------------------

BROWSER DETECTION THROUGH A BROWSER SNIFFER

One of the surest forms of browser detection is to use a browser
"sniffer." Sniffers are scripts that access the Navigator object and
check the application name of the browser accessing the Web page. Each
browser uses a consistent application name, such as "Microsoft
Internet Explorer" for IE and "Netscape" for Navigator.

if (navigator.appName == "Microsoft Internet Explorer")
// IE specific code
else if (navigator.appName == "Netscape")
// Navigator specific code
else
alert("your browser is an unknown type");

----------------------------------------------
BROWSER DETECTION THROUGH THE OBJECT MODEL

Instead of detecting a specific browser, test for browser capabilities
rather than the type of browser. The technique for doing this is to
test for a specific object model element. For instance, if you're
trying to determine whether to use "document.test" to access and
modify the position of a page element, or to use "test.style," you can
use the following:

if (document.test)
document.test.left = 100;
else if (test.style)
test.style.pixelLeft = 100;

Here's a shortcut method for detecting whether Internet Explorer is
using object model detection:

if (document.all)
// ie specific code

----------------------------------------------
ADDING OPTIONS TO A SELECT FORM ELEMENT

The select form element consists of one or more options designated by
the OPTION tag. You can add to this list dynamically by creating a new
option and then appending the item to the select element's options
array. To add an option to a list, first create the new option:

opt = new Option("Display Value", "value");

Then, check the length of the options list and add the option to the
end of the list:

ct = document.forms[0].selectelement.options.length;
document.forms[0].selectelement.options[ct] = new Option("Display
Text", "value");

----------------------------------------------
REMOVING SELECT OPTIONS

You can filter the options available in a select form element by
removing option elements from the list. Do this by setting the option
to null in the select element's options array:

document.forms[0].selectelement.options[indx] = null;

----------------------------------------------
MODIFYING THE HTML PAGE BASED ON OPTION SELECTION--NAVIGATOR VERSION

You can replace the content of an absolutely positioned DIV or SPAN
element with content selected from an option in a Select list. This
tip demonstrates how to do this for Netscape Navigator. For instance,
to change a header to different sizes, create the positioned DIV
block:

<DIV id="test" style="position:absolute; left: 100; top:100">
<H1>Different Header Sizes</H1>
</DIV>

Then, create the form, select element, and options:

<form>
<select onchange="change()">
<OPTION>
<OPTION><H1>Different Header Sizes - H1 </H1>
<OPTION><H2>Different Header Sizes - H2 </H2>
<OPTION><H3>Different Header Sizes - H3 </H3>
<OPTION><H4>Different Header Sizes - H4 </H4>
<OPTION><H5>Different Header Sizes - H5 </H5>
</select>
</form>

You must use the mnemonics for the angle brackets (< for < and > for
>); otherwise, the HTML will be implemented instead of displayed.

Next, add in the JavaScript change function, which writes the new
string to the DIV block:

function change() {
// get entry
indx = document.forms[0].elements[0].selectedIndex;
str = document.forms[0].elements[0].options[indx].text;

if (navigator.appName == "Netscape") {
document.test.document.write(str);
document.close();
}

Each absolutely positioned block such as the DIV block shown here has
its own version of the document object. You can write to this document
object to replace the existing page contents. Make sure you close the
DIV's document to force the browser to redraw the element.

The next tip will demonstrate how to change the page contents for
Internet Explorer.

----------------------------------------------
MODIFYING THE HTML PAGE BASED ON OPTION SELECTION--INTERNET EXPLORER

You can replace the content of an absolutely positioned DIV or SPAN
element with content selected from an option in a select list. Our
last tip demonstrated how to do this for Netscape's Navigator. This
tip demonstrates the technique to use for Internet Explorer. For
instance, to change a header to different sizes, create the positioned
DIV block:

<DIV id="test" style="position:absolute; left: 100; top:100">
<H1>Different Header Sizes</H1>
</DIV>

Then, create the form, select element, and options:

You must use the mnemonics for the angle brackets (< for < and > for
>);, otherwise, the HTML will be implemented instead of displayed.

Next, add in the JavaScript change function, which writes the new
string to the DIV block:

function change() {
// get entry
indx = document.forms[0].elements[0].selectedIndex;
str = document.forms[0].elements[0].options[indx].text;

if (navigator.appName == "Microsoft Internet Explorer")
test.innerHTML = str;
}

Microsoft has provided the innerHTML attribute, which can be used to
replace the existing HTML of the specified element--in this case, the
absolutely positioned DIV block "test."

----------------------------------------------
CAPTURING EVENTS IN NETSCAPE NAVIGATOR

Netscape's Navigator allows you to capture events on certain objects
such as the document or window, or on a specific layer. You use the
captureEvents and releaseEvents functions to capture and release an
event, respectively. For instance, to capture the mousedown event on
the browser document object, use the following:

document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=test

The first line starts the capturing of the mousedown event anywhere in
the document, and the second assigns the function "test" as the event
handler. To release the mouse event, use this:

document.releaseEvents(Event.MOUSEDOWN)

In the next tip, we'll show an example of cross-browser event
handling.

----------------------------------------------
CROSS-BROWSER MOUSE EVENT HANDLING

In our last tip, we showed you a technique for capturing the mousedown
event on the document object. In this tip, we'll look at a
cross-browser event handling routine. First, you have to capture the
event with Navigator:

if (navigator.appName == "Netscape")
document.captureEvents(Event.MOUSEDOWN);

Next, for both Internet Explorer and Navigator, assign an event
handler function to the mousedown event:

document.onmousedown=process_test

Last, create the mousedown event handler function:

function test(evt) {
if (navigator.appName == "Netscape")
alert(evt.pageX);
else
alert(window.event.clientX);
}

Netscape sends its version of the Event object through the event
handler function, and IE provides access to its event object on the
window object. In the function, cross-browser code is used to access
each browser's event object. Then, the horizontal position of the
mousedown event is printed out in an alert box, again using the
browser-specific event property (pageX for Navigator, clientX for IE).

In the next tip, we'll continue this exercise on cross-browser event
handling by moving a DIV block to wherever the mousedown event occurs.

----------------------------------------------
INTERACTIVE MOVEMENT OF A DIV BLOCK

In the last couple of tips, we described how to capture events for
Navigator and then how to handle events for both Internet Explorer and
Navigator. This tip concludes this event handling example by capturing
the mousedown event for the document, and moving an absolutely
positioned DIV block to the location where the mouse event occurs.
First, create the positioned DIV block:

<DIV id="tester" style="position:absolute; left:20; top: 10">
<H1>Hello</H1>
</DIV>

Next, in a JavaScript code block, we'll capture the mousedown event
for Navigator and point the event handler at a function for both
Navigator and IE:

if (navigator.appName == "Netscape") {
document.captureEvents(Event.MOUSEDOWN);
}

document.onmousedown=test;

Now, clicking anywhere on the page moves the "Hello" message to that
location.

----------------------------------------------
EVENT HANDLING REFERENCES

Read more about Navigator's event handling in chapter 10 of Netscape's
client-side JavaScript User Guide at

http://www.pcworld.com/r/tw/1,2061,tw-dhtml1,00.html

Read more about Internet Explorer's event handling in Microsoft's MSDN
Online Web Workshop reference page for the event object at

http://www.pcworld.com/r/tw/1,2061,tw-dhtml2,00.html

----------------------------------------------
INTERNET EXPLORER FILTERS

Microsoft's Internet Explorer has some interesting filter effects that
you can apply to most Web page objects. For instance, one of the
filters is the "glow" filter, which creates a glowing "edge" around
whatever content is being modified:

<DIV style="position:absolute; left:20; top: 20; filter:
glow(color=red,strength=3)">
<H1>Hello</H1>
</DIV>

In this example, the DIV block is positioned, absolutely, at 20 pixels
from the top-left side of the page, and a red glow is applied to the
block contents--an H1 header with the word "Hello." You can read more
about filters at

http://msdn.microsoft.com/workshop/author/filter/filters.asp

Note: These work only with IE 4.x and up (not with Navigator).

----------------------------------------------
CREATING A SHADOW EFFECT

You can create a shadow effect for your text by creating foreground
and background copies of the text and stacking them, offsetting the
foreground text slightly from the background. You use the CSS z-index
attribute to determine which block of text is placed in what position
in the stack.

For instance, the following creates a shadowed header, with the darker
background shadow placed behind and a bit above and to the left of the
foreground text. Both text blocks are set to a font of Arial, as you
want the text to be identical except for position, color, and z-index.

<DIV style="position:absolute; left: 100; top: 100;
color: maroon; z-index: 1; font-family:Arial">
<H1>Hello, World!</H1>
</DIV>
<DIV style="position:absolute; left: 103; top: 103;
color: red; z-index: 2; font-family: Arial">
<H1>Hello, World!</H1>
</DIV>

----------------------------------------------
PROTECT YOUR MOUSE-SENSITIVE CONTENTS UNTIL THE PAGE IS LOADED

One problem with using mouse-capturing events is that the Web page
client can be moving his or her mouse over your page before the page
is loaded and before all the necessary objects have been loaded. This
can generate an Object Not Defined type of error that can be
disconcerting to the page client.

To prevent this, hide your mouse-sensitive content until after the
page is loaded, and then show the content in a function that can be
called by the onLoad event handler:

----------------------------------------------
CREATING ANIMATION EFFECTS WITH DHTML AND A TIMER

Animate your pages by creating a function that moves content based on
timer events. For instance, you can create a positioned DIV block as
follows:

<DIV id="hello" style="position:absolute; left: 103; top: 103;
color: red; z-index: 2; font-family: Arial">
<H1>Hello, World!</H1>
</DIV>

You can animate this block by using the window object function
"setTimeout" to create a timer event that calls the animation
function, and start the timer by calling setTimeout in the onLoad
event for the document:

In the animate function, test for a condition and reset the timer if
the condition isn't met. In our example, the block is moved until the
left position is at 300 pixels:

var pos = 10;

function move() {
if (pos < 300) {
pos+=10;
if (navigator.appName == "Microsoft Internet Explorer")
hello.style.pixelLeft = pos;
else
document.hello.left=pos;
setTimeout("move()",200);
}
}

----------------------------------------------
ACCESS AN ONLINE DHTML TUTORIAL

You can discover more about the basics of Dynamic HTML by accessing an
online DHTML tutorial I created, located at

http://www.yasd.com/samples/dhtml/tutorial.htm

The tutorial was originally created for CNET's December 1998
builder.com convention.

----------------------------------------------
LAYERED FORMS

You can hide and show HTML different forms by enclosing the forms
completely within absolutely positioned DIV blocks, and then setting
the enclosing block's visibility. You can't, however, split a form
across many positioned DIV blocks because of Navigator's
implementation of "layers" (created with the LAYER tag or using
positioned DIV blocks).

----------------------------------------------
REPLACING PAGE CONTENT--NAVIGATOR

You can replace the content of a layer with Navigator by using a
combination of document.write and document.close on the layer. For
instance, you can create a positioned DIV block using something
similar to the following:

<DIV id="test" style="position:absolute; left: 20; top: 20">
<H1>Hello</H1>
</DIV>

You can replace the content by doing the following:

document.test.document.write("<H1>Hello, World!</H1>");
document.test.document.close();

Each layer gets its own document object, and the write method creates
new content in the document. The close method then forces a redraw of
the new content. Note that any CSS applied to the block is removed
when the contents are replaced.

----------------------------------------------
REPLACING PAGE CONTENT--INTERNET EXPLORER

Microsoft has provided an attribute, the innerHTML attribute, which
can be used to replace the HTML content of an element. For instance,
you can create a positioned DIV block using something similar to this:

<DIV id="test" style="position:absolute; left: 20; top: 20">
<H1>Hello</H1>
</DIV>

You can replace the content by doing the following:

test.innerHTML = "<H1>Hello, its me<H1>";

Note that innerHTML preserves the CSS setting for the block. To remove
the CSS, use the outerHTML attribute instead.

----------------------------------------------
CREATING A BORDER EFFECT

Add a pretty border to highlight an image by using the CSS border
properties. For instance, the following surrounds an image with an
outset style of border, 8 pixels wide and magenta colored:

----------------------------------------------
CLIPPING CONTENT

You can clip content by setting the CSS clipping region to be much
smaller than that required for the content:

Use clipping as the basis for creating animated scrolling effects. For
instance, to scroll "down," set the top and bottom clip values to 0,
rect(0 100 0 0), to totally clip the object. Then, use script to
unscroll the object to its full height:

if (navigator.appName == "Netscape")
document.objectname.clip.bottom=300;
else
objectname.style.clip="rect(0 100 300 0)";

You can create a scroll animation by setting the object's height in
increments until the full object is exposed.

----------------------------------------------
DEBUG EVAL BY PRINTING OUT EVAL STRING

If you use eval to evaluate (implement) DHTML effects, you can debug
the results by assigning the evaluation DHTML to a string and printing
this out with an alert box:

var str = docobj + "layername" + styleobj + "visibility='hidden'";
alert(str);
eval(str);

Using this technique, you can make sure that the parts you are pulling
together form a syntactically correct whole.

----------------------------------------------
NEW AND IMPROVED DOM IN 6.0 BROWSERS

Internet Explorer 5.0 and the upcoming Navigator 5.0 support the W3C
recommended Document Object Model (DOM), Level 1. Because of this
cross-browser support, creating DHTML effects that work with both
browsers has just become a whole lot easier. Read more about the DOM
at the World Wide Web Consortium (W3C) Web site at

http://www.w3.org

We'll also be covering more on the DOM in next month's tips.

----------------------------------------------
TRANSITION EFFECTS WITH CLIP

You can create a cross-browser transition effect using the CSS clip
property. For instance, to transition between a header of one color to
another, you can create the original and transitions headers in
separate DIV blocks, layered on top of each other; the "transition to"
block is located at the topmost (highest z-index position):

<DIV id="one"
style="position:absolute; left: 20; top: 20; color: red;
background-color: lime;
clip: rect(0px 300px 150px 0px)">
<H1>This is your DHTML!</H1>
</DIV>

<DIV id="two"
style="position:absolute; left: 20; top: 20; z-index: 2; color: lime;
background-color: red;
clip: rect(0px 0px 150px 0px)">
<H1>This is your DHTML!</H1>
</DIV>

The "transition to" block is clipped all the way to the left, by
setting the right-side clip value to the same value as the left-side
clip value--0 pixels.

Next, create a function that will "add" to the current right-clip
value when a timer event occurs:

var right = 0;
function transition() {
if (right < 300) {
right = right + 10;
if (navigator.appName == "Microsoft Internet Explorer")
two.style.clip="rect(0px " + right + "px 150px 0px)";
else
document.two.clip.right = right;
setTimeout("transition()",100);
}
}

The right side of the clipping region is increased with each timer
event, creating a transition effect as the "hidden" content is
displayed, incrementally. The whole effect is started by a first call
to the transition function, based on whatever event you choose.

This effect works with Navigator 4.x and Internet Explorer 4.x and up.

----------------------------------------------
ALIGNING HTML TABLES

You're probably aware that you can align an image to the right, left,
or center of other Web page contents, but you may not be aware that
you can do the same with an HTML table.

Sizing a table to be narrower than the Web page creates a sidebar for
the page contents, much as it would appear in print media such as
magazines. For instance, you can align a table to the right of
existing Web page contents using a table tag definition similar to the
following:

The ALIGN attribute is deprecated with HTML 4.0, but current browsers,
including the Mozilla Open Source browser, still support this
attribute--at least for now.

----------------------------------------------
MOZILLA AND NAVIGATOR 5.0

Navigator 5.0 beta should be released . . . some time, we hope soon.
This version of the browser is based on the Mozilla Open Source effort
and should support HTML 4.0, CSS 1 and 2, XML, and other standards.

In the next few weeks, the DHTML tips will cover examples compliant
with these standards that work with Internet Explorer 5.0 as well as
Navigator 5.0. Read more about what Navigator will, and won't, support
in an article I wrote for DevX at:

http://www.pcworld.com/r/tw/1%2C2061%2Ctw-dhtml1209xx%2C00.html

----------------------------------------------
PSEUDO CLASSES AND ELEMENTS

According to the CSS2 specification released by the World Wide
Consortium (W3C), styles can be applied other than just to elements
within the document tree. For instance, we know that we can change the
color of the font contained in all paragraphs, using a style setting
such as this:

P { color: red}

We can also apply a style to a specific named paragraph, using
something like this:

P.test { color: red}

However, sometimes we might want to apply a style to an element based
on its position relative to other elements, or to an element in a
specific state. The pseudo classes and elements extend the CSS to just
such uses.

For instance a popular pseudo-class is :hover, applied to the anchor
element (A), and which only applies when the Web page reader's mouse
is over the hypertext link:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Tip</TITLE>
<style type="text/css">
A:hover { color: red }
</style>
</HEAD>
<BODY>
<a href="somepage.htm" >Link Reference</a>
</BODY>
</HTML>

This example works with Internet Explorer 5.0 and Mozilla build M11
(Navigator 5.0 Open Source).

----------------------------------------------
PSEUDO-ELEMENTS

As mentioned in the last DHTML tip, some styles are applied to
elements and classes outside the HTML document tree. This tip is about
the :first-letter pseudo-element, which applies to the first letter of
the contents defined by the element.

To demonstrate, we'll create a style sheet that sets the first-letter
pseudo-element text to be larger than the other content text, a red
color, and bold. The text is also floated to the left so that text
appears dropped compared to the other text. The styles and the
document elements to create the effect are

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Tips</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; }
P:first-letter { font-size: 48pt; color: red;
font-weight: bold; }
</STYLE>
</HEAD>
<BODY>
<P>Another psuedo-element is :first-letter, which applies the first
letter of the pseudo-element tag</P>
</BODY>
</HTML>

This example works with Mozilla (Navigator 5.0 Open Source).

----------------------------------------------
VALIDATE YOUR WEB PAGE'S HTML

The W3C (World Wide Consortium) has an online validator that can
validate your use of HTML. You can validate HTML using the online HTML
validator at

http://validator.w3.org/

If your page makes use of deprecated elements, use the following
DOCTYPE and your page will still validate even if deprecated (not
obsolete) elements are used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

----------------------------------------------
VALIDATE YOUR USE OF CSS

The W3C (World Wide Consortium) has a validator tool you can use to
validate the CSS you use within your Web pages. Validate CSS using the
W3C validation service at

http://jigsaw.w3.org/css-validator/validator-uri.html

----------------------------------------------
IDENTIFYING SCRIPT WITH TYPE

Since JavaScript was first released, the type of scripting language
and the version of scripting engine has been identified using the
LANGUAGE attribute:

Starting with HTML 4.0, the LANGUAGE attribute has been deprecated.
Instead, the W3C recommends the use of the TYPE attribute, using the
scripting MIME type:

To satisfy HTML 4.0 requirements and still have script picked up by
older browsers, use both attributes:

Just be sure to use the transitional DOCTYPE to ensure the page
validates:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

----------------------------------------------
ACCESSING AN ELEMENT USING THE DOM

The W3C (World Wide Consortium) has issued a recommendation for the
Document Object Model, Level 1 specification. Any browser that
implements this specification will then support DOM access of
elements.

The W3C has also provided a ECMAScript (scripting) binding for the
DOM, providing methods and objects that can be accessed using
client-side script. For instance, you can create a "named" (id)
element in a page:

<p id="test" style="position:absolute; left: 20px; top: 20px">
Some document content
</p>

In script, you can dynamically access this element by name using the
DOM method getElementById:

var itm = document.getElementById("test");

This method works only with browsers that support DOM Level 1.

----------------------------------------------
ACCESSING HTML ELEMENTS THROUGH HTML OR CORE DOM

The W3C Document Object Model (DOM), Level 1, has two defined models.
The Core model is a lower-level DOM, and page elements can be accessed
using a method such as getElementsByTagName, and then looking for the
element by the id:

theelements = document.getElementsByTagName("P");
alert(theelements["test4"].id);

The second model is the HTML DOM, a higher level model consisting of
objects defined for each type of HTML element, such as HTMLFormElement
and HTMLParagraphElement. You can get a specific element using the
getElementById and providing the id:

itm = document.getElementById("test4");
alert(itm.id);

----------------------------------------------
ACCESSING HTML ELEMENTS THROUGH THE HTML DOM

The last tip demonstrated how to access HTML elements using the W3C
Core DOM, a lower level set of objects that can be used to access
objects within a Web page.

The second model supported in the W3C Level 1 DOM is the HTML DOM, a
higher level model consisting of objects defined for each type of HTML
element, such as HTMLFormElement and HTMLParagraphElement. You can get
a specific element using the getElementById and providing the id:

itm = document.getElementById("test4");
alert(itm.id);

----------------------------------------------
ACCESSING ALL ELEMENTS OF A TYPE

You can use the ECMAScript binding method of getElementsByTagName to
obtain a NodeList. A NodeList, in turn, contains references to Nodes
representing each element of the type specified in the
getElementsByTagName method. The Nodes represent HTML elements and can
be used to access information about the element or make modifications
to the element's attributes.

The page also contains a named header, created using the H1 element
delimiter tags.

As an example of the getElementsByTagName, several paragraphs are
added into a page and each is named by setting the element's id
attribute. Then, getElementsByTagName accesses all elements of the
type P, or paragraph, from the page and prints out the element's id.
The complete page is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HEAD>
<TITLE>Tips</TITLE>
<SCRIPT type="text/javascript">

function change_position() {
theelements = document.getElementsByTagName("P");
for (i = 0; i < theelements.length; i++)
alert(theelements[i].id);

}
</SCRIPT>
</HEAD>
<BODY onLoad="change_position()">
<P id="test1" > Some content </P>
<P id="test2" > Some content </P>
<P id="test3" > Some content </P>
<P id="test4" > Some content </P>
<H1 id="testh1">Some content</H1>
<P id="test5" > Some content </P>
</BODY>
</HTML>

This example works with Internet Explorer 5.0 and Mozilla M11 and up
(Navigator 5.0 Open Source).

----------------------------------------------
GETTING READY FOR DOM BROWSERS--ARTICLE BY DANNY GOODMAN

Danny Goodman has an article at Netscape's View Source that discusses
what will and won't change with browsers supporting the W3C DOM,
including Navigator 5.0. Access his article, titled "Getting Ready for
the W3C DOM," at

http://developer.netscape.com/viewsource/goodman_cross/goodman_cross.htm

----------------------------------------------
UPDATING SCRIPTS FOR 5.0 BROWSERS--ARTICLE BY ERIK KROCK

Erik Krock, senior product manager for Navigator's layout engine and
undisputed guru of Dynamic HTML at Netscape, has an article on getting
ready for Navigator and Internet Explorer 5.0 browsers. Access his
article, titled "Updating Your JavaScript and CGI Scripts," at

http://developer.netscape.com/viewsource/krock_v5.html

----------------------------------------------
ALTERING HTML ELEMENT ATTRIBUTES THROUGH HTML OR CORE DOM

In addition to accessing a specific HTML element using either the Core
or the HTML DOM, you can also use either of these models to modify the
element's attributes. For instance, the paragraph element (<P>) has an
attribute of ALIGN that is deprecated in HTML 4.0 but still supported,
as recommended by the W3C. This attribute has also been exposed in the
DOM, through either the Core model or the HTML model.

To modify the alignment of a paragraph using the Core model, you can
use the following:

theelements = document.getElementsByTagName("P");
itm = theelements["test4"];
itm.setAttribute("align", "center");

You can also modify the alignment of the paragraph using the HTML
model like this:

itm = document.getElementById("test4");
itm.align="center";

----------------------------------------------
ALTERING HTML ELEMENT ATTRIBUTES THROUGH HTML DOM

The last tip demonstrated how to access an HTML element using the W3C
Core DOM. You can also modify the alignment of the paragraph using the
HTML model as follows:

itm = document.getElementById("test4");
itm.align="center";

This example works with Internet Explorer 5.0 and Mozilla M11 and up
(Navigator 5.0 Open Source).

----------------------------------------------
USING THE STYLE ATTRIBUTE TO MOVE A PAGE ELEMENT DYNAMICALLY

CSS is applied to an HTML element through the use of the STYLE
attribute. The STYLE attribute can also be used to access and
dynamically change the CSS styles for a specific element, if the
browser supports the dynamic modification of CSS styles.

To demonstrate, the position of a page paragraph can be changed by
accessing a paragraph element and modifying the left and top CSS2
attributes, defined in the paragraph's STYLE attribute:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HEAD>
<TITLE>Tips</TITLE>
<SCRIPT type="text/javascript">

function change_position() {
var itm = document.getElementById("test");
itm.style.left="100px";
itm.style.top="150px";
}
</SCRIPT>
</HEAD>
<BODY onLoad="change_position()">
<P id="test" style="position:absolute; left: 50px; top: 50px">
Some content
</P>
</BODY>
</HTML>

This example works with Internet Explorer 5.0 and Mozilla M11 and up
(Navigator 5.0 Open Source).

----------------------------------------------
USING THE STYLE ATTRIBUTE TO CHANGE AN ELEMENT'S APPEARANCE
DYNAMICALLY

You can use the STYLE attribute to alter the appearance of an element
dynamically. For instance, you can alter the font of an element to a
different color, font family, and font style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HEAD>
<TITLE>Tips</TITLE>
<SCRIPT type="text/javascript">

function change_appearance() {
var itm = document.getElementById("test");
itm.style.color="#ff00ff";
itm.style.fontFamily="Verdana,Arial,Helvetic";
itm.style.fontWeight="bold";
}
</SCRIPT>
</HEAD>
<BODY onLoad="change_appearance()">
<P id="test" style="position:absolute; left: 50px; top: 50px">
Some content
</P>
</BODY>
</HTML>

This example works with Internet Explorer 5.0 and Mozilla M11 and up
(Navigator 5.0 Open Source).

----------------------------------------------
DIFFERENCES BETWEEN VISIBILITY AND DISPLAY

You can hide content within a Web page in two ways. The CSS Visibility
attribute allows you to hide or show content, but the content still
maintains its position within the Web page and still affects the page
layout.

The Display attribute, on the other hand, can be set to a value of
"none," and not only is the element removed from the page display, it
is also removed from the page layout:

This works with CSS2-compliant browsers only.

----------------------------------------------
CHANGING THE CURSOR WHEN IT'S OVER AN ELEMENT

The CSS2 style specification has a cursor property that can be used to
change the cursor style when the Web page reader moves his or her
mouse cursor over the element. For instance, you can change the cursor
to a crosshair when the mouse cursor is over the DIV block by using
this:

This works with CSS2-compliant browsers only.

----------------------------------------------
WEB BUILDING WITH CLASS

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 3
* Internet Explorer 4
* Internet Explorer 5
* NS4

One of the difficulties in implementing cascading style sheets
effectively across platforms comes from the fact that Internet
Explorer 5.0 supports a tag attribute called style that can be used to
implement specific CSS attributes on a given HTML element but Netscape
Navigator does not.

Before abandoning the use of CSS for Netscape, however, check out the
class attribute. With class, you can create a style sheet (either
locally or externally) that defines specific styles for the elements
that use the class, and the styles will hold across platforms. Here's
an example:

----------------------------------------------
MAKE YOUR HTML XML COMPLIANT

Level: Beginner
Category: Design
Browsers Targeted: All

When designing HTML code, get into the habit of making your code XML
compliant. There are advantages to this compliance: As XML becomes
more prevalent as a way of generating Web pages, XML-compliant code
can be more readily searched, requires far less handling, and can be
kept internally in a database, making for easier maintainability.
Fortunately, HTML code is pretty close to being XML, so the changes
that you need to make are fairly minor:

* Make sure that any open tag has a corresponding closing tag. For
example, a number of HTML processors use the <P> mark erroneously as a
paragraph marker, rather than as the start of a paragraph container.
By making sure each <P> tag has a corresponding </P>, you move back
into the container/contained relationship that defines XML.
* Some tags in HTML have no corresponding close tag (such as the <IMG>
or <HR> tags). In this case, you can still add a closing tag in most
circumstances and the browser won't complain, even though by the
browser's DTD, the syntax is incorrect.
* Attributes should always be quoted, although whether you use a
single quote or a double quote is a personal decision. Unfortunately,
many HTML editors follow the peculiar convention of quoting an
attribute only if the unquoted attribute would cause a
misinterpretation of the attribute (for example, if the attribute
value had a space in it). These are legitimate (though bad form) HTML
syntaxes but aren't valid XML.
* Some attributes don't have any attribute value associated with them,
such as the SELECTED attribute in an OPTION tag. Again, this is valid
HTML but not valid XML. However, with almost all values, if you set
the attribute value to the name of the attribute, the browser won't
complain, and you'll make your code XML compliant. For example, the
following code shows HTML that is both XML compliant and HTML
parseable:

<select>
<option selected="selected" value="a">The first option</option>
<option value="b">The second option</option>
</select>

* Some blocks of information require whitespace support (such as a
script block) or contain HTML code shown as samples. You can use the
XML tags <![CDATA[ and ]]> tags to tell the parser to not attempt to
interpret the text contained within as XML expressions. For example,
the following script block makes use of exactly such a convention:

That's pretty much all you need to do. The encoding is a little more
hassle when dealing with a WYSIWYG environment, but by keeping your
code compliant you dramatically increase what can be done with it and
make it easier to retrieve, and you can cut down on the maintenance of
static files as a result.

----------------------------------------------
CHANGING SELECTION ATTRIBUTES

Level: Beginner
Category: Forms
Browsers Targeted:
* Internet Explorer 3
* Internet Explorer 4
* Internet Explorer 5

You can change selection boxes from list boxes to combo boxes by
changing their size attribute. If size is 1 or less, then select boxes
act like drop-down list boxes, while setting size greater than 1 will
display that many entries in the list box, as follows:

<select size="4">
<option selected="true">Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Red</option>
<option>Brown</option>
<option>Black</option>
<option>White</option>
</select>

With a size of "4", four items will appear in the list box. If
size="1", then the box becomes a drop-down box instead.

<select size="1">
<option selected="true">Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Red</option>
<option>Brown</option>
<option>Black</option>
<option>White</option>
</select>

----------------------------------------------
CREATING DROP CAPS

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

Drop caps (enlarged letters that start out a page or paragram) can be
implemented fairly easily using a few basic CSS properties. One of the
most potent is the float property, which causes the contained element
to float to the left or right of the container. A simple drop cap may
look something like the following:

<div>
<span
style="float:left;margin-top:-5pt;font-size:36pt;font-family:times">T</span>
his is an example of a drop cap at work.</div>

In general, drop caps work best when done within <span> tags. You may
also want to turn it into a general style rule in a style sheet--this
will make it simpler to use drop caps more than once in your
documents, and it makes your code easier to maintain.

----------------------------------------------
TRACKING MOUSE COORDINATES

Level: Intermediate
* Category: CSS
* Category: JavaScript
* Category: Events
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

You can use the onmouseover event to locate the position of the mouse
relative to a container. This event method, applied to a given object,
can read the window.event object to return the current location of the
mouse relative to any number of coordinate systems--relative to the
current element (x,y), relative to the client window
(clientX,clientY), relative to the screen (screenX,screenY), and
relative to the offset of the element from the client window
(offsetX,offsetY).

&ltscript&gt
function showMousePosition(){
mouseX=window.event.x;
mouseY=window.event.y;
window.status="Mouse Coordinate is ("+mouseX+","+mouseY+")";
buf="x="+mouseX+",y="+mouseY+"\n";
buf+="clientX="+window.event.clientX+",
clientY="+window.event.clientY+"\n";
buf+="screenX="+window.event.screenX+",
screenY="+window.event.screenY+"\n";
buf+="offsetX="+window.event.offsetX+",
offsetY="+window.event.offsetX; coords.innerText=buf;
}
&lt/script&gt
&ltdiv style="width:400px;height:200px;border:outset 2px
red;background-color:red;" onmousemove="showMousePosition()"
onmouseout="window.status='';"&gtRoll the mouse over this rectangle to
see &ltb&gtonmousemove&lt/b&gt at work.&ltbr /&gt
&ltdiv id="coords" /&gt
&lt/div&gt

----------------------------------------------
DETERMINING DELIVERY DATES

Level: Advanced
Category: Scripting
Browsers Targeted: All

My wife has a baby on the way, and one of the things that I always
have trouble with is keeping track of what stage of development the
baby is in. Fortunately, you can use a few JavaScript Date objects to
create a mini-baby tracker.

This particular project makes use of three distinct dates--the
estimated conception date of the baby (if that's unknown, most
physicians place it ten days after the end of the last menstrual
period), the current date, and the estimated date of birth. In
addition to providing a useful service, this example shows how you can
determine one date from an offset of another date.

The key to understanding this is to realize that internally, all dates
are stored as the number of milliseconds from a specific target date;
in the case of JavaScript (and in general), that date has been
arbitrarily set to January 1, 1970. By representing dates in this
fashion, you can effectively do simple arithmetic on the date to get
another date.

For example, if you subtract one date from another, the result is the
number of milliseconds between the two dates. Similarly, the getTime()
function returns the number of milliseconds from January 1, 1970, to
the date specified. Thus, to find the due date, I calculated the
number of milliseconds in 280 days, the normal period of gestation for
a human fetus, and added it to the number of milliseconds from the
reference date to the date of conception.

Just a cautionary note: Please be aware that this technique should not
replace one's doctor or midwife. Babies are notorious for missing
their "due" dates, since there are many things far more important in a
doctor's visit than the estimated time that the baby will pop out into
the world.

&ltscript&gt
function calcDates(){
var monthNames=new Array("January","February",
"March","April","May",
"June","July","August","September","October",
"November","December");
var conceptDate=new Date(conceptionDate.value);
var currentDate=new Date();
var numMS=currentDate-conceptDate;
var numDays=Math.floor(numMS/(1000*60*60*24));
var numWeeks=Math.floor(numDays/7) var
dueDate=new Date(conceptDate.getTime()
+1000*60*60*24*280);
var buf="You are currently "
var daysIntoWeek=numDays-numWeeks*7;
if (daysIntoWeek==0){
buf+="entering into "; }
else {
buf+=daysIntoWeek + " days into ";
}
buf+="Week "+numWeeks+" of your pregnancy."
buf+="Your anticipated due date is
"+dueDate.getDate()+" "+monthNames
[dueDate.getMonth()]+" "+dueDate.getYear()+".";
results.innerHTML=buf;
}
&lt/script&gt

Please enter the date you believe the baby to have been conceived:

&ltinput type="text" name="conceptionDate" id="conceptionDate"
value="6/10/99" /&gt
&ltinput type="button" name="calcDates" id="calcDates" value="Get
Dates" onclick="calcDates()" /&gt&ltbr /&gt
&ltdiv id="results" /&gt

----------------------------------------------
PRINTING FROM IE5

Level: Intermediate
Category: JavaScript
Category: Printing
Category: Events
Browsers Targeted:
* Internet Explorer 5

One of the more welcome developments of the IE5 browser is the
capability to print from code. This particular feature performs
exactly the same action as choosing Print from the menu--the command
window.print causes the Print dialog box to pop up, letting users
specify print information. Once the user clicks OK, the browser fires
the onbeforeprint event on the window, prints the document, then fires
the onafterprint event. The reason for the two events is to let you as
an application developer change the state of the displayed page to
reflect what you want to have printed, then restore it to its original
state once the page has been spooled to the printer.

----------------------------------------------
CREATING SIMPLE TOOLTIP TEXT

Level: Beginner
Category: HTML Attributes
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

A well-known feature of HTML is that you can use the ALT attribute on
an image tag to create a pop-up ToolTip (a light yellow text box
describing the image). What is less well known is with IE4 and above
you can also set the TITLE attribute for nearly any element in HTML to
do the same thing. For example, you could set the TITLE for a set of
unfamiliar terms so that it contains definitions for that term, as
follows:

When you hover over the words in question, a ToolTip will pop up,
explaining the abbreviation. Note that because you can't keep HTML
notation in attributes, you can display only unformatted ToolTip
information.

----------------------------------------------
JUMPING WITH ELEMENT IDS

Level: Intermediate
Category: DHTML
*Category: Scripting
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

Anchored name tags, though a staple of earlier HTML, have largely
become obsolete as the power of the HTML DOM has increased. Before you
start adding anchors for links to jump to, you may want to consider
instead the use of the method scrollIntoView(), if you are working
strictly with an Internet Explorer browser. This method, when applied
to an object, will scroll the page until that element is visible. If
you know the id of the item to move to, you can write a simple
JavaScript method jumpTo that will let you jump to that item:

----------------------------------------------
SETTING BORDERS

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

Borders can be used to provide useful special effects, if used
properly. If you're working with borders in Internet Explorer, you can
call on several useful CSS properties. Each border supports three
distinct properties: style, width, and color. Style lets you change
the visual appearance of the border, with possible values including:

* solid (a single solid line)
* double (two concentric lines of at least three pixels width)
* inset (a border where the upper and left-hand sides are darker than
the bottom and right-hand sides)
* outset (the inverse of inset)
* groove (a border that appears incised around the container)
* ridge (a border that's excised around the container)
* dotted (a border consisting of alternating dots and spaces)
* dashed (a border consisting of alternating dashes and spaces)
* none (turns bordering off)

Note that Internet Explorer treats dotted and dashed lines as solid
lines under Windows and UNIX but recognizes those styles on the
Macintosh. Certain styles, such as double, grooved, and ridged,
require that the width of the border be set to at least 3.

You can apply these attributes one at a time through the CSS border
property, using the border-style, border-color, and border-width
properties, respectively, or you can apply them as a single triplet
attribute, in the order border:style width color;. For example, to set
the border to be a red-tinted, three-pixel inset rectangle, you'd set
the container's style property in one of two possible ways:

<div
style="border-style:inset;border-color:red;border-width:3px;">This is
a three pixel wide inset red rectangle.</div>

<div style="border:inset red 3px;">This is also a three pixel wide
inset red rectangle.</div>

You can also effectively apply a border to each side individually,
through the border-left, border-top, border-right, and border-bottom
characteristics separately, or through combinations of side and
property (such as border-bottom-style). Thus, you could create
something like an annotation style, with the left-hand border colored
green to indicate that the text block is an annotation:

----------------------------------------------
KERNING YOUR TEXT

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

You can do a limited amount of text kerning with the letter-spacing
CSS attribute. This determines the amount of space between letters and
can be expressed in any system units. For example, you might want to
make the letters A, V, and A overlap slightly in a logo word, AVAnte.
You can use letter spacing to reduce the space between them:

----------------------------------------------
WORKING WITH THE CLIPBOARD IN IE5

Level: Advanced
Category: Scripting
Browser Targeted:
* Internet Explorer 5

The Internet Explorer 5 browser supports several standard Windows
features at a much higher level than its predecessors. One of the more
useful of these features is the ability to save and retrieve
information from the Clipboard programmatically. The clipboardData
object provides a pointer to the Clipboard interface and exposes three
methods:

* setData(dataFormat,helperData): This method is used to copy
information to the Clipboard. If the first argument is the string
"Text", then helperData can be any string expression. On the other
hand, if the argument is "URL", then the argument passed in helperData
must be a URL.
* getData(dataFormat): This method returns what was placed on the
Clipboard in the given format. If the first argument is the string
"Text", then the result is itself a string. On the other hand, if the
argument is "URL", then the return value is specifically formatted as
a URL.
* clear([dataFormat]): This method removes any item with the format
specified (of type "Text", "URL", "File", "HTML", or "Image"
respectively) or removes all items on the Clipboard if no argument is
provided.

The following example illustrates how copy and paste works:

function pasteFromClipboard()
targetText.value=clipboardData.getData("text")
targetHTML.innerHTML=clipboardData.getData("text")
end function

function clearClipboard()
clipboardData.clearData
targetHTML.innerText="Clipboard contains
'"+clipboardData.getData("text")+"'"
targetText.value=clipboardData.getData("text")
end function

</script>
<input type="text" id="SourceText" value="Type Something" />
<input type="button" value="copy" onclick="copyToClipboard()" />
<input type="button" value="paste" onclick="pasteFromClipboard()" />
<input type="button" value="clear" onclick="clearClipboard()" /><br />
<input type="text" id="targetText" /><br /><div id="targetHTML" />

----------------------------------------------
ADDING FAVORITES IN INTERNET EXPLORER

Level: Intermediate
Category: Scripting
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

>From Internet Explorer 4.0 and above, you can invoke the
addFavorites() method on the windows.external object to add a
particular entry in the Favorites list by passing the URL of the
favorite you wish to add as well as a title to describe the favorite.
Note that this passes these values to the addFavorite dialog box
instead of adding the favorites invisibly--an obvious security
feature.

For example, to add a reference to the VB-XML site, you'd simply
invoke the code as follows:

&ltscript language="JavaScript"&gt
function addFav(url,title){
window.external.addFavorite(url,title)
}

&lt/script&gt
&ltinput type="button" onclick="addFav
('http://www.vbxml.com','VB-XML')"
value="Click Here to add the VB-XML site
to your Favorites" /&gt

----------------------------------------------
DRAG BUTTONS TO THE TOOLBAR

Level: Beginner
Category: Browser
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

One of the coolest quick-and-dirty tricks I've seen lately comes from
a feature built into Internet Explorer that few people normally
exploit. If you click and drag on an anchor to the toolbar of Internet
Explorer, that link will become a button on the taskbar. By
encouraging your viewers to place the button on their "dashboard,"
they are more likely to remember that your site exists. Unfortunately,
IE5 doesn't support a way of adding these buttons programmatically.

To set up a link in preparation for making it a button, you can use
either a standard <a href=""> tag or place an image within the anchor
tag. In the first case, the text contained within the tag will become
the title of the button, while in the second, the alt attribute of the
image will determine the name of the button.

Click and drag either link up to the Links menu bar (over the word
Links) to create a button to the Web Tips page.

----------------------------------------------
SELECTIONS AND TEXT RANGES

Level: Intermediate
Category: TextManipulation
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

"Dynamic HTML" is a handy label to describe several technologies, but
at its core, DHTML consists of CSS, a few specialized tags, and the
ability to replace text within documents. The Internet Explorer
browser has always had fairly robust text-handling capabilities, and
with IE4 and above you can do many things with these features that are
comparable to the features of many word processing programs.

The basis of most text manipulation in the IE browser comes from the
.textRange object. A text range can be thought of as the internal
representation of text from one point in the document to another. A
text range differs from a selection, though, in that a text range
simply points to the locations of the start and end of a block of
text, while a selection consists of a text range that is considered
"active"--in other words, a selection is the current text range in
what may be any number of such ranges defined in the document.

You can retrieve (or set) the active text range from the current
selection, since the selection has a createRange method that creates a
localized text range based on the selection. For example, the
following code will report the text of what you just selected, and is
invoked on a mouseup event whenever you release the mouse within the
specified <DIV> tag:

<div onmouseup="showTextRange()">Select a <b>portion of
this text</b> to display the selected range.</div>

One thing to note about the text range function here is that it
doesn't contain the text itself--it contains only pointers into the
document's character structures. Thus, you can retrieve the literal
text of a selection by using the .text property, as well as retrieve
the HTML (with closing--or opening--tags added if the selection
crosses container boundaries) with the .htmlText property.

The property .htmlText is read-only, although .text is not--you can
replace text through it. However, if you wanted to replace selected
text, you could use the .pasteHTML method to accomplish this. For
example, the following code will highlight selected blocks in a
different color, along the lines of a magic marker, by placing <span>
tags around the selection that set the color of the text to green.

Note that this may act strangely when interacting with the code
samples.

----------------------------------------------
ENHANCING TOOLBAR BUTTONS

Level: Advanced
Category: Browser
Category: Scripting
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

Dragging buttons to the toolbar is a powerful feature of the IE4 and
IE5 browsers. However, you can expand this functionality significantly
by setting the links themselves to JavaScript functions, executables,
or both. For example, one frequently encountered problem is when you
are in a framed window and you jump to a new page that doesn't release
you from the old frameset. You can create an Unframe button on your
toolbar that uses a simple JavaScript function, as follows:

Unframe

Drag this link to your toolbar to create an UnFrame button. Once the
button is set up, click on the frame you want to expand, then click
the button.

<a
href="javascript:open(document.frames(document.activeElement.name).document.location.href,'new','');history.go(0);">UnFrame</a>

One disadvantage to this approach, as you may have already discovered,
is that if you have your security setting high enough, the button will
raise a security warning in some of the newer browser implementations.
This functionality is also available through the context menu as an
add-in from Microsoft. For more information, check out

http://www.microsoft.com/ie

----------------------------------------------
CHANGING LIST ICONS

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 3
* Internet Explorer 4
* Internet Explorer 5

If you want to jazz up your bulleted lists, you may want to think
about using list style images, which is a URL to a graphic that is
used in place of the standard HTML bullets. These are set in CSS
through the list-style-image property, and they can also be set
programmatically through the style.listStyleImage property, as
follows:

<li class="bullet1">This is a blue bulleted point</li>
<li class="bullet2">This is a green bulleted point</li>
<li class="bullet3">This is a red bulleted point</li>
<li>This bullet has no attached image.</li>
<li style="list-style-image:url(bulletBlue.jpg);">This blue
point is generated from a
style.</li>
<li class="bullet1"
onmousedown="this.style.listStyleImage='url(bulletRed.jpg)'"
onmouseup="this.style.listStyleImage='url(bulletBlue.jpg)'">Click on
the
bullet at left to change its color</li>

----------------------------------------------
SETTING HOME PAGES IN IE5

Level: Intermediate
Category: Behaviors
Category: Scripting
Browser Targeted:
* Internet Explorer 5

Microsoft's Internet Explorer 5.0 ships with built-in behaviors that
you can use to better control the browser. Among them is the homePage
behavior, which can help you both determine whether a given page is
the user's home page and set the browser's home page to the current
page.

Because this component is a behavior, it is available only once the
window has fully loaded (i.e., the window.onload event fires). Once
this happens, the behavior exposes three methods:

* isHomePage(url) returns true if the current page is the page
specified by the URL.
* navigateHomePage() automatically jumps to the current home page.
* setHomePage(url) lets you set the home page to a given URL or file
path.

This code illustrates a very simple application that will let you set,
test, and navigate to your home page from code:

<span id="homePage" xmlns:ie="" style=
"behavior:url(#default#homepage);" />
<button onclick="goHomePage()">Go to
Home Page</button>
<input type="text" id="homePageURL"
value="" />
<button onclick="setHomePage()">Set
Home Page to the URL given here.</button>

----------------------------------------------
CREATING COLLAPSIBLE TREES

Level: Advanced
Category: CSS
Category: Scripting
Browsers Targeted:
* Internet Explorer 4
* Internet Explorer 5

Collapsible trees have become a staple in the DHTML world.
Fortunately, they are not terribly difficult to implement, if you use
a little bit of class. The principle trick is to understand that most
tree lists are created by embedding list containers (either <UL> or
<OL> tags), within list elements (for example, <LI> elements). By
hiding or showing the embedded container tags with the display CSS
attribute, you can cause the contents of those tags to contract or
expand as need be.

Of course, the difficulty here is that to expand or contract the
contained subtags, you have to send a message to that element to hide
or show it. Obviously, you don't want to have each node within the
tree contain script if you can help it--in addition to being
complicated to write, such an arrangement could be hard to maintain.
One way around this is to place an event tag on the outermost
container (the <UL> or <OL> element that holds the top level nodes),
then use a little bit of the HTML DOM to determine what specific
element was touched.

NOTE: The activeListElement is essentially the last <LI> tag that was
clicked on. Similarly, oldListElement is the element previously
selected; it is maintained principally to handle enabling or disabling
text selections.

While the example doesn't show it, you can assign id's to the
respective list elements, then use activeListElement.id to retrieve
the most recent item picked (activeListElement is initially set to
nothing). Similarly, you can retrieve the first child of any list
element (which should be a span) to get the actual text. If you just
attempt to read the text from the list element directly, you will
receive the text of the element plus all its children, not the text of
the tree node itself. The itemText shown in the onTreeItemSelected
method displays how you can retrieve the text of the node.

function resolveHit(this)
dim el
set el=document.elementFromPoint
(window.event.x,window.event.y)
set ul=nothing
set li=nothing
select case el.nodeName
case "LI"
set li=el
if el.childNodes.length=2 then
set ul=el.childNodes(1)
end if
case "SPAN"
set li=el.parentElement
if li.childNodes.length=2 then
set ul=li.childNodes(1)
end if
case else
exit function
end select
if not (ul is nothing) then
if ul.style.display="none" then
ul.style.display="block"
li.style.listStyleType="disc"
else
ul.style.display="none"
li.style.listStyleType="circle"
end if
end if
' Add if you want to send an
onTreeItemSelected() event
if not (li is nothing) then
set oldListElement=activeListElement
set activeListElement=li
onTreeItemSelected()
end if
end function
</script>

TreeView Node: Click on each solid disk to
close the node (if it has children) or the
open disk to open the node.

* A
* 1
* 2
* 3
* B
* 1
* a
* b
* c
* 2
* 3
* C
* 1
* 2
* 3

This fairly powerful capability would probably do better encapsulated
in a behavior, or at the very least turned into a self-contained
class. I leave that as an exercise to the reader.

----------------------------------------------
USE XMP TO SHOW SOURCE CODE

Level: Beginner
Category: DHTML
Browsers Targeted:
Internet Explorer 3
Internet Explorer 4
Internet Explorer 5
Netscape Navigator 4

One of the lesser known, but more powerful HTML tags, is the <XMP>, or
eXaMPle, tag. This particular tag works much as the <PRE> PREserve
tag, retaining spaces, tabs, carriage returns, and other white space
characters in the final output. Additionally, it displays the text
using a mono-proportioned font (typically Courier). However, it does
one thing that <PRE> does not--it also keeps HTML tags in their
original form, whereas PRE converts them into tags. In this sense,
<XMP> works much like XML's CDATA type, keeping its contents in their
original form.

Note that because <XMP> does make the output appear exactly as the
source, you can't explicitly format anything within an XMP block.
However, you can apply a style or class attribute to the XMP tag
itself, which will in turn change the format of the internal text. For
example, if you wanted to make the example codes use an 8-point blue
sans-serif font instead of the default black Courier, you could set up
the style as follows:

<xmp style="color:blue;font-size:8pt;
font-family:Arial;">
<h1>Sample</h1>
<p>This is a <b>test<
/b>.</p>
</xmp>

---------------------------------------------- \
FLASHING BORDERS

Level: Intermediate
Category: CSS, Scripting
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4

Okay, sometimes it's fun to just play with CSS and make tags that are
as
gratuitous and empty as the old <blink> tag. Borders especially lend
themselves to funky special effects, and with a little work, you can
make
the effects work across browsers. One of my favorite is the flashing
marquee
(note that this has nothing to do with the <marquee> element in IE).

The idea behind the marquee is simple. The CSS specification lets you
define
border sides as well as an entire border. By creating four distinct
border
patterns as classes, one for each side, you can create a sequence that
animates--in this case, during a mouseover.

The only part in this process that may prove a little difficult is
turning
off the marquee when you move off the element in question. Because you
could
potentially have any number of marquees on your page, you need to keep
track
of the current timeout key (returned from the setTimeout function) and
turn
it off with a call to clearTimeout. In this case, I used an object to
create
a mini-dictionary--linking each marquee object with its appropriate
setTimeout key. This is generally a useful technique when you're
trying to
maintain state for a number of similar items simultaneously, and it's
easier
than keeping a stack of variables for the same purpose.

setTimeout("updateMarquee('"+id+"',"+interval+")",0,"JavaScript")
}
}

function updateMarquee(id,interval){
var elt=document.all(id)
pos=elt.className.charAt(5);
pos=(1+parseInt(pos,10))%4;
elt.className="flash"+pos

key=setTimeout("updateMarquee('"+id+"',"+interval+")",interval,"JavaScript")
marqueeKeys[id]=key;
}

function stopMarquee(me){
id=me.id
key=marqueeKeys[id]
clearTimeout(key);
me.className="flash"
}

</script><div id="marquee" class="flash"
onmouseover="startMarquee(this,100)" onmouseout="stopMarquee(this)"
style="width:100;">Roll over this to see the marquee activate.</div>

----------------------------------------------
THE FUNCTION() FUNCTION

Level: Intermediate
Category: JavaScript
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 4
* Netscape Navigator 3

No, the title is not a misprint.

JavaScript is a remarkable little language, taking some of the
advantages of
its parent, Java, but also using its interpreted nature to good
effect. One
of the more useful techniques, albeit one that is not often used, is
the
ability to create functions dynamically, using the Function()
function. This
particular function lets you define a function dynamically at runtime,
making it especially useful for creating complex expressions and
retaining
them as distinct entities.

For example, suppose you wanted to build a table dynamically that
could
output values based on an arbitrary function. The function can be
modified
by the user, which is where things get sticky from the standpoint of
many
programming languages--there's a clear divide between the user world
and the
program space . . . until the user wants to have access to that space.

Fortunately, while interpreted languages have a few drawbacks
(primarily
having to do with efficiency), they are marvelously adept at handling
the
bridge between the user space and the program space. Indeed, for
JavaScript
objects, the distinctions get very fuzzy indeed. Anyway, back to the
Function() function: You can create a new function by passing the name
of
each parameter that you want to include, followed by the expression
body, to
the Function() function, then passing this to a variable: fn=new
Function(param1,param2,fnBody).

For example, you could create a simple expression that would return
the
distance between two points:

Going back to the example described earlier, the code below
illustrates one
approach that you could take. Note that you have to include a full
JavaScript body with the appropriate return statement preceding the
expression that you want to evaluate. One danger to this approach is
that
the expression being passed could also be used to perform side effects
on
the page itself. For example, try passing the expression

document.body.style.color="white";
document.body.style.backgroundColor="blue";
return x*x;

into the function definition area and see what happens.

Note: While the Function() function is part of JavaScript, the sample
code
below will only work with Internet Explorer.

<form name="paramForm" id="paramForm">
<table><tr><td>Parameter name:</td>
<td><input type="text" id="paramName" name="paramName" value="x"
/></td></tr>
<tr><td>Minimum Parameter Value:</td>
<td><input type="text" id="minValue" name="minValue" value="0"
/></td></tr>
<tr><td>Maximum Parameter Value:</td>
<td><input type="text" id="maxValue" name="maxValue" value="20"
/></td></tr>
<tr><td>Parameter Step size:</td>
<td><input type="text" id="paramStep" name="paramStep" value="1"
/></td></tr>
<tr><td>Function Body (Use parameter name for
variable):</td><td><textarea
type="text" id="paramFunc" name="paramFunc" style="width:320;">return
Math.sin(x*3.14159/180)*x*x</textarea></td></tr>
<tr><td></td><td><input type="button" onclick="buildTable()"
value="Create
Table" /></td></tr>
</table></form><div id="displayBlock"></div><script
language="JavaScript">
function buildTable(){
var buf="<h3>Results</h3>"
buf+="<table>";

with (paramForm) {
minval=parseFloat(minValue.value)
maxval=parseFloat(maxValue.value)
stepval=parseFloat(paramStep.value)
paramname=paramName.value;
paramfunc=paramFunc.value
var fn=new Function(paramname,paramfunc);
}
for (var index=minval;index<=maxval;index+=stepval){
buf+="<tr><td>"+index+"</td><td>"+fn(index)+"</td></tr>"
}
buf+="</table>"
displayBlock.innerHTML=buf;
}
</script>

----------------------------------------------
MAILING YOUR FORMS

Level: Intermediate
Category: Forms
Browsers Targeted
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 4
* Netscape Navigator 3

The rise of server-side languages like ASP and JSP have made it much
easier
to process forms, but in certain situations it may prove handy to send
information as e-mail messages. Doing so is surprisingly simple,
especially
as most contemporary browsers support the necessary protocols: in the
action
attribute of your forms, specify a mailto: protocol rather than an
HTTP one.
When you send the information, the contents of the form will be output
as an
HTML-encoded string.

With many browsers, you can also pass information into the e-mail form
itself. You can set up input fields with the names associated with
each of
the respective fields of an e-mail address (to, cc, bcc, subject, and
body).
Typically, the to address will provide additional addresses along with
the
ones supplied by the mailto: protocol.

The behavior of the e-mail differs depending on whether you select a
method
of GET or POST. When you use action="GET" in your form, your browser
will
launch your e-mail program (if it's been configured to do so) and
populate
the respective fields. Then it is up to the user to send or not send
the
letter as appropriate. If you send the information as a POST, however,
your
user will receive a notice that information is being sent directly to
the
server, with the option to cancel the transmission if desired. When
sent in
this manner, the entire form is sent as an HTTP-encoded string rather
than
populating individual fields, and the result gets sent to the
recipient as
an attachment to an e-mail.

The following demonstrates how you could use this information to send
structured e-mail messages:

<form method="GET" action="mailto:cagle@olywa.net">
To:<br /><input type="text" name="to" /><br />
Subject:<br /><input type="text" name="subject" /><br />
CC:<br /><input type="text" name="cc" /><br />
Message:<br /><textarea name="body"></textarea><input type="submit"
/></form>

----------------------------------------------
FILE SYSTEM OBJECT

Level: Intermediate
Category: Scripting, ASP
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3

If you are using the Internet Explorer browser in a local context (for
example, viewing pages that are on a local network server or your own
machine, or as part of an application), you can take advantage of the
File
System Object to load text files into your page (or update text
files). The
File System Object (or FSO) can give you access to any number of
file-related features, including generating directories, checking to
see
whether a file exists, retrieving file paths, and writing files to the
system.

You can also use the FSO on the server, where it has greater benefit.
For
example, the following ASP code will load in a text file and output
all
lines of text (numbered by position in the file) that include the
search
term:

<%
function getLines(filename,expr)
dim fs ' File System Object
dim ts ' Text Stream Object
dim ct
' Create the File System Object
set fs=CreateObject("Scripting.FileSystemObject")
' Create a text stream object from the fso
set ts=fs.openTextFile(server.mapPath(filename),1)
' Initialize the counter
ct=0
'While there are still lines
while not (ts.eof)
' read the line
line=ts.ReadLine
' see if it has the expression
if instr(line,expr)>0 then
'output it to the browser if it does
response.write cstr(ct)+":"+line
end if
' increment the counter
ct=ct+1
wend
ts.close
end function

getLines "myFile.txt","accounting"
%>

----------------------------------------------
DYNAMICALLY CHANGE THE COLOR OF AN IMAGE

Let's say that you've got an online store that sells T-shirts of
different
colors. Being able to change dynamically the color of a T-shirt based
on a
user's selection would be handy in displaying your collection of
available
T-shirts. Want to know how to do it? This is another one of many
articles
posted on inquiry.com. Go to

http://www.inquiry.com/techtips/dhtml_pro/10min/10min0299/10min0299.asp

----------------------------------------------
AURAL CSS2

Level: Intermediate
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 3
* Netscape Navigator 4

The Cascading Style Sheets 2 specification was basically built around
the integration of media into the Web browser. Among these was the use
of sound, which up until now has been typically limited to bad MIDI
soundtracks and the occasional button special effect. However, the
ability to have your Web page read aurally can prove useful, from
automobile and cell-phone access to your Web sites, to sites that work
with the sight-impaired, to kiosks that use a Web page base and
listening to one site in the background while viewing another in the
foreground.

All the basic CSS2 properties that deal with sound require some form
of add-on to existing browsers to actually read the text. Most of
these properties should be placed after the visual CSS properties in
style rules, since older Netscape browsers will typically ignore
properties after ones that it can't decipher. These are the
properties:

* volume--Has possible values of {number}, {percentage}, silent,
x-soft, soft, medium, loud, and x-loud. This gives the average volume
of the aural presentation and can range between 0 and 100 (or 0% and
100%) of the possible aural comfort levels.
* speech-rate--Has possible values of {number}, x-slow, slow, medium,
fast, x-fast, faster, and slower. This provides the speed at which
text is read, from x-slow (80 words per minute) to x-fast (500 words
per minute).
* voice-family-- Has possible values of male, female, child, and
{custom}.
Roughly analogous to font-family, these provide specifications to
describe the voices used. A custom voice-family could conceivably be
an agent with a distinct voice signature--for example a "Spock" voice
or "Jean Luc Picard" (not that either one of these exists, but you get
the idea).
* pitch--Has possible values of {number}[Hz|kHz]. The pitch provides
the tone of the character speaking in his or her average vocal range.
A typical male voice has a pitch of about 120 Hz, while a female voice
is closer to 200 Hz.
* pitch-range--Has possible values of 0-100. The range of the voice:
from 0, for a flat "robotic" voice, to 100, for an extremely inflected
voice.
* azimuth--Has possible values of {angle}, left-side, far-left, left,
center-left, center, right, far-right, right-side, behind, leftwards,
and rightwards. The direction that the voice is projected from. Note
that you can specify multiple azimuth elements in the same line:
azimuth:left-side behind will make the sound appear as if it comes
both from your left and from behind you.
* pause--Has possible values of {time},{percentage}. This indicates
that a pause should exist before or after (or both) a given selection.
For example, <p style="pause:1000ms 500ms"> will pause before the
selection begins for one second, and afterwards, for half a second.
This is the aural equivalent of a margin.
* cue-before, cue-after, cue--Has a possible value of {url}. This
provides an aural icon before or after a selection begins, roughly the
equivalent of a bullet in a bullet point. The cue property can take a
URL both before and after a selection. For example, <li
style="cue-before:url(bink.au);">An important point</li> will cause a
"bink" sound to play before the reader says "An important point."
* play-during--Has possible values of {url} mix, repeat, auto, none,
and inherit. Plays the selection indicated in the url() in the
background as the text contained in the corresponding selection is
read.
* speak--Has possible values of normal, none, and spell-out. This
global property determines whether speech is enabled (normal) or
disabled (none) or the contents are spelled out.

----------------------------------------------
BEHAVIOR CODE

Here's another article for the Visual Basic crowd. By now probably
many VB
developers are leveraging their skills to do Web development. DHTML
Behaviors is a new feature of Internet Explorer 5 that can be used in
a
Visual Basic DHTML application, browser control, or HTML pages. (Just
remember that it's IE5-specific.) Find out what this is and how to use
it at

http://www.inquiry.com/techtips/thevbpro/10_minute_solutions/10min1199.asp

----------------------------------------------
CHANGE STYLES IN INTERNET EXPLORER

Using Internet Explorer, you can use JavaScript to change just about
any style property. What you need to know is the style property you
wish to change. For instance, if you wish to change the font-size
property in a DIV named "div1"...

document.all.div1.style.fontSize="20pt";

...look at how to access it. You will see that what we do is remove
the dash from the property name and capitalize the next letter. This
allows us to access that style property with Internet Explorer.

Here is an inline example--we'll change the border-color property:

----------------------------------------------
DHTML COLLAPSING TREEVIEW

Here's something that the Visual Basic coders among you might find
interesting if you have some Web development experience, either with
VB
DHTML applications, or HTML pages using VBScript. If you don't have
such
experience, you will soon! Find out how to build a collapsible
treeview
using DHTML. Along with gaining an understanding of a useful
technique, you
will be learning some neat features of DHTML, such as event bubbling
and
working the DHTML hierarchy. Find out more from the VB Pro at

http://www.inquiry.com/techtips/thevbpro/10_minute_solutions/10min0999.asp

----------------------------------------------
DHTML-PLAYTIME IS OVER

Here's an article for those who may be new to DHTML or who think that
all
you can get from it is a nifty mouse rollover effect. Find out why
Dynamic
HTML lets you build much friendlier user interfaces, but you'll have
to
standardize on one brand of browser for any nontrivial functionality.
Go to

http://www.dhtml-zone.com/articles/md20998/md20998.asp

----------------------------------------------
GET READY FOR NAVIGATOR 5.0 DHTML

If you're a Netscape Navigator user, you might want to know what
version 5.0
has for you. Check out some of its features--including the ability to
work
with cross-browser and cross-version DHTML scripting objects. And,
since
nothing in life is perfect, you might find out a few of its
disadvantages,
too. Go to DevX.com's site to learn about this and a raft of other
DHTML-related stuff:

http://www.inquiry.com/techtips/js_pro/10min/10min0200/10min0200.asp

----------------------------------------------
INFO FOR THE TRULY NEEDY

Everybody needs help sometimes, and here's a site that offers
tutorials, a FAQ, labs, and links to solve many problems. Related
links will shoot you over to links for HTML, JavaScript, ASP, and
Java. The articles are a roundup from various sites, so the
possibilities are endless. Go to

http://www.katungroup.com/dhtml.htm

----------------------------------------------
LAYER BACKGROUND COLOR CHANGES

This one will work in the latest version of both major browsers, but
we have to use the <ILAYER> and <LAYER> tags to make it work in
Netscape, while we use style sheets and the <SPAN> for Internet
Explorer.

The <ILAYER> is used so that the <LAYER> will be inline rather than
needing absolute positioning. The <LAYER> tag inside lets us use the
onMouseover command in Netscape:

----------------------------------------------
LAYER BACKGROUND IMAGE CHANGE

You can change the background image of a table cell or layer in
Internet Explorer as we did with the background image of the body tag.
Here is one for an onMouseover command in a table cell:

&ltTABLE width="200" border="3"
cellspacing="0" cellpadding="0"&gt
&ltTD ID="td1" style="background-
image:url(image1.jpg)"
onMouseover="this.style.
backgroundImage='url(image2.jpg)';"
onMouseout="this.style.
backgroundImage='url(image1.jpg)';"&gt
Text
&lt/TD&gt
&lt/TABLE&gt

----------------------------------------------
MOVING AN IMAGE--PART 1 OF 4

To move an image, we need to work with style sheets and absolute
positioning. For the first part, we'll make a class that will position
a layer on the page:

The position declaration is absolute, meaning we are to define how
many pixels from the left and top of the browser we want the image
layer to be on the page. Here the layer will be 200 pixels from the
left and 10 pixels from the top.

NEED A REFERENCE--CHECK OUT THIS ONE

Danny Goodman wrote "Dynamic HTML: The Definitive Reference" because he thought the documentation on DHTML had too many contradictions. His practical guidance--tested on multiple versions of Netscape and Internet Explorer--offers a solid foundation for those who have some experience in HTML. This book continues to be a best seller, although it was published more than a year ago. Check it out at

http://www.amazon.com/exec/obidos/ASIN/1565924940/tipworld

NO MARGIN FOR ERROR

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Netscape Navigator 4

You can use CSS to control the margins of your document. In DHTML, the margin is the space between the bounding rectangle of the current element (conceivably a body element) and the previous or container element. For the <BODY> element itself, the margin is the amount of space between the corner of the browser display window and the location where the Web page begins. You can set your documents to be

flush to the edges of the browser by setting the margin to 0px, as in

NUMBERING OUTLINES

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Netscape Navigator 4

Whenever you have hierarchical lists or outlines, you can use list-style-type on the <ol> element used to contain each list. This
can give you the ability to designate different levels of a document with different types of characters. For example:

<ol style="list-style-type:upper-roman">
<li>Chapter 1
<ol style="list-style-type:upper-alpha">
<li>Section 1
<ol style="list-style-type:lower-roman">
<li>Sub-section 1
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 2
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 3
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
</ol>
</li>
<li>Section 2
<ol style="list-style-type:lower-roman">
<li>Sub-section 1
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 2
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 3
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Chapter 2
<ol style="list-style-type:upper-alpha">
<li>Section 1
<ol style="list-style-type:lower-roman">
<li>Sub-section 1
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 2
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 3
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
</ol>
</li>
<li>Section 2
<ol style="list-style-type:lower-roman">
<li>Sub-section 1
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 2
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
<li>Sub-section 3
<ol style="list-style-type:lower-alpha">
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>

Chapter 1
A. Section 1
i. Sub-section 1
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
ii. Sub-section 2
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
iii. Sub-section 3
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
B. Section 2
i. Sub-section 1
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
ii. Sub-section 2
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
iii. Sub-section 3
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
Chapter 2
C. Section 1
i. Sub-section 1
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
ii. Sub-section 2
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
iii. Sub-section 3
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
D. Section 2
i. Sub-section 1
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
ii. Sub-section 2
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3
iii. Sub-section 3
a. Paragraph 1
b. Paragraph 2
c. Paragraph 3

OVERFLOWING YOUR BOUNDARIES

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4

Normally, when you create a DIV element, that element will attempt to display everything within it by expanding until it either reaches the boundary of the browser or until it reaches the right or bottom edges of any images it contains, whichever is larger. However, you can modify this behavior so that the contents of the DIV element fit within a specific boundary, with scroll bars appearing if the contents are larger than the specified size. To control this, you can use the CSS Overflow property:

Overflow can take a number of values, and the resulting action depends on these values:

* visible--The full rendered contents will appear in the DIV element, expanding the DIV out in the process. This is the default.
* scroll--Scroll bars are automatically placed around the DIV regardless of whether the contents fit.
* hidden--The image is cropped to the specified size given by the width and height CSS properties.
* auto--If the contents can fit within the DIV, scroll bars are hidden; otherwise, they are displayed.

RETRIEVING RESPONSES AS XML

Level: Advanced
Categories:
* VBScript
* ASP
* XML
Browsers targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 3
* Netscape Navigator 4

The ASP Request object can be confusing to beginning Web programmers. One common problem is to get all of the terms sent up in a form or query string without knowing precisely what to expect. The problem is that the Request object appears to be a collection of name/value pairs, but in fact it's much more complex. It's actually an interface that exposes four distinct subcollections:

* QueryString--This retrieves all of the name/value pairs that were sent on the command string or were sent as part of a form with its
method sent to GET.
* Form--This retrieves all of the name/value pairs that were sent through a form via a POST method.
* Cookies--This retrieves all of the cookies that have been defined for this page.
* ServerVariables--This retrieves the server variables that were sent as part of the HTTP header or are maintained by the server.

One problem that I frequently encounter is a need to load a Response object into an XML file that I can then pass into an XSL filter.
Knowing that the Response object supports all four collections, I wrote a small routine that queries each collection in turn and turns
the resulting query into an XML document:

<%@LANGUAGE="VBScript"%>
<%
'GetRequestKeys.asp
function getRequestXML()
dim xmlDoc
set xmlDoc=server.createObject("Microsoft.XMLDOM")
xmlDoc.loadXML "<keys/>"
setKeysCollection xmlDoc,"querystring"
setKeysCollection xmlDoc,"form"
setKeysCollection xmlDoc,"cookies"
setKeysCollection xmlDoc,"servervariables"
set getRequestXML=xmlDoc
end function

function setKeysCollection(xmlDoc,collectionName)
set collectionNode=xmlDoc.createElement("collection")
collectionNode.setAttribute "id",collectionName
for each key in eval("request."+collectionName)
set keyNode=xmlDoc.createElement("key")
keyNode.setAttribute "id",key
keyNode.setAttribute "value",request(key)
collectionNode.appendChild keyNode
next
xmlDoc.documentElement.appendChild collectionNode
set setKeysCollection=collectionNode
end function

function main()
set requestDoc=getRequestXML
response.ContentType="text/xml"
response.write requestDoc.xml
end function

main
%>

ROMAN NUMBER YOUR LISTS

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Netscape Navigator 4

Bullets form an integral part of most Web pages--although most Web developers don't take advantage of the more advanced CSS features available for modifying the way that both bulleting and numbering takes place. The list-style CSS property determines characteristics of bullets, although the supported functionality differs widely between Netscape and Internet Explorer.

Consider the problem of numbering. Straight numeric bullets are easy to achieve, but they are not terribly exciting. You can, however,
enhance them with the list-style-type subproperty, which handles the specific form of the standard output from the list. For example, if
you wanted to list your bullets using Roman script, use a list-style-type property value of either "upper-roman" or "lower-roman":

I. This little piggy went to market,
II. This little piggy stayed home,
III. This little piggy had tofu (in deference to the vegetarians out
there),
IV. This little piggy had none,
V. This little piggy went whee, whee, whee all the way home.

while changing the attribute to "lower-roman results in":

i. This little piggy went to market,
ii. This little piggy stayed home,
iii. This little piggy had tofu
iv. This little piggy had none,
v. This little piggy went whee, whee, whee all the way home.

The values of "upper-alpha" and "lower-alpha" output the items enumerated by letter:

A. This little piggy went to market,
B. This little piggy stayed home,
C. This little piggy had tofu
D. This little piggy had none,
E. This little piggy went whee, whee, whee all the way home.

a. This little piggy went to market,
b. This little piggy stayed home,
c. This little piggy had tofu
d. This little piggy had none,
e. This little piggy went whee, whee, whee all the way home.

Finally, "decimal" sets it to the default:

1. This little piggy went to market,
2. This little piggy stayed home,
3. This little piggy had tofu
4. This little piggy had none,
5. This little piggy went whee, whee, whee all the way home.

SIMPLE ROLLOVER BUTTONS

Level: Advanced
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 4
* Netscape Navigator 3

There are probably more scripts out there for rollover buttons in JavaScript than there are buttons, but I wanted to bring up the point
to show how you can use JavaScript's object-like nature to simplify the code. The onload event attached to the image objects creates a new CButton object, into which the internal object reference is passed as a parameter. As this loads, it extracts the base name of the image and the image extension (.jpg, .gif, etc.--note that the routine looks for the ending "." and uses that to determine the extension). The Hi and Pressed strings indicate that the alternate buttons should have the syntax buttonName_Hi.ext and buttonName_Pressed.ext respectively; you can change it to reflect your own naming convention.

The heart of the routine is the Function() function. This entity creates a function out of the strings, attaching them specifically to
the image object (which will be the object receiving the events in the first place). This requires an ID to forward-reference the image, but if one isn't explicitly provided, the routine creates one. Finally, the image's onload event is set to null, which ensures that any new
images instantiated in the button (i.e., the other states) don't inadvertently trip the onload event again.

&ltscript language="Javascript"&gt
function CButton(me){
this.image=me;
this.id=me.id;
if (this.id==null){
this.id=uniqueID;
}
pos=me.src.lastIndexOf(".")
this.imageExtension=me.src.substring
(pos,me.src.length);
this.imageName=me.src.substring(0,pos);
this.imageHiName="_Hi"
this.imagePressedName="_Pressed"
me.onmouseover=Function(this.id+".src='"+this.imageName+this.
imageHiName+this.imageExtension+"'")
me.onmouseout=Function(this.id+".src='"+this.imageName+this.
imageExtension+"'")
me.onmousedown=Function(this.id+".src='"+this.imageName+this.
imagePressedName+this.imageExtension+"'")
me.onmouseup=Function(this.id+".src='"+this.imageName+this.
imageHiName+this.imageExtension+"'");
me.onload=null;
}
&lt/script&gt

STYLISH BODIES

Level: Intermediate
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4

In Internet Explorer, you can set the document body style dynamically by using the stylesheet object and rules. For every stylesheet that is defined (there happen to be two in this document), there is an associated stylesheet object kept internally. A given stylesheet is
made up of rules, one rule for each selector (such as BODY). Adding a rule to a stylesheet will rewrite those properties that are different between the old and the new rule (if one existed).

bodyStyle(1)="background-color:blue;color:lightBlue;font-family:Garamond,Times New Roman;font-size:11px"

bodyStyle(2)="background-color:darkGreen;color:lightGreen;font-family:Arial;font-size:8pt"

bodyStyle(3)="background-color:red;color:yellow;font-size:14pt;font-family:Impact,Helvetica,Arial;"

bodyStyle(4)="background-color:white;color:black;font-size:11pt;font-family:Times New Roman,serif;"

function writeBody(index)
document.stylesheets(1).addRule "BODY",bodyStyle(index)
end function

</script>
<div id="backSheet"></div>
<input type="button" onclick="writeBody(0)" value="White on Black"/>
<input type="button" onclick="writeBody(1)" value="Blue on Blue"/>
<input type="button" onclick="writeBody(2)" value="Green on Green"/>
<input type="button" onclick="writeBody(3)" value="Yellow on Red"/>
<input type="button" onclick="writeBody(4)" value="Default"/>

TABLE BACKGROUND COLOR CHANGES

If you prefer to use tables over layers for layout, you can implement the background color change in a table cell. Notice that in Internet
Explorer the &ltTD&gt tag can take the onMouseover command. We have to use the &ltILAYER&gt and &ltLAYER&gt tags to make it cross-browser:

&ltTABLE width="200" border="1" cellspacing="0"
cellpadding="0"&gt
&ltTR&gt
&ltTD style="width:100%; background-color:lightblue"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"&gt
&ltILAYER&gt
&ltLAYER ID="la2" bgColor="lightblue" width="100%"
onMouseover="this.bgColor='yellow';"
onMouseout="this.bgColor='lightblue';"&gt
This is Text.
&lt/LAYER&gt
&lt/ILAYER&gt
&lt/TD&gt
&lt/TR&gt
&lt/TABLE&gt

THE BROWSER WARS--PART 1 OF 3

While discussing DHTML, we want to take note of the differences between the two major browsers. Here let's take a quick look at the
two document object models so that when we get to cross-browse coding later, we'll know what we are up against.

In Microsoft Internet Explorer 4+, all (or close to all) the objects on a page are accessible through the use of

document.all

After that, you insert the name of the object and then the property you want to change. For instance:

document.all.object_name.style.left

This would access the left property of the object defined inline in a style tag or through a style class. In the next tip, we'll look at how
to get to this same object and property in Netscape Navigator.

THE BROWSER WARS--PART 2 OF 3

In the previous tip, we showed you how to access an object and one of its style properties in Internet Explorer. To get the left property,
we used:

document.all.object_name.style.left

In Netscape Navigator 4+, however, we have to go a different (though shorter) route. The drawback is that not all objects are accessible in Netscape as in Internet Explorer (I will be waiting to check version 5). In Netscape, the same property is accessed like this:

document.object_name.left

As you can see, you have to do a little extra coding to make certain scripts work in both browsers.

THE BROWSER WARS--PART 3 OF 3

Another browser difference that can give us fits is the way each browser supports layers. Both browsers support style sheet layers, but Netscape doesn't support them as well as Internet Explorer yet. This means that to do the same thing in Netscape, we often have to add some extra code--or simply decide that the property isn't supported at all.

For instance, a <DIV> tag can take an onMouseover event in Internet Explorer, but not in Netscape. In Netscape, The <LAYER> tag is the closest tag for the same effect and will take the onMouseover command. Since it is ignored by Internet Explorer, we can normally add the <LAYER> tag with no side effects. The <LAYER> and <ILAYER> tags will be handy additions in some of our cross-browser scripts.

THE DHTML PIT STOP

PageResource.com has articles on Cascading Style Sheets, JavaScripts, Netscape layers, graphics, and more, with related links to ASP, cgi/Perl, HTML, Java, and JavaScript. To put a little pep in your pages, go to

Page Resource Website

THE TEXT LINK HOVER--PART 1 OF 2

Here is something that is often thought to be a JavaScript or DHTML trick but is done only with style sheets. The drawback: Netscape
doesn't seem to support it in any way (other than using images instead), even through scripting. I could be wrong, though--send me a
note if you know the solution.

The text link hover is done easily if you want it to work for all the links on the page. When the mouse moves over a link, the changes you define will occur. Just add the code below between your <HEAD></HEAD> tags:

Of course, you can change other properties as well, such as the text-decoration, by adding them in:

THE TEXT LINK HOVER--PART 2 OF 2

To perform the text link hover only on a certain set of links, we can define a class:

Now, anything inside a set of tags with a class of "links1" will have the change on a hover, but the rest of the links will be normal (or
you could define more classes).

<DIV ID="div1" class="links1">
<A HREF="url">Hover Link 1</A><BR>
<A HREF="url">Hover Link 2</A>
</DIV>

<P>
<A HREF="url">Normal Link 1</A><BR>
<A HREF="url">Normal Link 2</A>

UPLOADING FILES

Level: Intermediate
Category: File Transfers
Browsers targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 3
* Netscape Navigator 4

While you can upload a file to your server with the <input type="file"> element (make sure your form's enctype attribute is set
to "multipart/form-data" and the method is set to POST), IIS doesn't provide any direct means of working with the data beyond BinaryRead().

Microsoft does provide an ISAPI filter to handle uploads, but it is primitive (about four years old) and awkward to use in ASP. Check out SA-Fileup, which provides a cleaner interface for transforming the resulting data. It is a commercial product, but generally worth the expense. Go to

Soft Artisans Website

USE @IMPORT TO LOAD STYLESHEETS

Level: Intermediate
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Netscape 4.5+

While you can use LINK to load in stylesheets, the CSS @import property can also be used to import stylesheets, as follows:

In addition to being more conformant with the W3C CSS standards, @import provides some added benefits--by placing an @import style within an external stylesheet, you can create a limited inheritance--the browser loads the first stylesheet, discovers upon parsing that the first stylesheet references a second, then parses the second. In this way, you can define a generalized stylesheet (the second sheet referred to here), then define local or page variations (the first sheet), and finally include immediate style rules in the current document.

USE BASE TO SIMPLIFY YOUR CODE

Level: Beginner
Category: CSS
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 4
* Netscape Navigator 3

A useful but frequently overlooked tag is <BASE>, which lets you specify the location that is used by any href or src tags contained in
the document. In essence, it specifies the default folder that other resources use. If you break your resources into separate folders such as IMAGES or CODE and your page makes references to that folder compared to references in the current folder, you may want to think about using BASE. Note that the BASE must be contained in the <HEAD> element and must point to an absolute, rather than local, URL.

For example, the following gallery document is located in the root folder but points to images on a different server (in this case, my
Sea Tails site):

<html>
<head>
<base href="http://208.1.204.8/seatails/archives/incoming/"/>
</head>
<body>
<h1><BASE> Indirection</h1>
<img src="thumanrussalki.jpg"/><br/>
<img src="fishnsir.jpg"/><br/>
<img src="draper1.jpg"/><br/>
<img src="draper2.jpg"/><br/>
<img src="keller3.jpg"/><br/>
<img src="keller4.jpg"/><br/>
<img src="AB_Fairy_Tales_Taught_us.jpg"/>
</body>
</html>

<BASE> Indirection

USING HIDDEN FIELDS

Level: Intermediate
Category: Forms
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 4
* Netscape Navigator 3

When you work with forms, you may occasionally need to pass information up to the server that you don't necessarily want to display as part of the visible Web page. This is the kind of situation that the hidden element was designed for. The syntax is simple:

The advantage to using hidden attributes is that it lets you create name/value pairs that you can extract from the server without having
to notify the user about this information. This also makes them ideal as persistent text-based variables; indeed, you can use hidden
variables to hold XML structures created on the client for those browsers that don't support XML parsers:

<html>
<head>
<title>XML Creator</title>
<script language="JavaScript">
function submitAddressBlock(){
buf="<address>"
buf+="<street>"+street.value+"</street>"
buf+="<city>"+city.value+"</city>"
buf+="<state>"+state.value+"</state>"
buf+="<zipcode>"+zipcode.value+"</zipcode>"
buf+="</address>"
addressXML.value=buf;
addressForm.submit();
}
</script>
</head>
<body>
<h1><Send An Address XML Block/h1>
<form id="addressForm" name="addressForm" method="POST"
action="processAddress.asp">
<input type="text" name="street" id="street"/>
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
<input type="text" name="zipcode" id="zipcode"/>
<input type="hidden" name="addressXML" id="addressXML"/>
<input type="button" onclick="submitAddressBlock()" value="Submit"/>
</form>
</body>
</html>

In this case, the hidden field would end up holding the XML structure built up from the visible fields. Note that using this approach, you
can still retrieve the items individually on the server <% address=request.form("address") %>, but you can also retrieve the XML
object as a separate entity and pass it into XML processing code:

<%
set addressDoc=createObject("Microsoft.XMLDOM")
if isObject(request("addressXML")) then
addressDoc.load request("addressXML")
else
addressDoc.loadxml request("addressXML")
end if

The ASP code block can thus accept input from both a Netscape page holding an XML block as text and a Microsoft page sending XML through HTTP.

USING LAYER TAGS

One of the reasons for the layer tags is to make onMouseover commands cross-browser, as we did in previous tips.

Another reason is for layout consistency. If you use a style sheet layer and use a background color, the two browsers will display them differently. Netscape tends to cut off the background color at the end of the text by default, while Internet Explorer will allow it to span
the width of the page.

This can be controlled to some degree by adding the width property to the style sheet, but the browsers still seem to disagree on how to fill the background area.

The layer tag allows the color to span the entire width we desire, so we place it inside a regular division tag and give it the same width:

&ltSPAN ID="sp1" style="width:80;
background-color:lightblue"&gt
&ltILAYER&gt
&ltLAYER ID="la1"
bgColor="lightblue" width="80"&gt
Text
&lt/LAYER&gt
&lt/ILAYER&gt
&lt/SPAN&gt

VOICE-SENSITIVE HTML

Level: Beginner
Category: Design
Browsers Targeted:
* Internet Explorer 5
* Internet Explorer 4
* Internet Explorer 3
* Netscape Navigator 3
* Netscape Navigator 4

Vox readers--devices that translate written text into vocal representations--are becoming common, especially with the rise in phone systems that connect to the Internet, automobile Internet browsers, and similar systems, as well as systems that are targeted toward blind users.

You can prepare your Web site for use by such browsers in several ways. Perhaps the simplest way is to turn off your image and multimedia views in your browser. In Internet Explorer you can do this by choosing the Advanced tab in the Tools, Internet Options dialog box and deselecting options such as Show Pictures. In Netscape Navigator, open up the View menu, and if the option Show Images is checked, uncheck it.

Now, take a look at your Web pages. This is what the view looks like to audio-only readers, and if it's unintelligible to you, it will be unintelligible to them too. Remember that most such readers work based on the source HTML document, not the visual appearance on the page. Make sure that the flow that you use reflects this--design critical information such as document summaries so that they appear early, and keep your interface items either on the top or left-hand side of the screen, contained within their own DIV elements or LAYER elements.

Similarly, if you make extensive use of external components such as ActiveX controls or Java applets, be sure that your site includes a fall-through for such elements (by including the fall-through text within the <APPLET> or <OBJECT> element, but outside any of the parameters). As interactive server-side components gain in sophistication, you may want to start thinking about relying on these rather than on applets.

You can, of course, use ALT tags within images to make the text more readable, but do so intelligently--if an image serves only as a decorative fillip, keep the descriptions short and simple. However, most image maps now also support ALT tags, and these should be as descriptive as possible, since these control navigation to other links.

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.
<iframe name="miniwindow" style="border:2 outset silver" width=150 height=150 src="toc.htm"></iframe>

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. Here's how that works:

<HTML>

<HEAD>
<TITLE>Absolute Positioning</TITLE>
</HEAD>

<BODY>

<DIV ID="absPos" STYLE="position:absolute; left:100; top:200">
This was positioned absolutely.
</DIV>

</BODY>
</HTML>
The key line in that document is
<DIV ID="absPos" STYLE="position:absolute; left:100; top:200">
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 <DIV> entity 100 pixels from the left edge of the document-display space and 200 pixels from its top edge.

ANOTHER WAY OF REFERRING TO A .CSS FILE

Internet Explorer 4.0 and above allow you to use a different syntax for importing the contents of a .css file:
<STYLE TYPE="text/css">
@import url("CSSreference.css")
</STYLE>
That statement allows you to refer to styles defined in a file called demo.css, located in the same directory as the HTML document in which that statement appears.

BROWSER COMPATIBILITY OF JAVASCRIPT STYLE SHEETS

Be aware that JavaScript Style Sheets (JSS) are compatible only with Netscape Navigator. Microsoft Internet Explorer doesn't support them.
It's a tradeoff: You or your organization may have some established knowledge of JavaScript, and so it's tempting to try to put that body of knowledge to use in designing dynamic network documents. But if your documents are to be accessible on the open Internet, you can't rely on JSS to deliver properly formatted documents. A possible solution: Stick with JSS on your intranet, where you can control surfers' browsers. Use other DHTML standards for the Web site.

CANCELING AN EVENT--PART 1 OF 3

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. We'll get into more specifics in our next tip.

CANCELING AN EVENT--PART 2 OF 3

In our previous tip, we explained the importance of canceling an event properly if certain criteria are not met. 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:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function AreYouSure()
{ return window.confirm ("Are you sure you wish to follow the hyperlink? Click OK to Continue or Cancel")
}
</SCRIPT>
</HEAD>

CANCELING AN EVENT--PART 3 OF 3

We've been discussing the proper way to cancel an event. In our example, we've created an HTML page with a hyperlink. When the user clicks the link, we display a dialog box that requests 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.
<BODY>
<A HREF="http://www.topica.com" onclick="return AreYouSure()">Try It</A>
</BODY>
</HTML>

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.

CONTEXTUAL SELECTORS

You can redefine any HTML tag using Cascading Style Sheets (CSS). However, you may also contextually redefine tags. By defining a parent style and then a child style, you can contextually specify when a style is applied.
For example, you can set Bold type to appear with a yellow background (similar to a word marked with a yellow highlighter) only when it appears within the P tag.
To do so, enter the following CSS style in the HEAD section of your document:
<style type="text/css">

</style>
Now, when a word in a P tag has Bold style, a yellow background appears behind it. As you can ascertain from the CSS style, P is the parent style and B is the child style.

DYNAMIC DRIVE LINK

For those of you who would like to expand your research, you might want to check out the Dynamic Drive site. Here you'll find an excellent script; since you've worked on a menu script with onClick, you may want to see this one using onMouseover. So, here's a great one:
DHTML onMouseover Menu
http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm

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.

IF ALL ELSE FAILS--PART 1 OF 2

In the last few tips, we've been discussing how you can troubleshoot Cascading Style Sheets (CSS) problems. If you've tried every detective method you can think of to track down the culprit and still haven't made any progress, try rebuilding the page, style by style.
To do so, open a new page and insert one style from your HTML file. Test the new page. If it works, move each style over to the new page and test as you go, style by style. You'll find the problem when your styles stop working in the browser preview.

IF ALL ELSE FAILS--PART 2 OF 2

In our previous tip, to track down a style bug more efficiently we suggested rebuilding your Cascading Style Sheets (CSS) styles one style at a time in another HTML page. Once you find the offending style, you can troubleshoot its problem more accurately.
However, if the solution still escapes you, sometimes it's best simply to delete the nonfunctioning style and write it from scratch. Often rewriting a style will sidestep whatever problem plagued the old style.

INTERNET EXPLORER: CHANGING A TABLE BORDER COLOR

You can change the border color of a table by accessing the table property of borderColor. To get to the border color in JavaScript, you use
this.borderColor
Here is an example of this change occurring when the viewer moves the mouse over the table:

INTERNET EXPLORER: CHANGING A TABLE BORDER SIZE

You can change the border size of a table by accessing the table property of border. To get to the border size in JavaScript, you use
this.border
Here is an example of this change occurring when the viewer moves the mouse over the table:

INTERNET EXPLORER: CHANGING BORDER COLOR

You can change the border color of a layer by accessing the style property of border-color. To get to the border color in JavaScript, you use

this.style.borderColor

Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.borderColor='red'"
onMouseout="this.style.borderColor='black'">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING BORDER PROPERTIES

You can change more than one border property at a time by adding an extra command to change another property. The code below will change the border color and the border width when the mouse moves over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.borderColor='red';
this.style.borderWidth=10;"
onMouseout="this.style.borderColor='black';
this.style.borderWidth=2;">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING BORDER STYLE

You can change the border style of a layer by accessing the style property of border. To get to the border style in JavaScript, you use
this.style.border
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2;
border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.border='double';"
onMouseout="this.style.border='solid';
this.style.borderWidth=2;">
This has a border!
</DIV>
You'll notice we had to add a second JavaScript command to change the border width back to 2. It seems that when the border is changed to double and then back to solid, it keeps the width of the double border unless you change it back.

INTERNET EXPLORER: CHANGING BORDER WIDTH

You can change the border width of a layer by accessing the style property of border-width. To get to the border width in JavaScript, you use
this.style.borderWidth
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.borderWidth=10"
onMouseout="this.style.borderWidth=2">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING BORDER WIDTH, ONE SIDE ONLY

You can change the border width of the top part of the border in a layer by accessing the style property of border-top and getting to the width of it. To get to the border width of the top part in JavaScript, you use
this.style.borderTopWidth
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.borderTopWidth=10"
onMouseout="this.style.borderTopWidth=2">
This has a border!
</DIV>
You can do the same for the bottom, left, or right sides by using
borderBottomWidth
borderLeftWidth
borderRightWidth

INTERNET EXPLORER: CHANGING BORDERS COLOR, ONE SIDE ONLY

You can change the border color of the top part of the border in a layer by accessing the style property of border-top and getting to the color of it. To get to the color in JavaScript, you use
this.style.borderTopColor
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid;
border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.borderTopColor='red';"
onMouseout="this.style.borderTopColor='black';">
This has a border!
</DIV>
You can do the same for the bottom, left, or right sides by using
borderBottomColor
borderLeftColor
borderRightColor

INTERNET EXPLORER: CHANGING FONT COLOR

You can change the font color of a layer by accessing the style property of color. To get to the font color in JavaScript, you use
this.style.color
Here is an example of this change occurring when the viewer moves the mouse over the layer:

INTERNET EXPLORER: CHANGING FONT FACE

You can change the font face of a layer by accessing the style property of font-family. To get to the font face in JavaScript, you use
this.style.fontFamily
Here is an example of this change occurring when the viewer moves the mouse over the layer:

INTERNET EXPLORER: CHANGING FONT SIZE

You can change the font size of a layer by accessing the style property of font-size. To get to the font size in JavaScript, you use
this.style.fontSize
Here is an example of this change occurring when the viewer moves the mouse over the layer:

INTERNET EXPLORER: CHANGING FONT VARIANTS

You can change the font variant of a layer by accessing the style property of font-weight. To get to the font variant in JavaScript, you use
this.style.fontVariant
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.fontVariant='small-caps';"
onMouseout="this.style.fontVariant='normal';">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING FONT WEIGHT

You can change the font weight of a layer by accessing the style property of font-weight. To get to the font weight in JavaScript, you use
this.style.fontWeight
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.fontWeight='bold';"
onMouseout="this.style.fontWeight='normal';">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING FONTS, LETTER SPACING

You can change the spacing between letters of a layer by accessing the style property of letter-spacing. To get to the spacing in JavaScript, you use
this.style.letterSpacing
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.letterSpacing='10px';"
onMouseout="this.style.letterSpacing='0px';">
This has a border!
</DIV>

INTERNET EXPLORER: CHANGING MARGINS

You can change the left margin (for the entire layer, including the background and borders) of a layer by accessing the style property of margin-left. To get to the left margin in JavaScript, you use
this.style.marginLeft
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.marginLeft=10;"
onMouseout="this.style.marginLeft=0;">
This has a border!
</DIV>
You can do the same for the bottom, top, or right sides by using
marginBottom
marginTop
marginRight

INTERNET EXPLORER: CHANGING PADDING

You can change the left padding (for the text within the layer) of a layer by accessing the style property of padding-left. To get to the left padding in JavaScript, you use
this.style.paddingLeft
Here is an example of this change occurring when the viewer moves the mouse over the layer:

<P>
<DIV style="border:solid; border-width:2; border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.paddingLeft=20;"
onMouseout="this.style.paddingLeft=0;">
This has a border!
</DIV>
You can do the same for the bottom, top, or right sides by using
paddingBottom
paddingTop
paddingRight

INTERNET EXPLORER: CHANGING STYLES

An earlier tip mentioned how you can change all kinds of style properties in Internet Explorer with JavaScript by removing the dash and capitalizing the second word to access the property. We will use this in the next several tips to change numerous styles in Internet Explorer.

You get to the background color of a layer by taking the style property

background-color

and then changing it with JavaScript:

this.style.backgroundColor="yellow";

The code for the whole layer would be this:

&ltP&gt
&ltDIV style="border:solid; border-width:2;
border-color:black;
background-color:lightblue; width:200"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor=
'lightblue';"&gt
Text
&lt/DIV&gt

INTERNET EXPLORER: CHANGING TABLE PADDING

You can change the cell padding of a table by accessing the table property of cellpadding. To get to the cell padding in JavaScript, you use
this.cellPadding
Here is an example of this change occurring when the viewer moves the mouse over the table:

INTERNET EXPLORER: CHANGING TABLE SPACING

You can change the cell spacing of a table by accessing the table property of cellspacing. To get to the cell spacing in JavaScript, you use
this.cellSpacing
Here is an example of this change occurring when the viewer moves the mouse over the table:

LAYER ANIMATION--PART 1 OF 4

We've discussed moving a layer from one point to another when it just jumped to the second spot. A layer can move more smoothly using some script to create an animation effect. In this tip, we'll set up the style sheet we'll use for this trick. Next, we'll get to the script. Here's the style sheet:

<STYLE type="text/css">

</STYLE>
The moveimage class will be used on an image that we will animate. The hiddentext class will be used for some text that will be uncovered when the image moves away.

LAYER ANIMATION--PART 2 OF 4

Now that we have the style sheet, we can look at the script that will be used for the animation effect:

<SCRIPT language="JavaScript">

</SCRIPT>
The procedure for Netscape and Internet Explorer is a little different, which we have discussed before, but the main theme is the same. We grab the "left" property of the object from its style sheet properties and add a set number to it. It repeats until it hits 400 pixels from the left. Also, this takes a parameter called spot, which will be the same as the initial left position of the image. This will show up in the HTML, which we'll cover next time.

LAYER ANIMATION--PART 3 OF 4

Now, we get to the HTML portion of the animation. Here, we create a link that will set the animation in motion by calling the moveit() function from the script. The parameter 200 is sent, which is the same as the left positioning of the image layer from its style sheet properties. The two DIV sections place the image and the hidden text on the page, along with which style sheet classes they will use.

<A HREF="javascript:moveit(200)">Click to move image</A>
<DIV ID="image1" class="moveimage">
<IMG SRC="scare.jpg">
</DIV>
<DIV class="hiddentext">
Hello There!
</DIV>

LAYER ANIMATION--PART 4 OF 4

Now let's put all the code together so it will be easier to view everything. Here it is with all three parts:

<BODY>
<A HREF="javascript:moveit(200)">Click to move image</A>
<DIV ID="image1" class="moveimage">
<IMG SRC="scare.jpg">
</DIV>
<DIV class="hiddentext">
Hello There!
</DIV>
</BODY>
</HTML>

LINKS: THE DHTML ZONE

The DHTML Zone includes a nice downloadable tutorial, plus articles, resources, and other information on DHTML.
DHTML Zone
http://www.dhtmlzone.com/index.html

LINKS: THE DYNAMIC DUO

The Dynamic Duo contains a DHTML tutorial with numerous sections and tips. The site also includes demos, games, and a downloadable version of the tutorial.
The Dynamic Duo
http://www.dansteinman.com/dynduo/

LINKS: WEBREFERENCE

I'd like to highlight a few useful DHTML links that you may find valuable as you work. Feel free to send me suggestions on future links or tips you'd like to see here.
The first link is to an excellent area of Webreference.com on the topic of DHTML. They get into such subjects as hierarchical menus, dynamic headlines, jigsaw puzzles, and more.
DHTML Lab
http://www.webreference.com/dhtml/

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

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:

<HTML>

<HEAD>
<TITLE>Overlapping Positioning</TITLE>
</HEAD>

<BODY>

XXXXXXXXXXXXXXXXXXXX

</DIV>

--------------------------------------------

</DIV>

</BODY>
</HTML>
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.

POSITIONING--PART 1 OF 3

Style sheet layers can use relative or absolute positioning. Unfortunately, with relative position, it seems that other elements on the page end up covering the menu items, so having anything near the menu makes a mess.
So, the menu we'll create will have absolute positioning at the top of the page, and the elements around it won't cover it unless we instruct them to do so.
Our next tips will discuss how we get positions for Internet Explorer and Netscape.

POSITIONING--PART 2 OF 3

In Internet Explorer, we'll simply use the style sheet properties and define classes for each layer with the positioning we want to use: <STYLE type="text/css">  </STYLE>

POSITIONING--PART 3 OF 3

In Netscape, we'll have layers to contend with to make the menu look and act the same way as in Internet Explorer. So, rather than using the inline layers, that will just position each layer relative to the last one, which ends up being 0,0 every time:
<LAYER left="0" top="0">

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.

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.

RELATIVE POSITIONING

You've seen how to position a <DIV> 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 <SPAN> element relative to a <DIV> element that contains it. Here's an example:

<HTML>

<HEAD>
<TITLE>Relative Positioning</TITLE>
</HEAD>

<BODY>

<DIV ID="absPos" STYLE="position:absolute; left:100; top:200">
This was positioned absolutely.
<SPAN ID="relPos" STYLE="position:relative; left:20; top:20">
This was positioned relatively.

</SPAN>

</DIV>

</BODY>
</HTML>
You see? The contents of the <DIV> element are moved 100 pixels from the left edge and 200 pixels from the top edge. But there's a <SPAN> element nested inside the <DIV>. Its boundaries start 20 pixels to the right of the left edge of the <DIV> element, and 20 pixels down from its top edge. The location of the <SPAN> element exists in relation to the <DIV> element only.

SCRIPTOMANIA!

For the ever curious, here's a nice DHTML site with scripts, tutorials, demos, and much more for you to browse. There's also a discussion forum to talk to others about DHTML.
Dynamic HTML Scriptomania
http://www.bratta.com/dhtml/scripts.asp

SETTING A BACKGROUND--PART 1 OF 2

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
}

SETTING A BACKGROUND--PART 2 OF 2

In our previous tip, 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.

SETTING THE STYLE FOR SEVERAL HTML SELECTORS

Cascading Style Sheets (CSS) allows you to specify a custom style globally or redefine an HTML tag. Often you may want to redefine an HTML tag with the same style definition.
To do so, place the HTML tag names in a comma-delimited list in the style definitions. For instance, to set H2 and H3 to one style definition, insert this code in the HEAD section of your document:
<style type="text/css">

</style>

SPECIFYING FONT-WEIGHT STYLES

You can specify font-weight styles in <SPAN>...</SPAN> 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:

<html>
<head>
<title>font-weight</title>
</head>

<body>

<P>This page illustrates the font-weight style.

<P>

<BR><SPAN style="font-weight:bold">This is bold text.</SPAN>
<BR><SPAN style="font-weight:normal">This is normal text.</SPAN>

</body>
</html>
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 whitespace 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:

<html>
<head>
<title>letter-spacing</title>
</head>

<body>

<P>This page illustrates the letter-spacing style.

<P>

<BR><SPAN style="letter-spacing:normal">This is normal text.</SPAN>
<BR><SPAN style="letter-spacing:2em">This is text with 2-em spacing.</SPAN>
<BR><SPAN style="letter-spacing:5px">This is text with five-pixel spacing.</SPAN>
<BR><SPAN style="letter-spacing:6pt">This is text with six-point spacing.</SPAN>
<BR><SPAN style="letter-spacing:0.5cm">This is text with half-centimeter spacing.</SPAN>
<BR><SPAN style="letter-spacing:2mm">This is text with two-millimeter spacing.</SPAN>
<BR><SPAN style="letter-spacing:0.25in">This is text with quarter-inch spacing.</SPAN>

<BR><SPAN style="font-weight:normal">This is normal text.</SPAN>

</body>
</html>
Save that as spacing.html and see the effects of the letter-spacing style in Internet Explorer.

SPECIFYING MULTIPLE FONT-FAMILY STYLES

You know that when you specify a font by name and that font isn't installed on a computer that's trying to render your document, the browser will use the available font that most closely resembles (by NAME) the specified font. That can be a big problem, which is why you can specify more than one value for the font-family style. Here's the syntax for the opening <SPAN> tag:
<SPAN style="font-family:Arial, Helvetica, sans-serif">
The allowed values are all contained in one set of double quotes (""), with commas between the names. A Windows machine would probably have Arial installed; a Mac would probably have Helvetica. An obscure machine probably would have this font designated as sans-serif.
Here's a program that uses this approach:

<html>
<head>
<title>font-family, Part Deux</title>
</head>

<body>

<P>This page illustrates multiple font-family style.

<P>

<BR><SPAN style="font-family:Arial, Helvetica, sans-serif">This is Arial or Helvetica text.</SPAN>

</body>
</html>
Save that as multiple.html and open it in your browser. If you can, try loading it on multiple machines with different font configurations.

TEST, TEST, TEST, AND TEST AGAIN

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.

TEXT TRANSFORM

The text-transform property is very useful. If you have some text in all caps, you can make it all lowercase, like this:

<DIV style="text-transform:lowercase">
THIS IS HARD TO READ, ISN'T IT.
</DIV>
You can do the same in reverse using text-transform:uppercase in its place.

THE CLICKABLE MENU--PART 1 OF 4

The menu will be a sample of two topic areas, which, when clicked, will reveal a set of links on that topic. It can be made more extensive by adding extra layers.
In this tip, we'll define the style sheet that we'll use for all the layers and links:

<STYLE type="text/css">

</STYLE>
* The class navtop will describe the links that will be visible to click and reveal the hidden layers.
* The nav0 and nav00 classes will describe the appearance of the area around the visible links, which will make it look like a menu.
* The nav1 and nav11 classes will describe the appearance of the hidden areas that will become visible.
* The innerfont class will describe the links within the hidden area that will become visible.
Our next tip will show the HTML in the body section, so we can see more easily what all these things are describing.

THE CLICKABLE MENU--PART 2 OF 4

Now that we have the styles set up (which start the menu at the top-left corner of the page), we can add the HTML and fill in the classes in the areas that need them:

<SPAN class="nav0">
<SPAN class="navtop">
<LAYER width="80" bgColor="darkblue" left="0" top="0"
height="20">
<A HREF="javascript:show_it('n1')">About</A>
</LAYER>
</SPAN>
</SPAN>

<SPAN class="nav00">
<SPAN class="navtop">
<LAYER width="80" bgColor="darkblue" left="0" top="0"
height="20">
<A HREF="javascript:show_it('n2')">Program</A>
</LAYER>
</SPAN>
</SPAN>

<BR>
<SPAN ID="n1" class="nav1">
<SPAN class="innerfont">
<LAYER width="80" bgColor="darkblue" left="0" top="0">
<A HREF="autest1.htm">Contact</A><BR>
<A HREF="#">Search</A><BR>
<A HREF="#">FAQ</A><BR>
</LAYER>
</SPAN>
</SPAN>

<SPAN ID="n2" class="nav11">
<SPAN class="innerfont">
<LAYER width="80" bgColor="darkblue" left="0" top="0">
<A HREF="#">HTML</A><BR>
<A HREF="#">DHTML</A><BR>
<A HREF="#">JavaScript</A><BR>
</LAYER>
</SPAN>
</SPAN>
You'll notice that the LAYER tags had to repeat some information that was in the style sheets. This is so Netscape will display it the way we want it, rather than clip a color too soon or not have the correct width.
Notice that the onClick events will start the script, which is what we'll look at next.

THE CLICKABLE MENU--PART 3 OF 4

Finally, we can look at the script that adds the functionality to the menu. Here it is:

<SCRIPT language="JavaScript">

</SCRIPT>
The script is fairly short, since most things--other than the change in visibility of the layers--were taken care of in the style sheets and HTML.
This takes in the ID of the hidden layers and sets them to visible, and then in reverse on the mouesout. Next, we'll put it all together.

THE CLICKABLE MENU--PART 4 OF 4

To conclude this script, let's put the three parts together:

<BODY>

<SPAN class="nav0">
<SPAN class="navtop">
<LAYER width="80" bgColor="darkblue" left="0" top="0"
height="20">
<A HREF="javascript:show_it('n1')">About</A>
</LAYER>
</SPAN>
</SPAN>

<SPAN class="nav00">
<SPAN class="navtop">
<LAYER width="80" bgColor="darkblue" left="0" top="0"
height="20">
<A HREF="javascript:show_it('n2')">Program</A>
</LAYER>
</SPAN>
</SPAN>

<IMG SRC="logo.gif">

</BODY>
</HTML>
At the end, you'll see that you can add content. You can add a logo under it or whatever you like, and the menu should open over it. Be careful if you add absolutely positioned elements, though, since you may need to set z-index values or adjust the placement of the element in the code to be before or after the menu HTML code.

THE FONT-SIZE STYLE

Often, you'll want to change the size of text--make it bigger or smaller than usual. For this purpose, DHTML provides the font-size style, to which you can assign a variety of measurement values. Most of these values are specific and determine the height of uppercase letters in some standard measurement. Here's a list:
· Pixels (px)--One pixel is one little dot on the user's screen.
· Points (pt)--One point is 1/72 of an inch.
The others are easy to understand:
Inches (in)
· Centimeters (cm)
· Millimeters (mm)
You also can use these (vague) words as font-size values:
· xx-small
· x-small
· small
· medium
· large
· x-large
· xx-large
Here's a document that shows how the size values work in real life.
<html>
<head>
<title>font-size</title>
</head>
<body>
<P>This page illustrates the font-size style.
<BR><SPAN style="font-size:large">This is large text.</SPAN>
<BR><SPAN style="font-size:16px">This is 16-pixel text.</SPAN>
<BR><SPAN style="font-size:48pt">This is 48-point text.</SPAN>
<BR><SPAN style="font-size:1in">This is one-inch text.</SPAN>
<BR><SPAN style="font-size:3cm">This is three-centimeter text.</SPAN>
<BR><SPAN style="font-size:10mm">This is 10-millimeter text.</SPAN>
</body>
</html>
Save that as size.html and take a look at how it renders.
For the record, I tried specifying
style="font-size:1ft"
but it doesn't work.

THE JAVASCRIPT LINK

We've used the JavaScript link to start many functions within our tips. We'll also use it in the menu script. The idea is to have a link that will run a script instead of going to another page. Here's how it works:
<A HREF="javascript: JavaScript commands">Click</A>
A function is the most stable use, so here's an example that executes a function named fun1:
<A HREF="javascript:fun1()">Click</A>

THE OVERFLOW PROPERTY

The overflow property allows you to set what will happen to elements within a DIV when they become longer than a width or height you have set. The drawback is that so far it seems to work only in Internet Explorer.

<DIV style="width:200px; overflow:hidden">
<NOBR>This is a long long long line of text that has no line
breaks with these nobr tags.</NOBR>
</DIV>
This use would hide the text that goes beyond 200 pixels. There is also the value of overflow:scroll, which would add scroll bars as needed if the text went too far in either direction.

TROUBLESHOOTING CASCADING STYLE SHEETS--PART 1 OF 2

If you find that your Cascading Style Sheets (CSS) styles do not work, follow these simple troubleshooting tips to find and correct the problem:
· Are the CSS properties in use supported by the preview browser?
· Are the CSS properties in use supported by the operating system the preview browser runs on?
· Are the values valid for the properties used in your styles?
· Are the HTML tags properly calling the styles?

TROUBLESHOOTING CASCADING STYLE SHEETS--PART 2 OF 2

In our previous tip, we described a few general ideas for troubleshooting Cascading Style Sheets (CSS). Today, we'll touch on more specific problems, such as tracking down typos:
· Check for typos in the definition and properties of your styles. Even one mistake can cause an entire sheet to fail.
· Ensure that each rule ends with a semicolon.
· Use curly brackets to open and close style definitions.

USING EXTERNAL STYLE SHEETS--PART 1 OF 3

An external style sheet can be handy if you want to avoid repeating style sheet information on every page. Instead, you can include a one-line link in every page that will direct the browser to the single style sheet. This will make pages a little shorter and allow you to edit one file to make style sheet changes instead of editing numerous files.
First, you need to create the .css file itself. All this file needs is the style sheet properties you want to use. No <STYLE> tags or comments are needed here, as they would be on a regular page. So, the file could look something like this:

-------
A { text-decoration:none }
H2 { color:red }
-------
Save the file as a text file with a .css extension, such as filename.css. In the next tip, we'll see how to place the links to the style sheet to make use of it.

USING EXTERNAL STYLE SHEETS--PART 2 OF 3

To link to a style sheet, place a tag like the one below in the HEAD section of every page in which you plan to make use of your external style sheet:
<LINK rel="stylesheet" type="text/css" name="anyname" href="url">
Replace the name attribute with any name you like and the href attribute with the URL of your filename.css file. Next, we'll look at both parts and see how it should work.

USING EXTERNAL STYLE SHEETS--PART 3 OF 3

Now that we have the style sheet file and the style sheet link tags placed, we can make use of them. Here's what we have so far:

"filename.css"
-------
A { text-decoration:none }
H2 { color:red }
-------
And, on each page that will use the style sheet, we have this in the HEAD section:

<LINK rel="stylesheet" type="text/css" name="anyname"
href="filename.css">
Now, use one of the tags we modified within one of your HTML pages. If you use the H2 tag, it should be red. Now all H2 tags on all the pages with the style sheet link should be red.

USING SPAN TO ATTACH STYLES TO TEXT

You can use <SPAN>...</SPAN> tags with style classes, and you can also use them to associate styles directly with text. Let's take a look at that syntax now:
<SPAN style="stylename:value">Text to be formatted.</SPAN>
The <SPAN>...</SPAN> tags surround the text. The opening <SPAN> tag has a single attribute, called style. Style is assigned to equal a quoted string that consists of a name-value pair, with the name and the value separated by a colon (:).
During the next few days, we'll take a look at the text-formatting styles and the values they can take.

VISIBILITY

In the script we'll create, we'll also have the factor of visibility. Visibility has three values: visible, hidden, or inherit. The inherit property means that the item using it will inherit the visibility of its parent element.
Using inherit in Netscape is more stable if the parent element is visible, because the visible property seems to have a few problems at times. We'll use inherit in the menu script for this purpose.

WHAT'S UP WITH THE WHITE SPACE

Sometimes people new to reading code wonder about the extra spaces and carriage returns that you often see in many sample programs. This extra space can seem useless, and you might wonder if you must have it there to make the program run correctly.
You can get rid of most of the extra spaces and carriage returns. Just as you can in regular HTML, you can add and remove white space in its various forms without affecting how your documents render and behave. Use common sense, though--if you remove spaces so that you're running keywords, values, and commands together, you'll change how code works (or break it completely).
I don't think the extra spaces and returns are useless, though. Extra white space makes code easier to read. That's especially important in a tutorial.

WINDOW FOCUS

The next several tips will be tidbits that we'll use in a clickable menu script, which we'll create soon. This one is a tip that will keep Internet Explorer from leaving a dashed box around an area after it has been clicked (which is helpful in a DHTML menu, since the page doesn't change on the initial click).
Whenever the link or area is clicked in IE, we can use the JavaScript command window.focus() to lose the dashed box. For example:

<SCRIPT language="JavaScript">

</SCRIPT>
<A HREF="javascript:menustart()">Item 1</A>
Now clicking the link won't leave the box since we refocused on the window.

THE FONT-STYLE STYLE

You can assign two values to font-style: normal and italic. Normal text is upright; italic text is canted over to the right a little bit. Here's a demo:
<html>
<head>
<title>font-style</title>
</head>
<body>
<P>This page illustrates the font-style style.
<BR><SPAN style="font-style:normal">This is normal text.</SPAN>
<BR><SPAN style="font-style:italic">This is italic text.</SPAN>
</body>
</html>
Save that at style.html and take a look at the difference.

CFCOOKIE AND CFLOCATION CONFLICT: A WORKAROUND

If you try and set a cookie using CFCOOKIE, and then use CFLOCATION somewhere else in the same script to redirect to another URL, you'll soon realize that your cookie was never actually set. This is a known problem with ColdFusion. As a workaround, use JavaScript to redirect to your new location.
Here's an example:
<script language="JavaScript">

</script>

CFMODULE START AND END TAG SYNTAX

When using CFMODULE to call a custom tag template, if the tag provides start and end tag functionality, here is the correct way to call it:
<cfmodule template="/tags/myTag.cfm">This is passed to the tag.</cfmodule>
This is equivalent to the following:
<CF_myTag>This is passed to the tag.</cf_myTag>

SETTING DYNAMIC VARIABLES

If you've ever tried to set a dynamically created variable name to some value, you've likely discovered that CFSET doesn't do the trick. However, when setting dynamic variables, ColdFusion's SetVariable function works quite well.
Here is an example:
<CFSET Temp = SetVariable('#VarName#', '#VarValue#')>
The above will return a variable named according to what is contained in #VarName# and set to #VarValue#. Keep this tip in mind--it's sure to come in handy.

THE FONT-FAMILY STYLE--PART 1 OF 2

You may find the font-family style to be named in a slightly confusing way. You might prefer that it be called "font-name" or something like that, because you can specify the name of a typeface with the font-family style. If the typeface name involves more than one word, you have to surround it with quotes, like this:
<SPAN style="font-family:'Antique Olive'">This is Antique Olive text.</SPAN>
Note that in this line, I had to use single quotes ('') to surround the words that made up the font name because it's already inside double quotes ("").
If you specify a specific font name and it's not installed on a computer that's attempting to render your document, it will use the font whose name most closely approximates the specified name. That could have disastrous results, so be sure to specify a generic font name as well as a specific one. We'll do that next time.

THE FONT-FAMILY STYLE--PART 2 OF 2

The font-family style allows you to specify any of several generic font names in addition to a specific name. The generic names are:
· serif
· sans-serif
· cursive
· fantasy
· monospace
A serif is the one of those little extra lines you'll find in certain places on letters rendered in certain fonts (like the "foot" on the downstroke of an R or an I). Arial is a sans-serif font; Times is a serif font.
Here's a document that illustrates the generic font-family values:
<html>
<head>
<title>font-family</title>
</head>
<body>
<P>This page illustrates the font-family style.
<P>
<BR><SPAN style="font-family:Arial">This is Arial text.</SPAN>
<BR><SPAN style="font-family:Times">This is Times text.</SPAN>
<BR><SPAN style="font-family:serif">This is serif text.</SPAN>
<BR><SPAN style="font-family:sans-serif">This is sans-serif text.</SPAN>
<BR><SPAN style="font-family:cursive">This is cursive text.</SPAN>
<BR><SPAN style="font-family:fantasy">This is fantasy text.</SPAN>
<BR><SPAN style="font-family:monospace">This is monospace text.</SPAN>
</body>
</html>
Save that as family.html and see how it renders. Note the differences among the lines of text. Note also that if your computer doesn't have a certain kind of font installed (mine happens to lack a "fantasy" font), the text formatted that way is rendered in a sans-serif font like Arial or Helvetica.

SPECIFYING COLORS WITH RGB

If you're more comfortable with RGB (red-green-blue) color values than you are with hexadecimal notation, feel free to use RGB definitions in your styles. For example, to define a style that uses the color red, you could use the following definition.

.mystyle { rgb(255,0,0); }

As you can see, the first value is the Red channel. We've set it to 255. The second value (the Green channel) is set to 0, and the third value (the Blue channel) is set to 0.

DETERMINING WEB-SAFE COLORS IN HEXADECIMAL NOTATION

As you probably know, all operating systems don't define or render all colors identically. Fortunately, out of the multitude of colors, there are 216 colors that are identically defined and rendered across operating systems. Although it is very important to know these 216 Web-safe colors, who wants to memorize all of them?

Happily, there is an easier way. As you know, when you define or express a color in HTML, you do so using hexadecimal notation. For example, red is expressed

#FF0000

There are only six hexadecimal color values that form a web-safe color. Therefore, if you memorize the following six hexadecimal color values, you can easily discern if a color is Web-safe.

00 33 66 99 CC FF

 
Web-safe     Not Web-safe 
--------     ------------ 
 CC3300       CD3400 
 660099       650098 
 CCFF33       CA3706

HEXADECIMAL SHORTHAND

In the previous tip, we showed you how only hexadecimal notation made with these six values are considered Web-safe:

00 33 66 99 CC FF

Well, never let it be said that the HTML is not efficient. It is so efficient, in fact, there is a shortcut to the hexadecimal notation that defines Web-safe colors.

As you probably know, a color (in this case, Red) defined in hexadecimal notation looks something like this

.mystyle { color: #FF0000; }

Well, since Web-safe colors must be composed of sets of identical characters (the FF, 00, and 00 in this example), you can use a shorthand version that only specifies each character once. In other words, our sample code can be reduced to this:

.mystyle { color: #F00; }

In this case, the browser will duplicate each character before it renders the color; converting #F00 to #FF0000.

CALL A ROSE A ROSE

If you're not a "Numbers" type of person, you can specify the 216 Web-safe colors using simple English names. Of course, you're not likely to memorize all 216 Web-safe color names, so we've tracked down a nicely designed list at SimplyTheBest.net. This page displays a swatch of each color, along with the names and hexadecimal values:

http://www.simplythebest.net/info/colornames.html

WHICH BROWSERS SUPPORT WHAT

Each time a software company releases a new version of its browser, every DHTML artist and Web developer is forced to revisit the Internet-age-old question...

What CSS and DHTML features does it support?

Luckily, there are a few Web sites out there that do most of this research for you. One of our favorites is WebReview.com. WebReview supplies the Mother of all Cascading Style Sheet (CSS) charts. This massive chart lists every aspect of the CSS specifications and identifies support by Netscape 4.x and 6.x; Internet Explorer 3.x, 4.x, and 5.x; and Opera 3.6 for Windows.

We suggest you visit WebReview.com, print the chart, hang it on your wall, and spend some time getting to know it. It can save you a lot of time (not to mention heartache).

WebReview's Style Sheet Reference Guide

http://www.webreview.com/style/css1/charts/mastergrid.shtml

SIMPLYTHEBEST

Let's face it--while it's fun to develop a DHTML function all by your lonesome, time constraints often force you to look for off-the-shelf solutions. We all have our own cache of reference sites we go to research or find solutions to our day-to-day challenges, and one such resource you should add to your R<D cache is SimplyTheBest.com. SimplyTheBest.com has a broad variety of categories ranging from back-end development to DHTML. In fact, its listing of ready-to-go DHTML Menu scripts are the best we've seen on the Net.

DHTML Menu Scripts at SimplyTheBest.net

http://www.simplythebest.net/info/dhtml_menus.html

THE CSS-P CROSS-BROWSER LIBRARY

As you may know, Internet Explorer and Netscape Navigator support CSS (Cascading Style Sheets) positioning. CSS positioning (or CSS-P) allows you to precisely position an object within the browser window. Unfortunately, each browser supports CSS-P slightly differently. As you can imagine, this makes our job doubly difficult.

Fortunately, the folks at InsideDHTML have created a cross-browser CSS-P JavaScript library you can download and include in your web site. This cross-browser library addresses most of the browser idiosyncrasies, allowing you to focus on creating that special DHTML effect.

DHTMLLib: Cross-browser Dynamic-Positioning library

http://www.siteexperts.com/dhtmllib/page1.asp

Note: Although the DHTMLLib was created for 4.0 browsers, it works well with current browser versions.

AVOID NESTING POSITIONED ELEMENTS

Although CSS (Cascading Style Sheets) allows you to position elements at any point in the browser window, take care how you build the elements. Nesting absolute- and relative-position elements can cause inconsistent results.

For example, the following HTML code creates a relative positioned element, an absolute positioned element, and a relative positioned element inside of an absolute position element. Theoretically, when the browser renders this HTML, the elements will align appropriately. However, when you view the page created with this code, you'll see that the nested elements are out of synch with the independently positioned elements.

<html>
<body>
<DIV STYLE="position: absolute; top: 20px; left: 20px">
This Element 1 is absolute
<SPAN STYLE="position: relative; top: 10px; left: 10px">
This Element 1 is relative
</SPAN>
</DIV>
<br>
<DIV STYLE="position: absolute; top: 10px; left: 10px">
This Element 2 is absolute
</DIV>
<SPAN STYLE="position: relative; top: 10px; left: 10px">
This Element 2 is relative
</SPAN>
</body>
</html>

DETECTING CAPABILITIES

A basic method to detect which browser is loading your page is to test for capabilities. Internet Explorer supports a collection of every element on an HTML page. This collection is called the All collection. Netscape Navigator does not support the All collection. Since the majority of Internet Explorer/Netscape Navigator scripting discrepancies stem from the All collection, your script can determine and act based on whether the All collection exists.

To demonstrate, let's create an HTML page that tests for the All collection. If the All collection exists, we throw up a message box saying so. If the All collection does not exist, we throw up a message box saying that.

<html>
<head>
<script>
var theAllcollection = (document.all!=null);
if (theAllcollection) {
// Browser supports the all collection
alert('The All Collection exists.');
} else {
// Do something else
alert('The All Collection does not exist.');
}
</script>
</head>
<body>
The All collection test.
</body>
</html>

REMOVING THE PAGE MARGIN

As you may know, Internet Explorer and Netscape Navigator place a margin around the contents of an HTML page. Although there are a few ways to remove or adjust this margin, you'll want to be certain you modify the margin for all versions of Internet Explorer and Netscape Navigator.

To do this, there are several attributes you must include in the Body tag. In addition, you should also redefine the Body CSS style and set the margin to 0. The following HTML example removes the HTML page margin for Internet Explorer and Netscape Navigator for version 3 and up.

<HTML>
<HEAD>
<STYLE>
BODY {margin: 0pt}
</STYLE>
</HEAD>
<BODY topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
</body>
<html>

SENDING A MESSAGE THROUGH THE STATUS BAR

The more communication and feedback you can deliver to your visitors, the easier and more fulfilling their visit to your site will be. One often-overlooked communication vehicle is the status bar (that box in the lower left corner of every browser window). With just a bit of JavaScript, you can display a message in the status bar that will show the user exactly what she'll find behind each link.

To do this, insert the following JavaScript event handlers and your message into each <A HREF> tag.

ONMOUSEOVER="window.status='Place you message here'; return true"
ONMOUSEOUT="window.status=''"

Here's how the HTML code for a link looks with this JavaScript code. Check it out with your browser and note that when you move the cursor over the linked text, the status bar displays its message.

<HTML>
<BODY>
<a href="#" ONMOUSEOVER="window.status='Click here to go through the looking glass...'; return true" ONMOUSEOUT="window.status=''">Click Me</a>
</body>
<html>

IMPROVING JAVASCRIPT PERFORMANCE

One way to improve your site's JavaScript performance is to cache the scripts. You can cache JavaScripts by removing the scripts from the individual HTML pages and placing them in a centralized .JS file. Then, you simply refer to the centralized .JS file in your HTML. The browser will load the centralized JavaScript file the first time, and will then load it from memory each time is called again.

To refer to the centralized JavaScript file, first copy your JavaScript functions into a text file and name it script.js. Then, place the following script in the Head section in each HTML file that requires the JavaScript file.

LINKING A FOREIGN JAVASCRIPT LIBRARY

In the previous tip, we described how you can increase the performance of your Web page JavaScript. As you may recall, we advised you to link each of your pages to a single external JavaScript file instead of including the same JavaScript code in each page.

In our demonstration, we presented an example that calls on a local JavaScript file. However, the external JavaScript file isn't required to be on the same local hard drive. You can link to an external JavaScript file at another Web, for example, using code similar to the following:

CREATING A JAVASCRIPT LIBRARY

As you progress in DHTML and JavaScript, you undoubtedly will develop standard functions you depend on regularly. Take note of those functions and group them into external JavaScript files you can easily load and call. Before long, you'll find you've developed and collected entire libraries of useful JavaScript functions.

For example, a simple rollover requires several different functions: A function to load and cache the images, a function to swap the default image for the rollover image, and a function to switch the rollover image back to the default. Why write or copy and paste these again and again? Instead, place the functions in a text file marked ROLLOVER.JS. Then, when you need to use the rollover function in a Web page, simply move the ROLLOVER.JS file into the appropriate directory and include the JavaScript file in the head section of the Web pages.

BOOKMARKLETS AS BUTTONS

As you may know, Bookmarklets are small bits of JavaScript contained within a link. What you may not know, however, is that you can add these JavaScript-embedded links to the toolbar of your browser.

Why would you want to add a JavaScript-embedded link to your toolbar? Two reasons. One, Bookmarklets can add to the general browsing experience. Two, certain Bookmarklets can be extremely useful in debugging your DHTML.

To add a JavaScript-embedded link to your toolbar, open a Web page that contains the appropriate link. Then, drag the link to the browser's toolbar, where the browser will create a new link. Now, to execute the JavaScript, you simply click the link in the toolbar. (As with too many features, this technique works better on some browsers than others, and may not work with all JavaScript.)

USING GRAPHIC BULLETS

The standard bulleted list tag <UL> offers limited bullet choices. However, you can use the Definitions List tag <DL> to specify your own graphic bullets. To do so, create a graphic bullet in your favorite image-editing application. Name the image bullet.gif. Then create an HTML page and add the following code:

<DL>
<DD><IMG SRC="bullet.gif">Item one</DD>
<DD><IMG SRC="bullet.gif">Item two</DD>
<DD><IMG SRC="bullet.gif">Item three</DD>
<DD><IMG SRC="bullet.gif">Item four</DD>
</DL>

The browser will render the bulleted list using the bullet graphic you've specified.

COLORING BULLETS AND THEIR TEXT

Using CSS (Cascading Style Sheets) definitions, you can set the color of bullets the browser displays for standard list tags such as UL. To do so, include the following style definition in the HEAD section of your HTML page:

Then create your list as normal.

Save and preview the page in a browser and you'll notice that each bullet and its accompanying text are green, as set by our style definition. Naturally, you can use any other color as well.

THE NEW BUTTON TAG

Beginning in HTML 4, W3C has included a tag that allows for a broader range of interactive design. This new tag is actually an evolved version of the Submit INPUT button. However, this new Button tag allows you to place formatted text, graphics, or even tables inside the button. For example, the following code places a graphic inside a clickable button.

<button><font color="008000"><b>Hey, this is formatted text</b></font><BR><img src="image.gif"></</button>

The new button tag has no innate functionality. To set the button to execute a function, you must add a JavaScript event to the Button tag just as you would add a JavaScript event to an image or link. (We'll get to that soon.) Also, keep in mind that only the latest browsers support the new Button tag.

THINGS YOU CAN'T DO WITH THE BUTTON TAG

In the previous tip, we introduced the new HTML 4 Button tag. As you may recall, we mentioned that you can embed almost any HTML object inside the Button tag. However, there are a few HTML objects you cannot place inside the Button tag:

	Button
	Form
	Select
	Input
	A HREF

ADDING FUNCTIONALITY TO THE BUTTON TAG

In the past two tips, we've introduced you to the HTML 4.0 Button tag. Although the Button tag allows you much more flexibility, it does not have any innate functionality. In other words, if you simply insert it into your HTML page, it won't do anything when clicked.

To add functionality to the Button tag, you simply add JavaScript events to the tag. For example, consider this Button tag:

To code this Button to load a new page, you simply add an OnClick JavaScript event and insert the window.location script to jump to a new link.