Defining dynamic properties inside your HTML
<div style="width: expression(document.body.clientWidth/2+'px'); background-color: yellow"> This DIV will always be half the size of the page's width </div>
Now, in the above example, I used the expression:
to derive half of the page's width. But wait, there's a catch! You see, in IE, depending on whether a page contains a valid doctype declaration at the very top of the page, the way to referencing numerous properties of the body changes as a result. Namely, if your page does, the syntax "document.documentElement" needs to be used instead of "document.body":
Taking this unexpected bit of information into account, we can create an expression that works in all types of pages in IE:
expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth/2+'px' : body.clientWidth/2+'px');
The above expression tests for the precense of a valid doctype, and switches between the two possible syntax to referencing the desired property in IE. Notice how all the quotes are single (') instead of double (")- this is important, because inside inline styles, using the later would confuse the browser and render the dynamic expression useless!
The expression() function when invoked creates a dependency between your HTML property and dynamic expression specified. If and when the value for the later changes due to select user actions, the function will automatically update your HTML property with this new value. What this means is that if you tried to resize your browser window, for example, the DIV above will automatically resize to be half of the new window's width due to the dependency created between the two values and user actions that may affects one of the two. This is what makes Dynamic Properties such as time saver- it keeps tracks of and adjusts to user actions automatically.
-Positioning an image in the center of the browser window
Without dynamic expressions, the simple task of displaying an image in the center of the window, for example, can be a messy task, partially because you also have to taken into account if the user has resized the window. Using dynamic expressions, it's a more elegant affair:
Example c1: Center Image Dynamic Properties Example:
<img src="myimage.gif" style="width: 120px; height:
150px; position:absolute; left:
Example c1.1: Center Image Dynamic Properties Example Revised:
Defining dynamic properties that rely on the value of other dynamic properties
Here's something you may not have thought of- you can define a dynamic property that changes depending on the value of another dynamic property. The simplest example would be two DIVs, the second being half the width of the first's:
2nd DIV (1/2 the width of the first)
For the second DIV, I set its width to half the width of the first. Notice how I need to retrieve the first DIV's width by accessing it by ID, then its width property, and since this property contains a percentage value, I need to include a "%" prefix at the end of the expression to complete the setting.