Scrolling Functions for HTML Magic Edges

After going through the basics, we are now in a 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, which are:

• When the mouse pointer reaches an edge, the pane should scroll by itself into the page, from the point where the mouse pointer met the edge. The scrolling should stop as soon as the end of the pane is at the 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 DOM does not give us a straightforward way to achieve this. You can struggle to achieve this from a theoretical perspective, but either no browser today will be able to handle your code or they will handle it under stringent conditions.

• Each mimic edge will respond to an unmouseover event, which will cause the pane to scroll into the page.

• The middle of the pane coming out of the left edge is at approximately the same level as the point where the mouse pointer met the left edge.

• The center of the pane coming out of the top edge is at approximately the same vertical line as the point where the mouse pointer met the top edge.

• While the pane is scrolling into the page, no other occurrence of the page 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 occurrence of the pane can scroll in.

• While the pane is scrolling away, it cannot be brought into the page.

The following requirement relates to both sets of user requirements.

• Only one pane from either of the mimic edges can be seen at any one time.

• Only one object, e.g. calculator, monthly calendar or message box, can be in the pane. 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 from the user requirements and the basic principles, we can do our project with confidence. We have covered all of what enables us to do the project as experts. Bear in mind that I have written the basics and I will write the project based on the DOM, JavaScript and HTML specifications.

As I said, the code works with Internet Explorer. It does not work with Netscape or Mozilla Firefox. I do not know if it works with some other browser. Remember that Internet Explorer is one of the most (if not the most) used browsers.

The next two parts of the series are dedicated to the project. The last part will also have some concluding remarks.