Welcome to the fifth part of a five-part series that shows you how to make HTML magic edges. These edges allow you to slide useful applications out of the sides of your web pages when a visitor slides his or her mouse over the edges. In this part of the series I explain the code for the project. We also conclude with some useful comments. Toward the end of this part, I give you a link to the complete code of the project in zip file format.
Completing the HTML Magic Edges Project - Remarks (Page 5 of 5 )
DOM does not have an edge object that response to events. That is why we resorted to mimic edges. The HR element is just perfect for the top mimic edge. If there were an equivalent HTML element for a vertical line, then it would have been perfect for the left mimic edge.
We had to use a DIV element for the left mimic edge and give it a particular height. When the web page is just opened, the left pane can only come out within the height of the client area. When you scroll down, the initial client area portion goes up; the left pane can only come out of the left edge of the portion that has gone up. The simplest way to handle this problem is to allow the situation and not let your web page be more than about two client areas long. In that way, when you scroll down, you will still see the left pane coming out of the left edge at the top. This will not be a big deal for the user.
Either of the mimic edges is 1 pixel thick. If you move the mouse pointer over the edge fast, you may not have the onmouseover response (event); that is, you will not see the pane. If you move the mouse pointer slowly, you will surely have the onmouseover response (event).
One way to improve this situation is to make the mimic edge thicker (say about 3px). The trouble with this solution is that if the mimic edge is thick, the notion (definition) of edge (which is supposed to be thin) will be lost. Also, when an element is wide, you may have multiple unwanted onmouseover responses. I suggest you leave the thickness at 1 px and tell the user to move his mouse pointer slowly (and over the edge).
It is theoretically possible to have a mimic edge on the right and at the bottom of the client area. However, your browser may never, at least in the near future, be able to handle the code you come up with.
You can also use this technique of magic edges for games. The user can use the edge to get tools that will give him some advantage in the game.
Well, we have come to the end of this series. I hope you appreciated it.
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 
Scrolling Functions for HTML Magic Edges
