o what can behaviors do? By using XML we can link behaviors to any element in a Web page and manipulate that element. We can, for example, copy that element’s text into a pullquote area on the page. We could offer a way to magnify small type on a page. Many of the everyday things we do with scripting can be transfered to behaviors and by combining them with XML we can have greatly enhanced Web pages that will work down the browser foodchain with no ill effects.

Each page in this article will not only demonstrates the behavior but also show you just how simple they are to implement.

We’ve divided our behaviors into two categories:

• fx – Special Effects behaviors don’t add value neccessarily, but do add eye-catching special effects that can make your page stand out if used appropriatly.
• publishing – These behaviors can add value and utility to pages of text content. They make your pages much more usable for the viewer or add new ways to get them involved in the text.

Earthquake!

This behavior falls into the realm of special effects. It’s really not useful but it could help provoke mood on a Web site. To see it in action just run your mouse over the headline.

While it would probably be easy to implement this in the document directly we’ve chosen to use it as a behavior. Part of the beauty of behaviors is that they allow a designer to take pre-written code and effects and insert them into a Web page without having to be a programmer. By having effects like Earthquake available as behaviors a designer can build of an astonishing repetoire of Web display tools without needing to learn JavaScript.

Earthquake is set up via XML so you’ll need to create an appropriate namespace before you can use it. We’re doing it as XML so that older browsers aren’t affected adversely. It also let’s us define a brand new tag. The namespace is set up in the tag on your Web page. Here’s the one we’re using on this page:

The next step is to define XML tag we’ll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:

As you can see, the only part that is needed is the behavior property. It must point to the behavior file, earthquake.htc. You can download the earthquake.htc file here. Once you have it just make sure it’s on your server and that the url is specified properly in your CSS.

All that’s left then is to place the XML tags around the item you wish to trigger the earthquake behavior. Earthquake will be triggered when someone runs their mouse over the item. The tagging is very simple and looks like this:

Shake it, baby!

Now you’ve got it, everything you need to know to create your own earthquakes. So…uh….Shake it, baby!

Typewriter Behavior
Sure it owes its heritage to movies and computer gaming, but a typewriter effect can be quite eye-catching if used properly. We’d bet you’re reading this as it types. It’s not for every Web site though, so use it sparingly.

This behavior can be set to type at whatever speed you need. The above example types at a speed of one character every 100 milliseconds.

Typewriter is set up via XML so you’ll need to create an appropriate namespace before you can use it. We’re doing it as XML so that older browsers aren’t affected adversely. It also let’s us define a brand new tag. The namespace is set up in the tag on your Web page. Here’s the one we’re using on this page:

The next step is to define XML tag we’ll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:

The most important part of that is the behavior property. It’s the only part really needed and it must point to the behavior file, typewriter.htc. You can download the typewriter.htc file here. Once you have it just make sure it’s on your server and that the url is specified properly in your CSS.

All that’s left then is to place the XML tags around the text you wish to have typed onto the page. That’s simple too:

Type this text.

Notice that we’ve set the speed to 120. If you don’t set a speed the typing will appear with the default setting of 100.

That’s really about all you need to know to use it. Be aware that this behavior only runs once and only when the page is first loaded. So if you use this, make sure it’s someplace that your users will be able to see it.

Now start typing!

Footnote Behavior
If you’ve ever seen a Web document with footnotes you know what a problem it is to read a relevant footnote and then scroll back up the document to find where you had stopped reading. This behavior changes that. It will bring the footnotes to the user(1) without the need for them to scroll away from their place in the page.

Let’s face it too, footnotes can be ugly things tacked to the bottom of a page. By implementing a footnote tag via a behavior and XML we can give a designer complete control over what the footnote is going to look like when it appears for the user. Everything about the way the footnote looks can be adjusted via CSS.

Since FOOTNOTE is set up via XML so you’ll need to create an appropriate namespace before you can use it. We’re doing it as XML so that older browsers aren’t affected adversely. It also let’s us define a brand new tag. The namespace is set up in the tag on your Web page. Here’s the one we’re using on this page:

The next step is to define XML tag we’ll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:

As you can see, FOOTNOTE only needs the behavior property. It must point to the behavior file, footnote.htc. You can download the footnote.htc file here. Once you have it just make sure it’s on your server and that the url is specified properly in your CSS.

There are three CSS classes defined in the namespace as well. These are all used by the footnote behavior. The first is footstyle. This defines how the footnote will look when the user calls it. It should and applied to the division holding the footnote and it’s important that it have at least three properties:

• width sets the display width in pixels of all footnotes.
• left property is used to hide the footnote until it is called.
• postition: absolute frees the footnote so that it can be postitioned anywhere on the page.

