For best results: this site requires that cookies be enabled for proper operation - see Legal Page for more info

Select Any of These

DHTML

LAST UPDATED: 08 November 2007 18:26:08 -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://techsinfo.halocomputertech.com"
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 wolfsburgii.com 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://techsinfo.halocomputertech.com"

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

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-t