svendtofte.com - Making IE behave

15th of July, 2004: I want to add a little note, to explain, that this page is almost four years old. Many of the things it does, are things which I did back then, and would NOT consider good style these days. Paul Novitski has pointed out, that in my HTC, I mix style and behavior. This is obviously bad form. The HTC should be pure behavior. Any style at all, even ones that are only used, as a result of behavior, are still styles, and as such, should exist in the stylesheet. I hope the reader will bear with these faults.

Behaviors are a way to add various DHTML functionality to various elements with the ease of css. Behaviors are added to and element, and this element, will not behave as the code describes. Or the element will react to event handlers as described in the coded, that has been attached to the element. Now, how can this be used? A common effect on the web, is to add a link functionality to a whole box, normally a link is either a piece of text or an image. but what if you want a big red box, and if you press anywhere on this box, you go to someplace, and the cursor also looks like it's over a link, and the status bar reads out the URL you're about to go to. The script here will full hyperlink functionality to a normal TD, which under normal circumstances wouldn't have any effect, or any functionality.

Take a look at the example below:

Example

http://www.yahoo.com/

http://www.adcritic.com/

http://www.wired.com/

http://www.reboot.dk/

http://www.alistapart.com/

Clean cut example

Setting it up

Now, if you choose to view source, you'll see that th behavior is linked to by a css selector, in this case the ".mo" class. this is incredible powerful, since css can be used to select pretty much any element on the page, and it is especially good at selecting more than one element, such as a whole row of TDs. Now, we made a class with a behavior associated with it, now all that is left it to make some elements, that can use this class. Keep in mind that even though we use TDs in the example, it might as well have been DIVs or any other element. That's the power behind behaviors.

How it works

The example above, adds four behaviors to your average TD, and this is ONLY for the TD, which have the class="mo" (mouse over) Now there's one thing to keep in mind. Even though all the TDs use the SAME code, they are not in the same namespace, they are all different. So if you in a behavioral file, create an variable, "Active", this will not be available to the other TDs, even though they share the same class and code piece. Following is the content of the HTC file, which by the way, stands for HyperText Component.

```
<td style="
padding:6px;
border-width:
2px;border-color:black;
border-style:solid;
font-family:verdana, arial;
font-size:11px;
spacing:5px;
background-color:white;
behavior:url(TDHighlight.htc);
">
```
If you select view source on this page, and scroll down to the above TDs, you'll find the above style declaration, most of this is standard stuff, and will be familiar to most of you, the thing that should puzzle is behavior:url(TDHighlight.htc);. This is how you link a behavior to a element, in this case a table cell. the syntax is simple, and follows the likes of background-image:url(your.gif);. It's this simple style declaration that makes behaviors powerful, as it gives you the power of DHTML and "Behaviors", with the flexibility of CSS, Man, I sound like a preacher, but you really have to understand it, to appreciate it.
```
<PUBLIC:ATTACH event="oncontentready" handler="getHref" />
<PUBLIC:ATTACH event="onmouseover" handler="over" />
<PUBLIC:ATTACH event="onmouseout" handler="out" />
<PUBLIC:ATTACH event="onclick" handler="gohref" />
```
here we set up the event handler for each TD. We mainly use the ATTACH method, to attach event handlers to the element, and we then tell the script what function to associate with that event, so for example, the click event, will fire the gohref function, which is of course defined below, in the script section of the HTC file, that has to be enclosed in a script tag. For the curious, you can find the HTC file here.
```
var goToThisPlace = null;
function getHref(){
goToThisPlace = this.firstChild.getAttribute('href');
}
```
first we use the event handler "oncontentready", to be sure that the TD has loaded fully before we do anything. When it had loaded, we go into the TDs content, we refer to the TD by the keyword this, and then say firstChild (the a directly inside the TD), and we then get the value for the attribute href, which will be and url normally, we then save this in a variable we call "goToThisPlace", which will be used later. Now of course, of the link isn't the first thing inside the TD, the script will fail.
```
function over() {
window.status=goToThisPlace;
this.style.cursor='hand'
this.style.backgroundColor='silver'
}
```
now, when you mouse over the TD, the following things happen, first off, we set the status bar of the browser to read out the link tag, from the variable we just created. We also set the cursor to be a hand, there by indicating a link. To add to the effect, we also change the background color of the TD, to silver (a light gray).

Obviously, above, I mix style and behavior, in the function over(), which is bad form! They should be seperated, and the script should instead assign a class name, or an id, nothing else.
```
function out() {
window.status='';
this.style.backgroundColor='white'
}
```
So, when you move the mouse out, without pressing the TD, we want things to go back to normal, so we reset the window.status to nothing, and we set the background color back to white.

function gohref(){
location.href=this.firstChild.getAttribute('href')
}

But if you press the TD, you're sent to the location of the hyperlink.

Recap

Now, with all those ten or so lines of code, you have just added hyperlink functionality to a TD, with the class mo, assuming it has a hyperlink inside. Say you have a menu on a site, and you want just that, so users can click anywhere inside the box (the TD), and still go somewhere, so that they don't have to be exactly over the actual link. And you didn't add a single onmouseover to any of the TDs, thereby creating "ugly" code, that is hard to maintain.

Why it's so cool

This only works in IE5+ browser, all other browser will simple see the link, and the TD, as it would normally look, they don't get the mouse over effect, or the "click-anywhere" effect either. But the link work perfectly still, (and does so too in IE of course), thus it degrades wonderfully.

The power of behaviors, mostly stems from how it's applied. This is done through CSS selectors, it may be any selector that the browser supports, from advanced css2 to simple #id's. This enables you to apply the concept of styles, to scripting. One central script, and once selector, to apply it to various elements, this increases maintainability.

The Netscape way

Netscape 4 is way behind here, and cant keep up, but NS6/Mozilla has it's own system of behaviors, called "bindings" in Mozilla terms. The technique behind bindings is based on various XML Mozilla based technologies, such as XUL, and it all comes down to XBL, which is the very language that bindings are written in. XBL (eXtensible Bindings Language) is based on XML syntax, like so much else in Mozilla. The whole Mozilla browser's interface, or GUI, is built in a language called XUL (eXtensible User Interface Language), and XBL is a way to add functionality to these things. So, XBL doesn't just add mouse over effect to TDs, but also provide vital functionality in any application, that may utilize this language. Thus it becomes much more complicated, as it involves XML, XUL, XBL, XSL, and other fun stuff. If you still want to cut your teeth on this new tech, you can find further reading at the mozilla developer docs archive. If I find out how to control this beast, to do simple effects, then I will post another article about it.

Behaviors and the future

Behaviors are not a IE only thing, as I showed, Mozilla also employ behaviors/bindings, though in only in a wildly different way. Behaviors are considered for inclusion in CSS Level 3, which is being drafted as we speak. Some pages on the W3C behaviors can be found at http://www.w3.org/TR/becss

Some people don't like how style, and script are getting messed together. Presenting various security risks. Of course, you can also argue that scripting is as much a part of style, as css is. This is for the mailing lists to discuss though.

Making IE behave