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 - Showing the Pane (Page 4 of 4 )
When you want the pane from the left edge, the display property of the outer DIV element is changed to “block.” Since the outer DIV has no border and it is transparent, you do not see it. The inner DIV element is moved within it to the right. When you no longer want it, you cause it to move within the outer DIV to the left. Then the display property of the outer DIV element is changed back to “none.”
Since the outer DIV element has a z-index of 2, while the BODY element has a z-index of 0, everything being equal, the outer DIV element is always in front of (a layer above) the other elements of the page. The outer DIV element is either displayed or not. Since the outer DIV contains the inner DIV, the inner DIV is accordingly, either displayed or not.
The same explanation applies to the pane coming down from the top.
The left-top corner of the outer DIV is always on the mimic edge. This means that the left edge of the outer DIV is on the mimic edge. In my design I have put the left mimic edge at the extreme left (left:0px) of the page. In my browser, the appearance of the left page border is not affected.
You still notice the border. Since we have given the color of the background of the BODY element to the mimic edge, if you think the appearance of the border will be affected, you can place the mimic edge slightly to the right of the border of the page. You will have to modify the code (left position of your outer DIV) to this effect.
We take a break here and continue in the next part of the series.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Mimic Edge for HTML Magic Edges
