Mimic Edge for HTML Magic Edges - Scrolling from the web page edge
(Page 2 of 4 )
We are still covering the basics. The edge of the web page is not a DOM object, whose events we can exploit to make the inner DIV element appear to come out of it. We have to mimic this.
We shall use an HTML element that has events. The element I have chosen for the left edge is the DIV element. We shall make the width of this DIV element one pixel. For now, we shall put the element next to the real edge of the page. The length of the element should be as long as the actual edge of the client area of the web page. We shall align one edge of the outer DIV element above with this one pixel-width element.
We shall write our script such that, when the mouse pointer goes over the one pixel-width element, the inner DIV element will come out of the aligned edge of the outer DIV element. This way the inner DIV element will appear to come out of the edge of the web page. This means we shall remove the border of the outer DIV element. In fact, we shall give it a zero width border.
Our one pixel HTML element is the mimic edge. Our mimic left edge will be a DIV element with zero padding, zero border and zero margin. Note that the padding, border and margin make an element effectively larger in size.
For the mimic edge to be at the web page edge, the BODY element should have zero padding and zero margin. We cannot give it zero border. If we do, the demarcation of the BODY edge will not be shown. HTML elements use the border to identify their edges. So the CSS statement for the BODY element should now be:
body {background-color:#ff9933;padding:0px; margin:0px}
Background Color of the Mimic Edge
The color (background) of the mimic edge has to be the background color of the BODY element. In this way the user will not notice it. However, if the background of your BODY element is an image, then the problem becomes rather difficult. Under this condition, there is a way of giving it a color (background), which will make it less noticeable or not noticeable at all.
Here is a metaphor to explain how. When I was at college, I put on a shirt and a pair of trousers. I asked my sister if that combination matched. She said “yes.” Before then I always decided if my shirt matched my trousers by looking at myself in the mirror. She gave me the following rule to always know if my shirt and trousers match: she said if the color of the trousers is found in the shirt, then the shirt and trousers match. The rule is correct.
As the scientific people that we are, let us give some more precision to the rule. Trousers usually have one color for the entire pair. Many shirts have several colors. Now you know the condition under which she gave me the rule. This rule can be used in a similar way with the web page.
On the web page you have several colors, and in some cases many. We want a color (background) for the mimic edge that will match (look okay to the eye) the rest of the web page. If we choose a color that is on the web page for our mimic edge, we would therefore have a match between the web page and the mimic edge.
This is my extension to the rule: when in doubt as to which color to choose, choose the color that appears the most (greatest percentage of occurrence) on the web page. In this way, matching will surely occur. Our real aim is that the mimic edge should be less noticeable or not noticed at all. So when matching occurs, the mimic edge is seen as an integral part of the page.
Next: Basic Implementation of Magic Edge >>
More HTML Articles
More By Chrysanthus Forcha
