Complete Code of Magic HTML Client Edges

Magic HTML Client Edges - Part 4

Introduction
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.

Note: If you cannot see the code or if you think anything is missing (broken link, image
absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest
problem you have about what you are reading.

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 <= -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.

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.

Chrys