In this part of the series, we effectively carry out a project. The project deals with a web page. The aim of the project is to allow visitors to move their mouse pointer to the edge of the web page to cause a pane with a calculator or some other useful tool to scroll into the page. The visitor can do whatever they want with the tool. Then, when they click on the BODY of the page, outside the pane, the pane scrolls back into the edge. The detailed requirements of the project are in the previous part of the series.
Working the Pane for HTML Magic Edges - The Mimic Edges (Page 2 of 4 )
The BODY element is given a margin (all four) of 0px. It is given a padding of 0px. These values are browser dependent. To avoid complexity in layout I have given them zero pixels. The default border value for the BODY is allowed. That is also browser dependent, but for the sake of simplicity, let us allow it.
The left mimic edge is a DIV element, while the top mimic edge is an HR (horizontal rule) element. The HR element has the advantage that it fills the whole width of the screen. You do not have to give it a length value (which is the width of the client area). If you use the DIV element, you will be faced with the problem (disadvantage) of having to give it a dimension so that it covers the width of the client area; this is not easy. Remember the problem we had trying to give the left mimic edge the height of the page. A similar problem will occur if we use the DIV element for the top mimic edge. These are the elements for the two mimic edges:
The attribute values are many for either element. We shall briefly explain them. The ID of the left mimic edge (DIV) is "DL." When the mouse is over this element, the doShiftRight() function is called. This function prepares the page to start shifting the inner DIV to the right. The style attribute for this element has many properties.
The first one is the position property whose value is "absolute." The second one is the z-index property, whose value is 2. Remember that the BODY element has a value for the z-index property of 0. Under this condition, the left mimic edge appears in front of its surrounding elements, everything being equal.
What we have next in the style attribute is “left:0px; top:0px;” With the left and top values being zero, the mimic edge is at the left edge of the client area of the page. Next we have a width of 1px. After that we have a height of 50px. This is like a pre-initial value. The function for the onload event of the BODY element gives this property its real value (see below). Next we have a background-color, which is the same as the background-color of the BODY element. The border-width is zero, padding is zero and the margin is zero. These zero values ensure that the width of the mimic edge is just 1px and nothing more.
The HR element by default appears horizontally. If you try to make it vertical, by giving it a large height and small width, it will not work. This is the ideal element for the top mimic edge. By default it covers the whole width of the client area, just as we want. When the mouse is over it, a function called doShiftDown() is called. This function shifts the inner DIV downward. The purposes for the rest of the values of the HR element are similar to those of the left mimic edge.
HTML 
Mimic Edge for HTML Magic Edges
