Navigation Button

Internet Brothers: Helpware for the Cybercommunity - DHTML Tips and Tools

Dynamic HTML Behaviors

Internet Explorer 5+ only

DHTML behaviors, a new feature in Microsoft's Internet Explorer 5.0 browser, make Dynamic HTML functionality more accessible and easier to use in a document. A DHTML behavior component can be written in many scripting languages, including JScript or VB Script, and supplies dynamic functionality that can be applied to any element in an HTML document through the use of Cascading Style Sheets (CSS).

     

You may have noticed as the page finished loading how these annoying flies did what flies do. DHTML behaviors like this use CSS to separate the script from the content and style of documents. Isolating functionality in this way is known to developers as "encapsulation", it brings the benefits of object reuse to the world of DHTML.

So how do you declare and use DHTML behaviors in a Web page? If you know how to use CSS, you know how to use DHTML behaviors. It really is that easy. As proposed to the World Wide Web Consortium (W3C) by Microsoft, a new CSS property called behavior would define the location of the behavior component. Be forewarned that behaviors are merely a proposal at this point, are not a part of any Document Object Model standard, and are only available with IE5. More fodder for the browser wars, but what did you expect?.

In the sample above, the script that implements the "flyin" effect is encapsulated in a separate file. That is the beauty of behaviors, they reside outside the HTML container. Behaviors are recognized with a Windows extension of .htc, and are supportable by all platform versions of IE5. You may obtain the Microsoft public domain fly.htc (1900 bytes) file here. To use the fly-in behavior, simply wrap the HTML content to be animated within <IE5:fly> tags as demonstrated below.


Add these <STYLE> tags to the <HEAD> section of your page.

<style>
 .fly{behavior:url(
fly.htc);position:relative;}
</style>

Put these <DIV> tags in the <BODY> section of your page.

<DIV class=fly delay=2000 from=right>
Text or object of fly-in
behavior goes here.
</DIV>

Did you find this tip helpful? Let us know by sending your comments. If the sample code above still left you confused, remember the View Source option in your browser.

Was this site useful to you?
Vote For Us at WebbieWorld

Helpful TipTo print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said. In our effort to be friendly to all browsers, the menu tree is functional with version 4 or greater of both the AOL/Netscape and Internet Explorer products.

As stated above, hovering over the button will open the menu for these browsers. But if you have an older product, don't fret, we'll send you to the scum page. Just click the button.

Why haven't you downloaded the newer versions? They're free you know.
Download Internet Explorer
Download Netscape Communicator

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Our Lovely Email Icon    another darn bug

 






Site Map

 

 

 

 

The more you complain, the longer God lets you live.

 

 

 

 

Copyright © 1997-2004 Internet Brothers. All Rights Reserved. Really.