Complete Code of Magic HTML Client Edges

This is the fourth and the last part of my series, Magic HTML Client Edges. In this part of the series I give you the complete code of the project. We also conclude by having 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.

The Code and its Operation
I will give you the code as it is found in the zip file from top to bottom. Again I will be brief in the explanation since you should have seen a lot of it in bits. We begin with the global variables that are used in many sections of the code. These variables are:

var edge = "";
var paneBack = true;
var leftPaneShown = false;
var topPaneShown = false;

These variables are related to some of the technical requirements we saw in the third part of the series. When the pane (inner DIV) has scrolled from the left edge into the page, this edge variable is given the value "left". When the pane has scrolled from the top, down into the page, the variable is given the value, "top".

When the pane is still in the edge or has gone back into the edge, the variable, paneBack is used to indicate so with the value of true.

Now, when you click the BODY element the pane should scroll away (into the edge). When you click the pane, since the pane is in front of the BODY element, the BODY indirectly receives a click. You do not want the pane to scroll back when the BODY is not clicked directly. The next two variables above are used for this. The first one (leftPaneShown) is for the pane from the left edge. The second one (topPaneShown) is for the pane from the top edge.

Code to Shift Right and Left
Here I talk about the code responsible for displaying the outer DIV 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 variable, x represents the x coordinate of the pixel. The variable, TR is the returned ID from the setInterval() function when shifting the pane to the right. The variable, TL 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 variable, processOnL 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);

//top of pane
document.getElementById('Cont').style.top = "25%";

//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-condition takes care of this. The first statement in the if-block sets the variable, processOnL to true, meaning that the pane is in motion or is to begin to move. The next statement sets the variable, paneBack 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 as 0px. So when the web page is just opened, the outer DIV's placement is on the page at the left-top client area. Its display property at that time is "none", so it is not seen, and does not occupy space; it has no effect on the elements that would be 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. This is for consistency to make sure that the shifting starts from the right position.

The next statement puts the top of the outer DIV element and all its content 25% distant down the client area. The inner DIV will be shifted horizontally within the outer DIV element at that position.

Any position you give to the outer DIV, the inner DIV takes as well by the fact that it is inside the outer DIV. The value for the position property of the inner DIV is 'relative'. With this, by changing the values of the left and top properties of the inner DIV, you move it within the outer DIV.

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 (from the previous parts of the series).

The shiftRight() Function
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 actually shifts the inner DIV (pane) and stops the shifting. The variable, processOnL, 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-block in the function sets this variable to false, to indicate so. When the pane has moved from the left mimic edge and settles on the page, the edge variable has to indicate so. The if-block gives the value, "left" to the edge variable, indicating that the left pane is now out of the edge and into the page.

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 actually send the pane back into the left edge. So there are two functions involved in sending back the pane to the left edge. The functions (two of them) to send out the pane from the left edge are different from those (two of them) to send out the pane from the top edge. The functions (two of them) to send back the pane into the top edge are different from those (two of them) to send back the pane into the left edge.

We are still dealing with the above function. Remember that the variable, leftPaneShown 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 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 variable, leftPaneShown is set to true from the onclick event of the outer DIV. When you click only the BODY element, the variable remains at false. The statements in the above function will only be executed if the variable, leftPaneShown 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 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 function, shiftLeft() every 10ms. It is this shiftLeft() 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 positions to the outer and inner DIV. With this 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 {
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.

Code to Shift Down and Up
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 link:

http://www.cool-mathematics.com/downloads/MagicEdges.zip

Functions Related to the Left and Top Edge
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 of all checks 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 if the click is from the pane or the BODY alone. If the pane was not from the left edge, the function goes on to check 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 a particular pane and click from BODY outside pane. Note that we are dealing with the same outer and inner DIV elements, whether or not 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 if the value of the edge variable is "left". If it is, it sets the leftPaneShown variable to true. Otherwise, the function checks if the value of the edge variable is "top"; if it is, it sets the topPaneShown variable to true.

Remarks
DOM does not have an edge object that response to events. That is why we resorted to mimic edges. The HR element is just perfect for the top mimic edge. If there were an equivalent HTML element for vertical line then it would have been perfect for the left mimic edge.

We had to use a DIV element for the left mimic edge and give it a particular height. When the web page is just opened, the left pane can only come out within the height of the client area. When you scroll down, the initial client area portion goes up; the left pane can only come out of the left edge of the portion that has gone up. The simplest way to handle this problem is to allow the situation and not let your web page be more than about two client areas long. In that way when you scroll down, you will still see the left pane coming out of the left edge at the top. This will not be a big deal for the user.

The 100% height given to the left edge is the client area height. When the web page is long, this distance is applicable to the top part of the web page and so the left edge does not reach the bottom of the page. What I have said here is related to what I said in the preceding paragraph.

Either of the mimic edges is 1 pixel thick. If you move the mouse pointer over the edge fast, you may not have the onmouseover response (event); that is, you will not see the pane. If you move the mouse pointer slowly, you will surely have the unmouseover response (event). One way to improve this situation is to make the mimic edge thicker (say about 3px). The trouble with this solution is that if the mimic edge is thick the notion (definition) of edge (which is supposed to be thin) will be lost. Also, when an element is wide you may have multiple unwanted unmouseover responses. I suggest you leave the thickness at 1 px.

It is theoretically possible to have a mimic edge on the right and at the bottom of the client area. However, your browser may not be able to handle the code you come up with. You would have to provide propriety code for each browser.

Movement of the pane is smooth only with Internet Explorer. With the other browsers it is discrete. Let us hope that the later versions of the browsers allow smooth movement. In the meantime, the discrete movement is not bad.

Gaming: You can also use this technique of magic edges for games. The user can use the edge to get tools that will give him some advantage in the game.

Well, we have come to the end of this series. I hope you appreciated it.