Microsoft Developer Network

Microsoft Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas. The formulas used in a dynamic property can reference property values from other elements, thereby allowing authors unique flexibility when designing their Web pages.

A few examples of the things you can do with dynamic properties are:

• Create a spreadsheet-like table that recalculates totals when a user enters a change in a cell.
• Position elements relative to a moving mouse pointer.
• Move elements based on a timer.

Innovative Web authors can easily expand beyond this list of simple examples and create impressive and clever Web pages by exploiting the capabilities of dynamic properties.

This article covers the following topics.

• Benefits of Dynamic Properties
• Implementing Dynamic Properties
• Notes on Implicit Dependencies
• Related Topics

Benefits of Dynamic Properties

Dynamic properties simplify and minimize the amount of code required in a document. Authors can use dynamic properties to implement functionality formerly possible only with scripting. This frees authors from the requirement of learning script programming before they can design advanced features for their pages.

Dynamic properties are similar to a spreadsheet's implementation of a formula. In a spreadsheet, a cell's value can be a constant or a formula. A formula can include references to any number of other cells in the spreadsheet. Likewise, a dynamic property can reference other properties on the same document.

Dynamic properties enable Web authors to describe relationships between objects, properties, and variables in terms of functions, rather than specify an explicit sequence of steps to follow. Authors merely need to concentrate on functions without constantly monitoring the current state of the document.

Handling events can get fairly involved and inefficient. Implementing event handlers on a document that is not fully known at design time (database driven Web pages or pages with data binding, for example) is only possible with event bubbling. As a result, authors frequently implement a single global handler at the top of the event chain to update everything. On the other hand, with dynamic properties, authors can automatically determine a minimal and optimal recalculation of properties and evaluate only the expressions that really need to be evaluated.

Implementing Dynamic Properties

Dynamic properties are introduced through four new methods, outlined briefly in this section, as of Internet Explorer 5 and later.

• The getExpression method returns the current formula used for the dynamic property.
• The recalc method allows authors to explicitly cause the values of dynamic properties to be updated.
• The removeExpression method clears formulas set with the setExpression method.
• The setExpression method specifies a formula for a given value.

Dynamic property formulas are assigned in script with the setExpression method. They can also be assigned inline using the global possible value, expression, in the style block or in the STYLE attribute.

For example, Dynamic HTML (DHTML) can be used to position objects based on the location and measurement of other objects. The following equations are examples for centering an object horizontally or vertically.

• Center the object horizontally:
  object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);

• Center the object vertically:
  object.style.top=(document.body.clientHeight/2) - (object.offsetHeight/2);

After the position of an object is set, its appearance in the flow of the document layout is subject to change if the content or size of the client area changes. In the following example, dynamic properties are used to prevent authors from having to constantly update the position values whenever the client is resized. Prior to Internet Explorer 5, a Web author had to use a handler for the onresize event to catch changes to the client area and manually recalculate the positions. Notice that the formulas are the same, but they are implemented with expressions.

The following example shows how to set the expressions inline.

<DIV ID="oDiv"
  STYLE="background-color: #CFCFCF; position: absolute; 
         left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
         top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">
Example DIV
</DIV>

The following example shows how to set the expressions with the setExpression method.

<SCRIPT>
window.onload=fnInit;

function fnInit(){
   oDiv.style.setExpression("left",
      "document.body.clientWidth/2 - oDiv.offsetWidth/2"
   );

   oDiv.style.setExpression("top",
      "document.body.clientHeight/2 - oDiv.offsetHeight/2"
   );
   document.recalc(true);
}

</SCRIPT>
<DIV ID="oDiv"
  STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"
>
Example DIV
</DIV>

This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

In some cases, a lot of additional script is required to perform new calculations when a pivotal object is moved to a new position. This becomes apparent when observing objects positioned in relation to other objects.

For example, if four DIV elements are positioned around a fifth DIV, which in turn is centered on the screen and can be moved by the user, updating the positions for the four surrounding DIV elements can be time consuming. In addition, if the positions of the outlying DIV elements also include a variable that can be changed by the user, a Web author needs to constantly monitor the value of the variable and then update the positions accordingly. Or, expressions can be used to make it a lot easier.

