Inside Technique : Using Dynamic Expressions : Highlighting the Current Page

Our first example builds on a very simple and common scenario. Most web-sites have a navigation bar that lists links to various pages on your site. To help identify the current page to the user you may want the current page on the menu to be rendered differently. While not difficult this is usually implemented in one of the following ways:

• Customize each page to display the active page correctly
  Seems like the most simple solution but unfortunately is one of the most expensive. Instead of authoring the menubar once, you must customize the menu for each page creating a maintenance nightmare.
• The server dynamically generates the navigation bar
  Requires server processing power for a relatively simple operation but does offer the best cross-browser compatibility.
• The client dynamically generates the navigation bar entirely from script
  Requires knowledge of javascript to author the menu and also opens your page up to cross-browser compatibility problems. For example, Netscape often has problems using a document.write() inside of a table.
• After the navigation bar loads, you write a script that changes the style of the current page
  Requires the page to rerender after it finishes loading (or keep the navigation bar hidden until the style change is applied)

With Dynamic Expressions this can be accomplished entirely on the client while the page loads. Next we show you how to accomplish this. Below is a simple demonstration. If you are running IE 5.0 or later, the current page being viewed will be rendered bold and without the underline:

If you are running IE5 or later "Highlighting the Current Page" should be shown bold without an underline. All other browsers should be rendering standard links. As the page loads, we use IE5's dynamic expressions to evaluate and set the appearance of different elements. The only downside to this approach is the rendering effect is limited to only IE5 or later. However, this solution requires almost no changes to your HTML so it degrades very gracefully (the extra style declarations are ignored by other browsers).

Creating this effect is extremely simple. First, we define our menu. To help isolate the menu from the rest of the page we wrap the menu in a DIV with a unique ID.

<DIV ID=menuSample>
<A HREF="page1.asp">Using Dynamic Expressions</A><BR>
<A HREF="page2.asp">Highlighting the Current Page</A><BR>
<A HREF="page3.asp">Style based on Content</A><BR>
<A HREF="page4.asp">Style based on Structure</A>
</DIV>

We encapsulate the menu in a uniquely identified DIV merely for performance reasons. Using this DIV we can scope our dynamic expression to be applied only to the DIV's contents rather than the entire document. The next step is to associate a style with the menu links. This is defined in the global stylesheet:

<STYLE>
#menuSample A {font-weight: expression(doThis(this));
  color: black;
  font: 10pt arial}
</STYLE>

The above style declaration is applied to all the A elements inside the element with the ID menuSample (or DIV element). Notice that for the font-weight attribute we applies an expression. The contents of the expression are a javascript statement. For this expression we are calling the doThis() function and passing the current element. The element represented by this is the element the style is being applied too (the A elements in this example).

Next we write the doThis() function in Javascript. Our doThis function can actually set any property, not just the font-weight that it is associated with:

<SCRIPT>
function doThis(el)  {
  if (el.href==window.location) {
    el.style.textDecoration = "none"
    return "bold"
  }
}
</SCRIPT>

We do a very simple test in our function. If the URL of the current page is the same as the URL of the link, we render the link bold without the underline. For all other links nothing happens.

Dynamic Expressions can add considerable overhead to your page and therefore should be used carefully. You should keep in mind the following two ideas as you add expressions to CSS attributes:

1. Scope Carefully
   When associating expressions with an element do your best to limit the number of times the expression is called. A large number of expressions can slow down your page.
2. Apply Expressions Carefully
   If you are simply trying to customize the style as the page loads, you should assign the expression to a static attribute (eg. font-weight) instead of one that can dynamically change (eg., the width).

Dynamic Expressions also offer a new way to extend the capabilities of CSS. Currently you are limited to applying style left-to-right in your document based on a precedence of rules. For example, you can set the style of an A element that is inside of another element. However, you cannot easily apply a style based on the contents or based on certain contexts. Using dynamic expressions you can easily extend CSS with this new functionality.

Expressions are applied after all the contents for the element have been parsed. This allows you to add really powerful logic and conditions to your style sheets. Next we show you two additional techniques for manipulating style based on the document's content and structure. We start with the document's content.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.