Browse DevX
Sign up for e-mail newsletters from DevX


XML Applications : Page 5

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

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.

See how easy it is to read magnified text by clicking the icon? After you've opened this you can close it by clicking the close icon on the bottom right.

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

<html xmlns:pub>

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:

<style> <!-- @media screen { pub\:MAGNIFY {behavior:url(magnify.htc)} .magstyle {color: black; background-color: goldenrod; border-color: #black; border-width: thin; border-style: solid; padding: 1em; font-family: arial; font-size: 16pt; position: absolute; left:-1000; } } --> </style>

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:

<pub:MAGNIFY newId="1" width="400" align="left">The text that you wish to be magnifiable.</pub:MAGNIFY>

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!

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