Scrolling Functions for HTML Magic Edges
(Page 1 of 4 )
Welcome to the third part of a five-part series that explains how to create magic edges -- edges of web pages from which items can be scrolled -- using HTML. In this part, we continue with the basics of scrolling from the left edge. We shall complete the basics in this part, and then we shall begin the project.
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.
Next: The shiftRight() Function >>
More HTML Articles
More By Chrysanthus Forcha
