Create dynamic content with filters and transitions

by Phillip Perkins | Mar 20, 2003 8:00:00 AM

Takeaway: By using transitions and filters in Internet Explorer 5.5+, you can create multimedia effects without a lot of resource overhead. We'll give you some sample code so you can see these tricks in action.

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

You may not always have much input into the final graphical design of a Web application. But you're the glue that binds the data and the user interface, so it's important that you know what technologies exist for presentation.

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

Filters allow you to perform certain imaging tasks, such as determining the opacity of a control and dropping shadows. Transitions enable you to make a dynamic switch 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 with 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. Figure A shows you what a caption box might look like. Listing A provides sample code that illustrates this concept.

Figure A

The important part of this code is the STYLE attribute on the second DIV element. As you can see, the Gradient filter is applied to this element. The gradientType property of the Gradient filter determines the direction of the gradient. In this case, 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 run from #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 of this approach 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.

Additional resources
You can find more information on transitions and filters in Internet Explorer by visiting this section of Microsoft's MSDN Web site. The site offers examples of filters and transitions, as well as the code for handling these tasks.

4 comment(s)