Magic HTML Client Edges

Introduction
Imagine that you are reading a web page; you feel the need to use a calculator; you move your mouse pointer to the edge of the web page and a calculator appears from the edge. Imagine that you are reading a web page; you feel the need to put info in the message box (small form); you move your mouse pointer to the edge of the page and the message box appears. I like this scenario.

There is a possibility that you may be reading a web page; you move your mouse pointer to an edge of the window, and a windowpane of interest, appears from the edge. Let us complete this scenario by saying that when you click outside the pane on the BODY element, the pane will go back into the edge.

I wrote a similar article series for www.devarticles.com titled, HTML Magic Edges. This article series and its corresponding code is an improved version of what I wrote before. The previous code works only with Internet Explorer. The code here, works with Mozilla Firefox 2, Netscape 8, Opera 9 as well as Internet Explorer 6. The code should work with all the higher versions of these browsers. However, the movement of the object from the edge into the page and back is optionally gentle (slow), only for Internet Explorer. May be the higher versions of the other browsers would produce gentle movement. You can consider this article series and its corresponding code as the second version of what I wrote before.

You need basic knowledge in HTML, JavaScript and CSS to understand this series.

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.

User Requirements
- 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.
- When the user clicks on the BODY element outside the pane, the pane should scroll back into the edge.

The Basics
I use XHTML norms for the design. The basic XHTML page in our project is:

456XRM

123-M+

0+/-.+=

There are two DIV elements. The outer one has the ID, 'Cont' meaning container. The inner one has the ID Calc, meaning calculator. You can see the components of the inner one. The components are made up of an Input Text Control and buttons. There are line break elements that keep the components into rows. These two DIV elements have to be in the BODY element of your web page. The style sheet is normally in the HEAD element of your page.

Operation
The inner DIV element is made to move relative to the outer DIV element. The inner DIV element is given the value, 'relative' for its position property. Its position is relative to the outer DIV element. To make it move we change this relative position continuously. That is, we change the left or top CSS value continuously. As I said above gentle (slow) movement occurs only with Internet Explorer. With the other browsers, the change of position is discrete. May be with higher versions of these browsers the change would be gentle (slow).

The background-color of the outer DIV element is transparent. This means you can see through it. In other words through it you see the body element. This outer DIV element is given fixed dimensions (fixed width and height). Most importantly it is given the value, hidden for its overflow property. When any containing element is given the value, hidden for its overflow property, for any internal element that overlaps the edges of the containing element, the overlapped portion is not seen by the user (it is cut off).

Under this condition, if you now make the inner DIV element to move, it will appear as if the inner DIV element is coming from an edge of the containing element and/or entering an edge of the containing element. So, if you want an element to come out of the edge of the web page, have two elements as described above. Align an edge of the outer element to the edge of the web page. Do not give the outer element (DIV) a border. Make the inner element to move from the edge of the outer element that is aligned to the edge of the web page. The inner element will appear to come out of the edge of the web page. To make the inner element appear to enter the edge, just do the reverse.

We shall use the two DIV elements above with their contents for illustration in this part of the series. We shall still use the same elements with some modification, in the rest of the series.

The Style Sheet
Let us talk about the style sheet for the two DIV elements. The inner DIV element has the ID, 'Calc'. The value for its position property is relative. Its width is 205px and its height is 196px. Its background-color is brown. It is given a border of 2px. For simplicity, it is given a padding value of 0px and margin value of 0px.

The outer DIV element has the ID of 'Cont'. It has a width of 200px; this is 4px greater than that of the inner DIV element. It has a height of 209px; this is 4px greater than that of the inner DIV element. With this 4px increase, the inner DIV element should just fit into the outer DIV element. The value of the overflow property of the outer DIV element is hidden (very important). Its background color is transparent. Its border is 2px and blue. For simplicity, it is given a padding value of 0px and a margin value of 0px.

Other elements on the page have CSS statements but are not vital to the understanding of this article (series).

Scrolling From Left
If you want the inner DIV element to scroll from the left, you have to give its initial CSS left value, a negative value whose magnitude is equal to the width of the inner DIV element. In this way the inner DIV element will be hidden completely on the left side of the edge. At this point you should not be seeing the right edge of the inner DIV element. What I have said here is also applicable when scrolling from the top.

Note this: this initial CSS left value should be coded in the attribute of the inner DIV element and not in the style sheet. If you put it in the style sheet, the script you write may not work.

We are still with the basics. We shall write a simple script, which will make the inner DIV element scroll from the left edge of the outer DIV element, into it. Add the following script below, to the code of the DIV elements above, but inside the BODY element:

