Welcome to the fifth part of a five-part series that shows you how to make HTML magic edges. These edges allow you to slide useful applications out of the sides of your web pages when a visitor slides his or her mouse over the edges. In this part of the series I explain the code for the project. We also conclude with some useful comments. Toward the end of this part, I give you a link to the complete code of the project in zip file format.
Completing the HTML Magic Edges Project - Code to Shift Down and Up (Page 4 of 5 )
For each variable and function related to the left edge, there is an equivalent variable or function to shift down and up (related to the top edge), but with different names. You can get the complete code, which includes this section, from the following link:
There are two functions that are related to the left and top edge. One of them is:
function removePane()
{
if (edge == "left")
removePaneL();
else if (edge == "top")
removePaneU();
}
This is the function called to remove the pane which comes out from the left mimic edge or the top mimic edge. When the BODY element receives a click, this function is called. It first checks to see if the pane came out of the left edge. If it did, it calls the removePaneL() function, which would cause the pane to go back into the left edge. Remember that the removePaneL() function will first have to verify whether the click is from the pane or the BODY alone. If the pane was not from the left edge, the function goes on to see if it was from the top edge. If it was from the top edge, it calls the equivalent removePaneU() function for the top edge.
The other function which is common to both the left and top edge is:
function checkRemSit()
{
if (edge == "left")
leftPaneShown = true;
else if (edge == "top")
topPaneShown = true;
}
The name of this function is checkRemSit(), meaning Check Removal Situation. The aim of this function is to indicate whether the pane is shown (leftPaneShown) from the left edge or the top edge, with the ultimate purpose of differentiating between the click from pane and click from BODY outside pane. Note that we are dealing with the same outer and inner DIV elements, whether the pane is coming out of the left edge or the top edge.
Another aim of this function is to avoid conflicts between the functions for the left edge and those for the top edge. It first of all checks to see if the value of the edge variable is “left.” If it is, it sets the leftPaneShown variable to true. Otherwise, the function checks to see if the value of the edge variable is “top;” if it is, it sets the topPaneShown variable to true.
HTML 
Scrolling Functions for HTML Magic Edges
