 | ||
| ||
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:
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:
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.
Dynamic properties are introduced through four new methods, outlined briefly in this section, as of Internet Explorer 5 and later.
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, 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.
object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);
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 through the setExpression method.
The following sample highlights how the expressions are set.
<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"
);
}
</SCRIPT>
<DIV
ID="oDiv"
STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"
>
Example DIV
</DIV>
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>
For scripting, a dynamic property can be any legal JScript® (compatible with ECMA 262 language specification) or 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 following sample code demonstrates how a dynamic property can be set via the setExpression method.
/* Set the width of an object to one half the width of the client. */
// Set the expression with setExpression:
object.style.setExpression("width","document.body.clientWidth/2");
Dynamic properties can be retrieved and removed using the getExpression and removeExpression methods. When a property value is retrieved with the getExpression method, a variant is returned representing the current value of the dynamic property. Also, the 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.
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.
For more information on dynamic properties and styles, see the following articles.
Did you find this topic useful? Suggestions for other topics? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top