Building a Web Page Calculator - Technical Interpretation of the Page
(Page 2 of 4 )
I use XHTML norms for the design. The basic XHTML page in our project is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page with Calculator</title>
</head>
<body onclick="removeCalc()">
</body>
</html>
The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY. The components of the calculator will be contained in a DIV element. There will be a button that, when clicked, causes the calculator to appear. This is the basic content of the BODY element.
<div id="Calc" onclick="calcJustClicked = true;">
</div>
<button type="button" onclick="calcJustClicked = true; showCalc()">Use Calculator</button>
The DIV element has the ID "Calc." The button has the title "Use Calculator." It has an onclick event whose meaning we shall see soon.
The value of the CSS display property of the calculator (DIV) is given an initial value of "none." Layering is used; when the calculator is to be displayed, it appears in front of every other element. So the DIV element for the calculator is given the absolute value for its CSS position property, and a z-index value of 2. The BODY element is given the absolute value for its position property, and a z-index value of zero. This is the basic code for the CSS:
<style type="text/css">
body {position:absolute; z-index:0; background-color:#ff9933}
div#Calc {position:absolute; display:none; background-color:brown; z-index:2}
</style>
When the button is clicked, the showCalc() function is called. This function changes the value of the CSS display property for the calculator (DIV) to "block;" the calculator is displayed as a result. When you click the BODY element, the removeCalc() function is called. This function changes the value of the CSS display property of the calculator (DIV) to "none;" the calculator disappears. Note that when this property is "none," the calculator (DIV) is off the screen. This is the basic JavaScript; I give further explanation below it:
<script type="text/javascript">
var calcJustClicked = false;
function showCalc()
{
document.getElementById('Calc').style.display = "block";
}
function removeCalc()
{
if (calcJustClicked == false)
{
document.getElementById('Calc').style.display = "none";
calcShown = false;
}
//reset the calcJustClicked boolean variable
calcJustClicked = false
}
</script>
The onclick attribute of the button is:
onclick = "calcJustClicked = true; showCalc()".
What is the use of the first statement "calcJustClicked = true;"? When you click the BODY element, a function is called to remove the calculator from the screen. When you click the button, another function is called to display the calculator.
Now, when you click the BODY element, only one function is called. However, when you click the button, the BODY element is indirectly clicked. So, two events are triggered. These events oppose one another. The one from the button causes the calculator to be displayed. The one from the BODY, which follows immediately, causes the calculator to be removed. When we click the button, we want only the first event to take effect.
When you click the button, the "calcJustClicked = true" statement first sets the calcJustClicked global variable to true, indicating that the button has just been clicked. When the opposing function from the BODY is immediately called, it first checks to see if calcJustClicked is true, with
if (calcJustClicked == false)
If it is true, it does not remove the calculator. However, before the opposing function completes its execution, it resets the calcJustClicked variable to false (the default value). In this way, when you next click the body element, the calculator will be removed.
Now when the calculator is displayed, you will need to be clicking buttons on it. When you click the calculator, the BODY element will also receive the click (indirectly). In order to prevent the calculator from being removed, the calculator (DIV) has the attribute
onclick="calcJustClicked = true;"
This has the same effect as for the "Use calculator" button.
Next: The Standard Calculator Controls >>
More HTML Articles
More By Chrysanthus Forcha