var x = document.getElementById('Calc').style.left;
x = parseInt(x);

var TL = self.setInterval("shiftRight()",10);

function shiftRight()
{
document.getElementById('Calc').style.left = x;
if (x >= 0)
{
self.clearInterval(TL);
//adjust position
document.getElementById('Calc').style.left = "0px"
}
x+=3;
}

As soon as you open the page, you will see the calculator scrolling from the left to fill in the outer DIV element. Here, I have given the outer DIV element a border, so that you can identify it. In the project, there will be no border. We are still talking about the basics; we have not yet started the project. It is these basics that we shall use to develop the project.

The first line reads the CSS left value into the local variable, x. For our case here, this value is -205px. The next line removes the unit, px, rendering it as an integer. The inner DIV element is shifted by discrete distances (equal). If the interval of shift is at most 40ms, the user will not notice the discrete movement. He will see the movement as continuous. I chose a rate of 10ms. So the next line calls the shifting function every 10ms. It uses the setInterval() function which is a method of the DOM window object. In the line, self, is the reference to the current window. The method takes two parameters: the first one is the function that is called after each interval specified in the second parameter in milliseconds. The method returns an ID, which is assign to the variable, TL.

Next, we have the function that shifts the inner DIV element by a particular distance. This function is called, shiftRight(). It is called over and over by the setInterval() method. This function has to shift the inner DIV element to the right beginning from its initial left value. The first line in the function simply asserts the inner DIV element its initial left value.

The next statement in the function is an if-statement. After shifting the inner DIV element to its final position where it just fits into the outer DIV element, we have to stop the shifting. At this position, the left value of the inner DIV element should be zero. So the if-statement tests if the left value (now variable, x) is greater than or equal to zero. If it is, then the first line in the if-statement stops the shifting by clearing the interval process. It does so with the clearInterval() function which is a method of the DOM window object. The parameter of the method is the ID returned by the setInterval() method. So this returned value is used to stop the re-calling of the function from the setInterval() method.

Following our code, it is possible that the inner DIV element will stop at a left value that is slightly higher than zero. If this is the case, we have to take it back to the zero position. The second statement inside the if-block does this.

You might have been wondering how the distance of the inner DIV element really increases (changes). The last line in the shiftRight() does this. It increases the left value (x) by 3px. Each time the function is called this value is increased by 3px. The first line of the function gives the inner DIV element, the incremented left value, the next time the funtion is called.

Scrolling From Top
In this section we see how the inner DIV element can be made to scroll from the top downward. Here, instead of changing the CSS left value, we shall be changing the CSS top value. The height of the inner DIV element is 196px. So the initial top value of the inner DIV element is -196px. This value should be written as a CSS attribute to the inner DIV element and not in the style sheet. I gave the reason above. The default left value is zero pixels. So you can omit the left attribute (style). With these factors, the inner DIV element will start scrolling from the top. This is the script to do that:

var y = document.getElementById('Calc').style.top;
y = parseInt(y);

var TT = self.setInterval("shiftDown()",10);

function shiftDown()
{
document.getElementById('Calc').style.top = y;
if (y >= 0)
{
self.clearInterval(TT);
//adjust position
document.getElementById('Calc').style.top = "0px"
}
y+=3;
}

Replace the former script with this one. Put the script below the DIV elements. The operation of this and the former scripts are the same. However, the variables and the "left" attribute value have changed. Instead of x, for horizontal distance, we have y. The choice of y is just to make things consistent with the Cartesian coordinate system, where, horizontal distance is identified by the variable, x and vertical distance is identified by the variable, y.

The ID returned by the setInterval() function is now TT instead of TL. The shiftRight() function is now shiftDown(). The CSS left attribute for the inner DIV object is now 'top' instead of 'left'. Everything else stays the same. The script is then self-explanatory.

Scrolling from the web page edge
We are still with 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; in practice, this may be difficult. 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 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.

This is the way: When I was in the University, I put on a shirt and a pair of trousers. I asked my sister if that combination matched (if it was OK to the eye). She said, "yes". Before then I always judged if my shirt matched with my trousers by looking at myself at the mirror. She gave me the following rule to always know if my shirt and trousers match: She said if the color of the trouser is found in the shirt then the shirt and trouser match. The rule is correct.

As science people that you and me are, let us give some more precision to the rule. Trousers usually have one color for the entire pair of trousers. 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 (OK 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 matching between the web page and the mimic edge. This is my extension to the rule: when in doubts as to which color to chose, chose the color that appears 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 noticed or not noticed at all. So when matching occurs the mimic edge is seen as an integral part of the page and so not pronounced and less noticeable.

We take a break here and continue in the next part of the series.