Completing the HTML Magic Edges Project - Code to Shift Right and Left
(Page 2 of 5 )
Here I talk about the code responsible for displaying the outer loop and shifting the inner DIV to the right and to the left. I also talk about the code segment that removes the pane from the page.
The variables used by this section are:
var x;
var TR;
var TL;
var processOnL = false;
The x variable represents the x coordinate of the pixel. The TR variable is the returned ID from the setInterval() function when shifting the pane to the right. The TL variable is the returned ID of the setInterval() function when shifting the pane to the left. In the process of shifting the pane to the right or the left, the direction cannot be reversed until the movement is complete. The processOnL variable is used for this. It is initially set to false. Its default value is false.
The doShiftRight() Function
The doShiftRight() function prepares the page to shift the pane to the right. This is the function:
function doShiftRight()
{
if ((processOnL == false)&&(paneBack == true))
{
processOnL = true;
paneBack = false;
document.getElementById('Calc').style.left = "-205px";
x = document.getElementById('Calc').style.left;
x = parseInt(x);
yMousePos = event.clientY;
//center (middle) the pane at the y position of the mouse
document.getElementById('Cont').style.top = yMousePos - 98;
//display the outer DIV
document.getElementById('Cont').style.display = "block";
TR = self.setInterval("shiftRight()",10);
}
}
The statements inside the doShiftRight() function are only executed when the pane (inner DIV element) is not in motion and when it is inside the left edge (or has gone back into the edge). The test in the if-statement takes care of this. The first statement in the if-block sets the processOnL variable to true, meaning that the pane is in motion or is about to begin moving. The next statement sets the paneBack variable to false, meaning the pane is no longer in the edge.
Remember that in the project, the CSS style attribute has top and left values for the outer DIV of 0px. So when the web page is opened, the outer DIV’s placement is on the page at the left-top client area. Its display property is “none,” so it is not seen, and does not occupy space; it has no effect on the elements behind it.
The next statement in the function gives the inner DIV a left value of –205px. This displaces the inner DIV into the mimic edge. It will be shifted from there. The next two statements are familiar.
When the mouse pointer goes over the mimic edge, the DOM event object takes note of the x and y positions (coordinates) of the mouse pointer in the client area; in this case, the coordinates are on the left mimic edge. We are dealing with the left mimic edge; we need to know the y coordinate of the mouse pointer so as to position the middle of the pane at the same level. The next statement in the function gets this position from the clientY attribute of the event object and assigns it to the yMousePos variable.
The next statement gives this position indirectly to the outer DIV. Any position you give to the outer DIV, the inner DIV takes as well, by the fact that it is inside the outer DIV; it just fits into it, and its value for the position property is "relative." The height of the inner DIV is 196px. Half of this value is 98px. This statement in the function uses the yMousePos variable and the value 98px to give the top value of the outer DIV. This action puts the middle of the outer DIV at the same level as the position of the mouse pointer.
The next statement displays the outer DIV. Following our code, when the outer DIV is displayed, the inner DIV is also displayed. The last statement in the function is familiar.
Next: The shiftRight() Function >>
More HTML Articles
More By Chrysanthus Forcha
