A Project of Magic HTML Client Edges

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 that when you move your mouse pointer to the edge of the web page, a pane with a calculator or some other useful tool should scroll into the page; you can do whatever you want to do with the tool; when you click on the BODY of the page, outside the pane, the pane scrolls back into the edge. The fundamentals for the project are in the previous parts of the series.

I have done a lot of detail explanation in the previous parts of the series. Explanations in this and the next part of the series will be summarized where possible.

The tool for the pane in our project is a calculator. The details of the calculator will not be given. In the next part of the series, we shall look at the complete code of the project.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

The Project
After going through the basics we are now in the position to come up with the technical requirements. We now know what is possible and what is not possible so far as the DOM JavaScript and HTML are concerned. Before we look at the technical requirements let us look again at the user requirements again:

- When the mouse pointer reaches an edge, the pane should scroll by itself into the page. The scrolling should stop as soon as the end of the pane is at the edge. Due to the limitations of HTML DOM features, and incompatibility between browsers, we shall have only the left magic edge and top magic edge.
- When the user clicks on the BODY element outside the pane, the pane should scroll back into the edge.

Technical Requirements
The following requirements are related to the first user requirement above:
- There will be a mimic edge on the left of the client area. This mimic edge will be a DIV element.
- There will be a mimic edge at the top of the client area. This mimic edge will be an HR element; I will explain why later.
- There will be no mimic edge on the right or at the bottom of the client area. This is because of the limitations mentioned above.
- Each mimic edge will respond to an unmouseover event, which will cause the pane to scroll into the page.
- Because of the limitations mentioned above, the pane will scroll 25% client line distant from the top-left corner of the client area.
- While the pane is scrolling into the page, no other instance of the pane can be scrolled into the page.
- While the pane is scrolling into the page, it cannot be sent back until it has settled.

The following requirements relate to the second user requirement above:
- When you click the BODY element outside the pane, the pane should scroll back. When you click the pane, it should not scroll back.
- While the pane is scrolling away, no other instance of the pane can scroll in.
- While the pane is scrolling away, it cannot be brought back into the page until it is completely settled.

The following requirement relates to both user requirements.
- Only one pane from either of the mimic edges can be seen at any one time.
- Only one object e.g. calculator, or monthly calendar or message box can be in the panes. In your own project, you can decide to have one object come out of the left edge and another object come out of the top page.

With these technical requirements, which stem out from the user requirements, we can carry out our project with confidence. We have covered all what enables us to do the project as experts.

Components on the Web Page
This is a pedagogic exercise so we shall deal only with the minimum number of components (HTML elements) necessary.

The Pane
The pane is a DIV element having another DIV element that just fits into it. This is the calculator inside the outer DIV element:

789