Implementation of Magic HTML Client Edges

Magic HTML Client Edges - Part 2

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, image
absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest
problem you have about what you are reading.

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;