Create dynamic content with filters and transitions

Here are some programmatic ways of providing dynamic content short of resource intensive images and Macromedia Shockwave.

This article originally appeared as a Web Development Zone e-newsletter.

By Phillip Perkins

There will be times when you have little input as to the final graphical design of a Web application. However, you are the glue that binds the data and the user interface, so it's important to understand what technologies exist for presentation.

You'll be thrilled to learn that there are programmatic ways of providing dynamic content short of resource intensive images and Macromedia Shockwave. Internet Explorer provides methods for applying graphical effects to standard HTML controls through filters and transitions.

Filters allow you to do certain imaging tasks, such as controlling the opacity of a control and dropping shadows. Transitions allow you to provide a dynamic transition from content in a control to new content. An example would be a transition that reveals the new content in a DIV element by scrolling in from left-to-right while hiding the old content.

The benefit of these techniques is that, with a few lines of code, you can have this functionality without creating these effects in an imaging or multimedia tool. You can also apply these effects without calculating the size you need to fill in the finished area.

Suppose you want to create a DIV element that contains another DIV element that acts like a caption bar in a regular window. In newer versions of Microsoft Windows, the default caption bars have a gradient fill, starting from a blue on the left-hand side and making its way to a lighter blue on the right-hand side. If you want to create the same effect, you could easily do this through an Internet Explorer filter.

Here's sample code that illustrates this concept:

<DIV style="width:300px;padding: 1px;background-color:menu;border:2px menu outset;">
<DIV style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColor=4278190208,endColor=4289121008);
            border-bottom:2px menu solid;
<DIV style="width:100%;
            border:2px menu inset;">
This is where your window text goes.<BR>
This will give the appearance of a normal window, but it is only an illusion.

The important part of this code is the STYLE attribute on the second DIV element. You'll see that the Gradient filter is applied to this element. The gradientType property of the Gradient filter determines the direction of the gradient. In this case, the "1" specifies a vertical gradient.

The startColor and endColor properties can contain values from 0xFF000000 to 0xFFFFFFFF (4278190080 to 4294967295). These values correspond to an AARRGGBB format, where AA is the alpha (or opacity) value, RR is the red value, GG is the green value, and BB is the blue value. In an HTML declaration, these values must be in decimal format.

The DIV's gradient surface will start with an initial value of #000080 to #A6CAF0—just like the default gradient in Windows 2000 caption bars. With a little more coding, the outer DIV will render similar to a regular window. Providing this type of style eliminates having to produce an image to accomplish the same task. Also, since it's 100 percent dynamic, it can accommodate any width.

If you want to take your code a little further, you can provide different values based on user preferences, as in a content management solution. The drawback is that it's limited to Internet Explorer 5.5+, as are most transitions and filters. In an Internet situation, you should conform to standards and not restrict global users to one technology.

If you wish to find more information on transitions and filters in Internet Explorer, you can visit Microsoft's MSDN Web site. The site is a valuable tool that offers examples of filters and transitions, as well as the code for doing these tasks.

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications.

Editor's Picks

Free Newsletters, In your Inbox