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.

People who read this tip also read these tips:

• Inline Class Assignment
• Confirm Dialog Boxes
• Arrayed Buttons
• Arrayed Buttons
• Coloring Scrollbar Arrows