Browse DevX
Sign up for e-mail newsletters from DevX


XML Applications : Page 3

Behaviors are an enhancement to Internet Explorer 5 that allow designers to add scripting elements without having to do the scripting needed to make them work. Behaviors are also a way in which scripters can write a script once and turn it over to designers for use whenever needed.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

typewriter text

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 <html> tag on your Web page. Here's the one we're using on this page:

<html xmlns:fx>

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:

<style> <!-- @media screen{ fx\:TYPEWRITER { behavior:url(typewriter.htc); height: 4em; font-family: "ocr a extended", courier; } } --> </style>

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:

<fx:TYPEWRITER speed="120">Type this text.</fx:TYPEWRITER>

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!

Thanks for your registration, follow us on our social networks to keep up-to-date