The closer class describes how the word “close” will look in the displayed footnote block. This word is added to the bottom right corner of footnotes so that there is an option to remove them from the page display.

Lastly, the class fhilite describes how the footnote link will appear and adds a hand cursor for user feedback.

You’ll need to create individual divisions for each footnote to be displayed. Here’s what one from this page looks like:

(1) A user used to be someone who was heavily into drugs.Here a user simply refers to the person using a Web page.In this case, you.

The id of the division is extremely important. It is via this id that the behavior manipulates the footnote. The name can be anything you like as long as it is unique. You’ll be using it in the FOOTNOTE tag to link the action to the division. In this case we used the id of foot1. This would be referenced in the FOOTNOTE tag as footName=”foot1″(2).

Let’s take a look now at how that last footnote was called:

(2)

It’s that simple. Notice we’ve placed it around working HTML which would scroll down to the footnote in older browsers. The footnote behavior will erase that for IE5 and replace it with appropriate HTML to call our enhanced footnotes leaving just the text that is present within the tag.

You should note that footName is a required property. If you forget to include it you won’t get an error message. The enhanced footnote behavior will simply do nothing.

Ok, so consider yourself armed, er, footed. You should now know everything you need to apply footnotes to your pages.

Magnify Behavior
It’s become commonplace today to see Web sites that have lots of text crammed into a small area. Oftentimes some of that text is in the tiniest possible font. I can’t speak for everyone, but in the wee hours of the morning it can be hard to read that text. Often I’ve wished for a way to magnify it without resizing the fonts in my browser.

It seems a natural that having an easy way to magnify just a portion a page would be ideal. By creating a behavior for this and linking it to the page via XML it makes it possible for a magnify effect to be used nearly anywhere yet have the pages still work seamlessly for older browsers.

If you look to your right you’ll see an area of small text. If you are using IE5 beta 2+ you’ll also see an icon of a magnifying glass. Older browsers won’t show this icon since it was inserted into the page via the magnify behavior. If you click the icon a text window will display a magnified version of the exact text that is contained in the block along with an icon that will allow you to close it. Also, if there is any HTML formatting in that text, such as a link, it will be applied to the magnified version as well.

This behavior was designed so that nearly all the control is in the hands of the designer. The only exception being the names of the icons used to indicate magnify and close magnify. These must be set in the .HTC file controlling this behavior. Everything else is done in the Web page itself using CSS and XML.

Since MAGNIFY is set up via XML so you’ll need to create an appropriate namespace before you can use it. We’re doing it as XML so that older browsers aren’t affected adversely. It also let’s us define a brand new tag. The namespace is set up in the tag on your Web page. Here’s the one we’re using on this page:

The next step is to define XML tag we’ll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:

The next step is to define the XML and the tag properties for MAGNIFY. In doing this we also create a class called “magstyle” that defines what the magnified text will look like. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:

The most important part of that is the behavior property. It must point to the behavior file, magnify.htc. You can download the magnify.htc file here. Once you have it just make sure it’s on your server and that the url is specified properly in your CSS.

One thing to notice about the magstyle class is that it specifies a left position of -1000. This is so that the HTML that the behavior creates will be hidden from the user by appearing far off to the left of the display window. We’re doing this in part because of a small display glitch in the version of IE used to create this and also because it’s always been my prefered way to hide content. It’s just as easy to specify a new postion as it is to specify hidden/visible.

You’ll also need to download the two icons used by this behavior. Right click on each one and then select “save picture” to save magnify.gif and unmag.gif. This behavior looks for these icons in a directory called images. You can change these icons to others by editing the magnify.htc file to point to other images. You need one icon to represent the magnify option and one to indicate close magnify.

All that’s left then is to place the XML tags around the text for which you wish to offer a magnified view. It’s this simple:

The text thatyou wish to be magnifiable.

I’m sure you noticed the properties we are passing to the magnify behavior. The first one, newId, is required. While we could have added a complex random identification generation routine to the behavior we chose to keep it simple and simply ask the designer to assign a unique name to each magnifiable section. Always be sure to assign a value to newId. This is needed to link the icon to the newly generated HTML of the magnified text.

The other two properties are optional, they don’t need to be specified. Width specifies how wide the magnified area should be on the display. It defaults to 350 pixels if no width is specified. By making this a specifiable property the designer is given control of how the text will fit the screen with each magnified area.

The other property, align, specifies the alignment of the magnify icon. Only “left” and “right” are correct values here. Any other value, or no specification at all, will cause left alignment to be used.

By now you should be ready to apply magnification to your own Web pages. If you still feel a bit uncomfortable trying this then view the source of this page to see how we’ve done it.

Now go forth and magnify!

it’s alwaysbeen a pain to do pullquotes in a Web page.