Defining Dynamic Properties inside your HTML

Home

Here

Defining dynamic properties inside your HTML

Defining a dynamic property directly inside HTML elements is easy enough, via the "expression()" function. No, this isn't your regular JavaScript function. Take a look at the below:

<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>

Expression() accepts a JavaScript expression as its parameter , and returns that as the value of the property in question. In the case above, it means our DIV will have a width that's half the page's width.

Now, in the above example, I used the expression:

document.body.clientWidth/2

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":

document.documentElement.clientWidth/2

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:

Ok ok, so only more elegant from the intrinsic standpoint that it's an entirely CSS based solution. If you don't like all the clutter within the element, you can store the desired non changing logic inside JavaScript variables first to lesson the amount of code. Here's the same example above, streamlined with the help of a a JavaScript variable caching the reference to the body of the page:

Example c1.1: Center Image Dynamic Properties Example Revised:

Much better? And btw this also illustrates how your dynamic expressions can access JavaScript variables as part of the calculations.

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:

Example:

1st DIV

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.

Tutorial Introduction
Defining Dynamic Properties inside your HTML
Defining Dynamic Properties inside a global style sheet
Defining Dynamic Properties inside your script

Defining Dynamic Properties inside a global style sheet