July 27, 2000 - The removeExpression() Method | WebReference

July 27, 2000 - The removeExpression() Method

Yehuda Shiran July 27, 2000
The removeExpression() Method
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Sometimes a formula that sets the position of the element forever is too restrictive. To relax the binding between the element property and the expression currently assigned to it, use the removeExpression() to remove the expression from the property of an element. The general syntax is: 

object.style.removeExpression(dynamic property)

In Column 65, Dynamic Properties, we showed how to program the Solar System. To remove the expression for the left property of the Sun, for example, you would go:

oSun.style.removeExpression("left");

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 that problem, 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 if it's 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.

For more on Dynamic Properties, go to Column 65, Dynamic Properties.