XML DHTML Behaviors

ben2ong2 · October 06, 2006, 04:43:21 PM

Internet Explorer 5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

Behaviors - What are They?
IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.
How do behaviors work? By using XML we can link behaviors to any element in a web page and manipulate that element.
DHTML behaviors do not use a <script> tag. Instead, they are using a CSS attribute called "behavior". This "behavior" specifies a URL to an HTC file which contains the actual behavior (The HTC file is written in XML).
Syntax
behavior: url(some_filename.htc)
Note: The behavior attribute is only supported by IE 5 and higher, all other browsers will ignore it. This means that Mozilla, Firefox, Netscape and other browsers will only see the regular content and IE 5+ can see the DHTML behaviors.

Example
The following HTML file has a <style> element that defines a behavior for the <h1> element:
<html><head><style type="text/css">h1 { behavior: url(behave.htc) }</style></head><body><h1>Mouse over me!!!</h1></body></html>
The XML document "behave.htc" is shown below:
<attach for="element" event="onmouseover" handler="hig_lite" /><attach for="element" event="onmouseout" handler="low_lite" /><script type="text/javascript">function hig_lite(){element.style.color='red'}function low_lite(){element.style.color='blue'}</script>
The behavior file contains a JavaScript and the event handlers for the script.
Try it yourself (mouse over the text in the example).
The following HTML file has a <style> element that defines a behavior for elements with an id of "typing":
<html><head><style type="text/css">#typing{behavior:url(typing.htc);font-family:'courier new';}</style></head><body><span id="typing" speed="100">IE5 introduced DHTML behaviors.Behaviors are a way to add DHTML functionality to HTML elementswith the ease of CSS.

How do behaviors work?
By using XML we can link behaviors to any element in a web pageand manipulate that element.</p></span></body></html>
The XML document "typing.htc" is shown below:
<attach for="window" event="onload" handler="beginTyping" /><method name="type" /><script type="text/javascript">var i,text1,text2,textLength,tfunction beginTyping(){i=0text1=element.innerTexttextLength=text1.lengthelement.innerText=""text2=""t=window.setInterval(element.id+".type()",speed)}function type(){text2=text2+text1.substring(i,i+1)element.innerText=text2i=i+1if (i==textLength){clearInterval(t)}}</script>

Ryan's District Boards

News:

XML DHTML Behaviors

ben2ong2