Scrolling Functions for HTML Magic Edges

This function shifts the inner DIV to the right and stops when the CSS left position is greater than or equal to zero. This is the function:  

function shiftRight()

{

document.getElementById('Calc').style.left = x;

//stop scrolling right

if (x >= 0)

{

self.clearInterval(TR);

//adjust position

document.getElementById('Calc').style.left = "0px";

}

x+=3;

}

We have to start shifting from the current left position of the inner DIV element, which is –205px. So the first statement gives the position of x (which at the start is -205) to the CSS left attribute of the inner DIV. The last statement in the function increments this value by 3, so that the next time the first statement is called, the position of the inner DIV will move to the right by 3px.

After the first statement, you have an if-statement. The if-statement tests to see if the left-top position (represented by x) is greater than or equal to zero. If it is, it stops the shifting by calling the DOM’s clearInterval(TR) method. It uses the return ID of the setInterval() method to achieve this.

The position of x = 0 is where the inner DIV just fits into the outer DIV and can be seen by the user. Based on the shifting algorithm (adding 3px), it is possible that when the shifting stops, the x position would not be zero. The second line in the if-statement corrects this.