| One interesting DHTML feature in IE5+ that never quite made it into the spotlight is Dynamic Properties. By their very nature, properties defined in HTML are static, non changing (ie:
“). Dynamic Properties allows you to substitute static values in HTML with a dynamic expression instead, so instead of “300”, it could be “half the width of the browser window.”
|
| It’s a nifty feature that serves to drastically reduce the amount of effort required to change certain HTML property values dynamically. Can’t hurt to see what that’s all about! |
| Dynamic Properties can be defined in two ways: |
| • Directly within the HTML as a property value of the element in question. • Inside your script, by dynamically attaching it to the element. |
| Benefits of Dynamic Expressions |
| 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. |
| We can simplify the previous code by ‘cutting out the middle man’. At the moment, we have sp mimicking the style of the SPAN element, and we manually connect the two. |
| DHTML provides expressions to link the two features automatically. An expression is set as a style, and uses variables. Then, when we change the variable, the style value also changes. For example, make the following changes to the previous text scrolling code. |
| Replace the scroll() function with: |
function scroll() {
if (sp<-350) sp=100;
sp--;
document.recalc();
setTimeout('scroll()',50);
}
|
| Here is the text that we see scrolling on the browser screen. This DHTML example brought to you by eBIZ.com. |
| (the change is in the top style, and we can remove the ID). |
| What we have done here is connect the top style of the SPAN to the variable sp. This means that when sp changes in the code, the top style also changes. Unfortunately, JavaScript ‘hogs’ the code, meaning that JavaScript prefers to finish a calculation before updating the screen. This can get very annoying with graphics, as we want to see all the intermediate steps. |
| Using document.recalc() forces the document to update itself, and this way we can see each individual step of the animation. We are not limited to simple expressions, try expression(sp*3) and the text will scroll thrice as fast. |