Removing a Dynamic Property

Sometimes a formula that sets the position of the element forever is too restrictive. You want to relax the binding between the element property and the expression currently assigned to it. The removeExpression() method does just that. It removes an expression from a property of an element. To remove the expression for the left property of the Sun, you would go:

oSun.style.removeExpression("left");

We used the removeExpression() method in our Solar System example. One of the script's features is that the user may move the Sun to anywhere on the page, by clicking on it, moving the cursor (without pressing), and then terminating the dragging by another mouse click. The Sun is initially set at the center of the client area, using dynamic properties:

oSun.style.setExpression("left", "document.body.clientWidth / 2 -
  oSun.style.pixelWidth / 2");
oSun.style.setExpression("top", "document.body.clientHeight / 2 -
  oSun.style.pixelHeight / 2");

But after the user moves the Sun, leaving the expressions as they are will yield repositioning the Sun to the center of the client area, nullifying the user's actions. To avoid it, we remove the expression in the fnStartStopMoving() function:

function fnStartStopMoving() {
  if (oSun.moving == true) {
    oSun.moving = false;
    oSun.style.removeExpression("left");
    oSun.style.removeExpression("top");
    intervalID = setInterval("triggerRecalculation()",
      frequencyOfRecalc);
  }
  else { // oSun.moving = false
    oSun.clickOffsetX = event.clientX - oSun.offsetLeft;
    oSun.clickOffsetY = event.clientY - oSun.offsetTop;
    oSun.moving = true;
    clearInterval(intervalID);
  }
}

This function is called whenever the user clicks the mouse. According to the moving property, we can determine whether the Sun is currently being dragged or it is standing still. We remove the expression upon terminating the move. The Sun is now exposed to changes in the client area (resizing etc.) without being able to react to. The Sun will keep its absolute position with respect to the window's (0,0) point, regardless of the window's size.

Next: How to force a recalculation