Mimic Edge for HTML Magic Edges

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:

<div id="DL" onmouseover="doShiftRight()" style="width:1px; height:50px; background-color:#ff9933; border-width:0px; padding:0px; margin:0px; display:inline">

</div>

It has a width of 1px. It has an initial height of 50px. The actual height will be given by a function from the BODY onload event. It is advisable to give the initial height or initial width in the attribute of the element, rather than in a CSS statement in style sheet. The background color is that of the BODY element.

There is an onmouseover attribute. When the mouse is over the mimic edge, the  doShiftRight() function will be called. The value of the display property is "inline." This allows other elements to go on its right. The doShiftRight() function 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.

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 elements next to the mimic edge. Remember that a DIV element has an inherent <br /> element before and after it. So the outer DIV element has to take an "inline" value for its display property. Add the following property to the CSS statement for the outer DIV element.

display:inline

Make sure the properties in any CSS statement are separated by semicolons. There is still a problem with our basic work. The "inline" value for the mimic edge implies that every space on its right is taken up by one line. So the DIV (calculator) will appear low on the line and therefore at the bottom of our present page. In order to make it appear higher up, we have to give it the CSS property “vertical-align:top.” Add the following property to the CSS statement for the outer DIV element. Make sure all properties are separated by semicolons:

vertical-align:top

The onload event for the BODY attribute is:

onload="giveHeight()"

When the web page is loaded, the following function is called:

function giveHeight()

{

document.getElementById('DL').style.height = screen.availHeight;

}

This function gives the screen height to the mimic edge.

Let us take a break here. In the next part of the series we shall continue with the shifting function.