Dynamic Properties: Setting A Dynamic Property

Dynamic Properties

Setting A Dynamic Property

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.

Let's see now the Solar System example. First we set the Sun in the center of the client area. Then we set the Earth to orbit around the Sun in a fixed radius. Then we set the Moon to orbit the Earth in its own distance. We'll explain each line later in this column. Here is the fnInit() of the Solar System:

function fnInit() {
  oSun.style.pixelWidth = 161;
  oSun.style.pixelHeight = 161;
  oEarth.style.pixelWidth = 100;
  oEarth.style.pixelHeight = 100;
  oMoon.style.pixelWidth = 23;
  oMoon.style.pixelHeight = 23;
  oSun.moving = false;
  oSun.style.setExpression("left", "document.body.clientWidth / 2 -
    oSun.style.pixelWidth / 2");
  oSun.style.setExpression("top", "document.body.clientHeight / 2 -
    oSun.style.pixelHeight / 2");
  oEarth.style.setExpression("left", "xLocation(oSun, 1.0, 365.26,
     currentTime) - oEarth.style.pixelWidth / 2");
  oEarth.style.setExpression("top", "yLocation(oSun, 1.0, 365.26,
     currentTime) - oEarth.style.pixelHeight / 2");
  oMoon.style.setExpression("left", "xLocation(oEarth, 0.25, 28,
     currentTime) - oMoon.style.pixelWidth / 2");
  oMoon.style.setExpression("top", "yLocation(oEarth, 0.25, 28,
     currentTime) - oMoon.style.pixelHeight / 2");
  intervalID = setInterval("triggerRecalculation()",
     frequencyOfRecalc);
}

Next: How to get a dynamic property

Produced by Yehuda Shiran and Tomer Shiran

Created: July 18, 2000
Revised: July 18, 2000

URL: https://www.webreference.com/js/column65/3.html