July 19, 2000 - The setExpression() Method | WebReference

July 19, 2000 - The setExpression() Method

Yehuda Shiran July 19, 2000
The setExpression() Method
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Dynamic properties were first introduced in Internet Explorer 5. This feature allows you to specify an element property as a function of properties of other elements. Let's take an example, and demonstrate with it how you did property assignment before and after Internet Explorer 5. Without dynamic properties, you centered a DHTML element horizontally like this:

object.style.left = document.body.clientWidth/2 - object.offsetWidth/2;

and vertically:

object.style.top = document.body.clientHeight/2 - object.offsetHeight/2;

After the initial placement, the appearance of the DHTML element on the page is subject to changes in the content or size of the client area. Normally, you had to detect events such as onresize and constantly update the position values whenever the client is resized. With dynamic properties, you would do something like that:

oDiv.style.setExpression("left", 
  "document.body.clientWidth/2 - oDiv.offsetWidth/2");
oDiv.style.setExpression("top",
  "document.body.clientHeight/2 - oDiv.offsetHeight/2");

But you have to do all initial setting upon loading of the page. The following code is a complete code of a DIV element that is being positioned at the center of the client area, using dynamic properties:

<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="position: absolute"; top: 0; left: 0>
Example DIV
</DIV>

Notice that you have to define in the DIV statement the STYLE parameters you want to set as dynamic properties. For more on Dynamic Properties, go to Column 65, Dynamic Properties.