Implementation of Magic HTML Client Edges

Introduction
This is the second part of my series, Magic HTML Client Edges. Here, we see how to implement the Magic HTML Client Edges. In this part, we shall consider the case, where the calculator (inner DIV element) comes out of the left edge of the page and goes back when required.

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

Nature of the mimic Left Edge
We need to put a mimic edge just next to the left edge. Our mimic edge is a DIV element. So we create a DIV element whose height is that of the height of the client area of the screen. The width is 1px. The element is given zero padding, zero border and zero margin. It is also given a CSS z-index value of 2. In this way, it appears in front of the BODY, which has a lower z-index value. It is given an onmouseover event, which triggers the scrolling of the inner DIV element.

Height of the edges
The height of the DIV element for the left edge is given the CSS value of 100%. In this way, the left edge takes the height of the client area.

Scrolling from the Left Edge
The BODY element has zero padding and zero margin. The corresponding CSS statement for this is:

body {background-color:#ff9933;padding:0px; margin:0px}

The mimic edge element is:

The background color is that of the BODY element. There is an onmouseover attribute. When the mouse is over the mimic edge the function, doShiftRight() will be called. The functions we shall see from now henceforth are modified versions of what we saw in the previous part of the series. doShiftRight() is one of them; we shall see the details later. The function, doShiftRight() will shift the inner DIV element to the right. The script will no longer be in the BODY element, it will be in the HEAD element. You can erase all the script you have in the BODY element in the previous chapter.

The outer DIV element should not have a border. Erase the following property from the CSS statement of the outer DIV element.

border:2px solid blue;

Replace what you have erased with:

border-width:0px;

The two DIV elements (inner and outer) are the next elements to the mimic edge (1px DIV).

Make sure the properties in any CSS statement are separated by semicolons.

Basic Function for Scrolling from the Left
When the mouse pointer goes over the left edge, the function, doShiftRight() is called. The function has two associated variables. This is the function with the variables:

var x; //x coordinate
var TR; //return value for setInterval() function - moving right

function doShiftRight()
{
x = document.getElementById('Calc').style.left;
x = parseInt(x);

TR = self.setInterval("shiftRight()",10);
}

The pixel is the smallest recognizable component on the web page. The web page is filled with pixels arranged in rows and columns. The entire image you see on the screen is as a result of the pixels having different colors. The variable, x above is for a column of pixels within the outer DIV element. Remember that the inner DIV element just fits into the outer DIV element. So this variable is actually used to change the horizontal position of the inner DIV. The next variable, TR is for the return ID for the setInterval() method inside the function above.

The first line in the function, copies CSS left position value of the inner DIV element to the variable, x. This left value at the start is -205px. The next line makes sure it is an integer. The third line calls a function called, shiftRight() through the DOM's setInterval() function every 10ms.

The shiftRight() Function
This function shifts the inner DIV to the right and stops when the CSS left position is greater than or equal to zero. This is the function:

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";
}

x+=3;
}

We have to start shifting from the present left position of the inner DIV element, which is -205px. So the first statement gives the position of x (which at the start is -205) to the CSS left attribute of the inner DIV. The last statement in the function increments this value by 3, so that the next time the first statement (the funtion) is called, the position of the inner DIV will move to the right by 3px. After the first statement, you have an if-statement. The if-statement tests if the left position (represented by x) is greater than or equal to zero. If it is, it stops the shifting by calling the DOM's clearInterval(TR) method. It uses the return ID of the setInterval() method to achieve this.

The position of x = 0 is where the inner DIV just fits into the outer DIV and can be seen by the user. Based on the shifting algorithm (adding 3px) it is possible that when the shifting stops the x position would not be zero. The second line in the if-statement corrects this.

In the next part of the series, we shall begin the project and put all these functions together.

Removing the Pane
The pane is removed, when the user clicks on the BODY element. The pane should not be removed, when the user clicks on the Pane (calculator). When you click on the pane, both the pane and the BODY element will receive the onclick event. The onclick event from the pane is triggered first and that of the BODY is triggered second. This means that when you click the pane, it will disappear because of the second and indirect click on the BODY. So there is a problem. We have to differentiate between clicking the BODY element alone and clicking the pane (and the BODY in one sequence).

The onclick attribute of the pane (outer DIV) is as follows:

onclick="leftPaneShown = true"

So when the pane is clicked, the leftPaneShown variable is set to true. This is a global variable in the script. There is a function that removes the pane. When you click the BODY element alone, the function is called. When you click the pane, the function is called only after the above declaration (variable) for the onclick attribute of the pane (DIV) has been set. This is the function:

function removePane()
{
if (leftPaneShown == false)
{
x = document.getElementById('Calc').style.left;
x = parseInt(x);

TL = self.setInterval("shiftLeft()",10);
}

//reset the leftPaneShown boolean variable
leftPaneShown = false;
}

The default value for the leftPaneShown variable above is false. The function first of all checks if the variable is false. If it is false it means only the BODY element was clicked; it goes on to remove the pane. If it is true it mean the pane was clicked. The pane received the click first before the BODY. So the pane set the variable to true. When it is true, the if-statement in this function does not remove the pane.

The value of the variable is only true when the pane is clicked. It should always be false. So the last line of the function sets the value to false, whether it was true or not. If it was true the required action (to ignore the removal) has already taken place, as the function was called.

If the variable is false, the pane has to be removed. The first statement in the if-statement, assigns the CSS left current position value to the variable, x. The next statement makes sure it is an integer. The third statement calls a shiftLeft() function after every 10ms through the setInterval() function. Explanation of the shiftLeft() function is given below.

Note: In this series, you can consider either the inner or outer DIV element as the pane. The inner DIV fits into the outer DIV. Anything that happens to the outer DIV affects the inner DIV. For example, if you set the display property of the outer DIV element to none, meaning the outer DIV element will not be displayed, the inner DIV element will automatically not be displayed.

The shiftLeft() Function
This function sends the inner DIV back to its start position where the CSS left value was '-205px'. This is the function:

function shiftLeft()
{
document.getElementById('Calc').style.left = x;

//stop scrolling left
if (x {
self.clearInterval(TL);
}

x-=3;
}

The operation is similar to the shiftRight() function above, but it does the reverse. The function should be self-explanatory.

Yeah, we have seen the fundamentals. Now that we have covered the fundamentals, it will not be difficult for us to do the project.

Let us take a break here. We continue in the next part of the series with the project.