Scrolling Functions for HTML Magic Edges

Basic Function for Scrolling from the Left

When the mouse pointer goes over the left edge, the doShiftRight() function is called. The function has two associated variables. This is the function with the variables:

var x; //x coordinate

var TR; //return value for setInterval() function - moving right

function doShiftRight()

{

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

x = parseInt(x);

TR = self.setInterval("shiftRight()",10);

}

Keep in mind that the pixel is the smallest recognizable component on the web page. The web page is filled with pixels arranged in rows and columns. The entire image you see on the screen is a result of the pixels having different colors.

The x variable above is for a column of pixels in the outer DIV element. Remember that the inner DIV element just fits into the outer DIV element. So this variable is actually used to change the horizontal position of the inner DIV. The next variable, TR, is for the return ID for the setInterval() method inside the function above.

The first line in the function copies the CSS left position value of the inner DIV element to the x variable. This left value at the start is –205px. The next line makes sure it is an integer. The third line calls a function named shiftRight() through the DOM’s setInterval() function every 10ms.