Scrolling Functions for HTML Magic Edges

The pane is removed when the user clicks on the BODY element. The pane should not be removed when the user clicks on the Pane (calculator). When you click on the pane, both the pane and the BODY element will receive the onclick event. The onclick event from the pane is called first. This means that when you click the pane, it will disappear because of the second and indirect click on the BODY. So there is a problem. We have to differentiate between clicking the BODY element alone and clicking the pane.

The onclick attribute of the pane (outer DIV) is as follows:

onclick="leftPaneShown = true"

So when the pane is clicked, the leftPaneShown variable is set to true. This is a global variable in the script. There is a function that removes the pane. When you click the BODY element alone, the function is called. When you click the pane, the function is called only after the above declaration for the onclick attribute of the pane (DIV) has been set. This is the function:

function removePane()

{

if (leftPaneShown == false)

{

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

x = parseInt(x);

TL = self.setInterval("shiftLeft()",10);

}

//reset the leftPaneShown boolean variable

leftPaneShown = false;

}

The default value for the leftPaneShown variable above is false. The function first checks to see if the variable is false. If it is false, it means only the BODY element was clicked; it goes on to remove the pane. If it is true, it means the pane was clicked. The pane received the click before the BODY. So the pane set the variable to true. When it is true, the if-statement does not remove the pane.

The value of the variable is only true when the pane is clicked. It should always be false. So the last line of the function sets the value to false, whether it was true or not. If it was true, the required action (to ignore the removal) has already taken place, as the function was called.

If the variable is false, the pane has to be removed. The first statement in the if-statement assigns the CSS left position value to the x variable. The next statement makes sure it is an integer. The third statement calls a shiftLeft() function after every 10ms through the setInterval() function.

Note: in this series, you can consider either the inner or outer DIV element to be the pane. The inner DIV fits into the outer DIV. Anything that happens to the outer DIV affects the inner DIV.

The shiftLeft() Function

This function sends the inner DIV back to its start position where the CSS left value was ‘–205px’. This is the function:

function shiftLeft()

{

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

//stop scrolling left

if (x <= -205)

{

self.clearInterval(TL);

}

x-=3;

}

The operation is similar to the shiftRight() function above, but it does the reverse. The function should be self-explanatory.

And that is it for the basics. Now that we have covered the basics, it will not be difficult for us to do the project.