The following sample code highlights how expressions can be set using script variables in tandem with the location and measurement of another object.

<STYLE>
.block {position: absolute; top: 100; left: 100; height: 75; width: 75;}
.block2 {position: absolute; top: 0; left: 0; height: 25; width: 25;}
</STYLE>

<SCRIPT>
window.onload=fnInit;
var iOffset=10;

function fnInit(){
   oDiv.style.left=document.body.clientWidth/2 - oDiv.offsetWidth/2;
   oDiv.style.top=document.body.clientHeight/2 - oDiv.offsetHeight/2;
   oBlock1.style.setExpression("top","
      (oDiv.style.pixelTop - iOffset
       - oBlock1.style.pixelHeight)
   ");

   oBlock1.style.setExpression("left","
      (oDiv.style.pixelLeft +
      (oDiv.style.pixelWidth/2 - oBlock1.style.pixelWidth/2))
   ");
}
</SCRIPT>
<DIV ID="oDiv" CLASS="block"></DIV>
<DIV ID="oBlock1" CLASS="block2"></DIV>

This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

For scripting, a dynamic property can be any legal JScript or Microsoft Visual Basic Scripting Edition (VBScript) statement. The third parameter of setExpression can be used to identify the scripting language used in the second parameter; JScript is the default. For the inline implementation, the expression must be written in JScript. When the expression is recalculated, identifiers in the string are resolved to the actual properties on the current page.

The parameters of setExpression are first evaluated by the scripting language engine. When specifying a string constant for a parameter of setExpression, nest the constant in single quotes. The single quotes force the parameter to be evaluated as a string. For example, the following call to setExpression does not set the background color of the object to red. Instead it attempts to set the background color to the value of a variable named "red".

object.style.setExpression("backgroundColor","red");

To allow the Cascading Style Sheets (CSS) parser to interpret this string as the natural color constant "red", the string must be wrapped in single quotes.

object.style.setExpression("backgroundColor","'red'");

Dynamic properties can be retrieved and removed using the getExpression and removeExpression methods. The getExpression method returns a variant containing the expression used to compute the dynamic property. This expression is recalculated when the getExpression method is invoked. Expressions are cleared using the removeExpression method. This method is the only way to clear dynamic property values set with the setExpression method. When an expression is cleared, the property value is equal to the last expression calculation and a Boolean value is returned indicating whether the expression was removed.

The recalc method is used to recalculate dynamic properties in a document. This method is helpful because dynamic properties are updated only for elements and properties declared in the formula. Invoking the recalc method with the parameter set to false (the default) will recalculate all expressions in the current document that reference properties that have changed since the last recalculation. Calling recalc(true) will recalculate all expressions in the current document, regardless of whether referenced properties have been changed. After a dynamic property has been recalculated, references to that property will retrieve the new calculated value.

The following sample demonstrates the use of the recalc method to explicitly update dynamic properties used to orbit objects on a page.

This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Notes on Implicit Dependencies

Implicit dependencies refer to properties that may be altered by changes in other properties. For instance, the offsetWidth of an element depends on the width and possibly even the height value in a style sheet.

In most cases the author does not need to worry about these dependencies; Internet Explorer 5 handles most of these case automatically. This is done by mapping certain properties to a canonical property for purposes of dependency tracking. For instance, the canonical property for all width properties is offsetWidth. A dependency on clientWidth, width, posWidth, pixelWidth, currentStyle.width, or the width of the img element implies a dependency on offsetWidth.

Although Internet Explorer automatically handles implicit dependencies for the most obvious cases, there are still some cases where the dependency is more obscure. Because the actual property still fires a property change notification, the recalculation engine usually knows to reevaluate the expression. However circular expressions involving these properties can only be detected at run time (and not when the expression is set on the property). Probably the most complex dependency is on the clientHeight of a DIV. The final computed clientHeight of the DIV depends on the innerHTML, the margin properties, the padding properties, and of course the width.

Related Topics

• Introduction to Dynamic Styles
• Be More Dynamic