Completing the HTML Magic Edges Project - The shiftRight() Function
(Page 3 of 5 )
This is the function; it is familiar. I will only explain the added statements.
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";
processOnL = false;
edge = "left";
}
x+=3;
}
This function shifts the inner DIV (pane) and stops the shifting. The processOnL variable, when set to true, indicates that the pane is shifting. It is this same function that has to indicate that the pane has stopped shifting. The if-statement in the function sets this variable to false to indicate this. When the pane has moved from the left mimic edge and settles on the page, the edge variable has to indicate this. The if-statement gives the value of “left” to the edge variable, indicating that the left pane is now out.
The removePaneL() Function
The function prepares the page to remove the pane. This is the function:
function removePaneL()
{
if (leftPaneShown == false)
{
if (processOnL == false)
{
processOnL = true;
x = document.getElementById('Calc').style.left;
x = parseInt(x);
TL = self.setInterval("shiftLeft()",10);
}
}
//reset the leftPaneShown boolean variable
leftPaneShown = false;
}
This function will call another function that will send the pane back to the left edge. So there are two functions involved in sending the pane back to the left edge. The functions (two) to send the pane out from the top edge are different from those to send it out from the left edge. The functions (two) to send the pane back into the top edge are different from those to send it back into the left edge.
We are still dealing with the above function. Remember that the leftPaneShown variable is used to differentiate between the click on the pane and the click on the BODY outside the pane. When the pane is clicked, two click events actually occur. The one from the pane happens first, followed by the one from the BODY. However, when the BODY is clicked outside the pane, only one click event (the BODY click) occurs. When you click the pane, the leftPaneShown variable is set to true from the onclick event of the outer DIV. When you click only the BODY element, the variable remains false. The statements in the above function will only be executed if the leftPaneShown variable is false, meaning the BODY element was clicked outside the pane. So when this function is called, if the value of this variable is false, then the statements are executed.
The statements begin with another if-statement. This one checks to see if the pane is still in motion by verifying if the processOnL variable is true. If it is true, it does not execute the statements it has. If it is false, it executes the statements. When it is false, the first statement sets the processOnL variable to true, indicating that the pane is to begin motion or is in motion. Remember, under this condition, nothing can stop the motion of the pane, and no occurrence of the pane can come out of any point of the edges.
The rest of the statements are familiar. The last one calls the shiftLeft() function every 10ms. It is this shiftLeft() function that actually shifts the pane back into the edge.
The shiftLeft() Function
This function shifts the inner DIV back into the edge. It sets the display property of the outer DIV to “none,” making the elements below it free for access (e.g. to be selected by dragging the mouse). The function also resets certain variables and gives the initial position to the outer and inner DIV. With the resets and initial positions given, the whole process can be repeated from the left edge (or top edge by other functions) without conflict. This is the function:
function shiftLeft()
{
document.getElementById('Calc').style.left = x;
//stop scrolling left
if (x <= -205)
{
self.clearInterval(TL);
document.getElementById('Cont').style.display = "none";
processOnL = false;
//reset the positions of the left movement
document.getElementById('Cont').style.left = 0;
document.getElementById('Cont').style.top = 0;
document.getElementById('Calc').style.left = 0;
document.getElementById('Calc').style.top = 0;
paneBack = true;
}
x-=3;
}
The function should be self-explanatory.
Next: Code to Shift Down and Up >>
More HTML Articles
More By Chrysanthus Forcha
