Co-Sponsored by: Latest Features  • Reuse, Recycle, Extend  • RSS Toolkit  • Migration Confrontation  • Load Balancing and Scaling Your WCF Services  • Got Maps? Article Rating Rate this article on a scale from 0 to 5 5 Best 4   3   2   1   0 Worst Email Tell a friend about this article!

UI Tips

Hot Tracking without JavaScript

By Andrew Flick and Anthony Lombardo

One of quickest ways to enhance the look and feel of a page is to add hot tracking to elements. Hot tracking is usually used to alter the appearance of an item as the mouse is moved across it. Although it sounds like this would require complex JavaScript mouse event handlers, in actuality we can provide this behavior without writing a single line of JavaScript.

The trick is to use CSS; specifically, pseudo classes. A pseudo class is a CSS class that is automatically applied in certain states. Pseudo classes can be defined for link, hover, active, and visited states. Though FireFox and Internet Explorer 7.0 support pseudo classes on all elements, earlier versions of Internet Explorer will only provide this functionality for anchor tags.

The table below lists the pseudo classes, and what they control:

The syntax to define a pseudo class is pretty simply, and requires separating the selector from the pseudo class with a semicolon. Using an anchor tag selector, the class stubs are shown below:

a:link                      { } /* unvisited */

a:visited                 { } /* visited */

a:hover                  { } /* hot track */

a:active                  { } /* selected */

It is important to note that the order in which the classes are defined is extremely important. The hover pseudo class must come after the link pseudo class, and active must follow hover. This is important since the order of the classes defines their specificity. Defining the link class after the hover class would result in a static appearance as the link class would always override the hover.

Using the class stubs above, simply fill in your style information and you’re ready to go. One visual effect commonly used is to bold text as you hover over an element. This can be done by adding font-weight:bold to the hover class. Now as you hover over any anchor tag on the page, the font will be bolded.

Here’s a tip that will prevent you from banging your head against the wall: Ensure that you have an href set for the anchor tag. Internet Explorer will not apply pseudo classes to anchors that do not have hrefs. So if you’re simply using the anchor tag to provide hot tracking and are not interested in using the element for navigation, set the href to “#”. By setting the href to a section on the page, you can keep the browser from posting back while still ensuring that the pseudo classes are applied correctly.

If you want to provide an enhanced experience for capable browsers, extend the pseudo class functionality to divs and other elements. Even though this functionality is only available on a limited set of browsers at this point, quick adoption of Internet Explorer 7 should change the numbers significantly.

Andrew Flick is Product Manager - NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc. Prior to joining Infragistics, Andrew played an avid role in presenting on emerging .NET technologies throughout the Midwest to a variety of User Groups as well as numerous Student Groups. As an active member of the INETA Academic Committee, Andrew has authored content on building successful User Groups, as well as numerous white papers on building an effective community. A Microsoft MVP, Andrew joined Infragistics in July of 2004 as a Technology Evangelist, where he was responsible for the creation of reference applications and authoring .NET technology articles for industry leading publications, as well as the world wide delivery of Infragistics’ Technology demonstrations. Andrew currently serves as Infragistics Product Manager for NetAdvantage Windows Forms Technologies & TestAdvantage. As product manager, he spearheads the product management and strategies of Infragistics Windows Forms Product Lines — from establishing the direction through delivery. Working directly with the Director of Development, he sets the direction, plans, and manages product development. Contact Andrew at mailto:andrew@infragistics.com.

Anthony Lombardo is Product Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics’ ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:anthony@infragistics.com.