Completing Temporary Web Page Processing
(Page 1 of 4 )
This is the second and last part of my series on temporary web page processing. In this part of the series, I talk about the layout of the panel (Form). If the panel becomes large, with many elements, then you need to give its layout some consideration. Before I start that I will first talk about a second method of removing the Panel.
Removing the Panel – Method 2
With this method, clicking on the BODY element outside the panel should remove the Form. This is how the user sees this method. Well, we have to give the BODY element an onclick attribute. When you click the BODY, a function should be called which should remove the panel.
However, there is a problem. Whenever you click an element on a web page, the BODY element also receives a click (indirectly). This means that if the Form is displayed, and you click it to do something on it, the BODY element will also receive a click. When the BODY receives a click, the function to remove the panel will be called, and it will remove the panel.
As long as this remains true, you will never be able to do anything on the Form, because each time you click the Form, it will be removed. Also, you will not even be able to display the form, because each time you click the button (Process Info) to display the Form, the BODY will indirectly receive a click. So, as soon as the Form is displayed, the function to remove the Form will be called, and the Form will be removed.
This means that we have to do something with the onclick event of the "Process Info" button. We also have to give the Form element an onclick event and do something with it. We need to do something to prevent the problem described above. When you click any element (button, Form, etc), that element receives the click before the BODY element receives the click. We shall use this knowledge for preventing the problem.
We will use the following global variable:
var formClicked = false;
The default and initial value for this variable is false.
We know that whenever an element (Process Info button or the Form) is clicked, the click is on the element first, before it is immediately on the BODY. So the onclick event of the element (Process Info button or the Form) sets this value to true. As the onclick event of the BODY is triggered immediately after, the function to remove the panel has to first check to see if the formClicked variable is false. If it is false, it means the element (Process Info button or the Form) was not clicked, so it removes the panel. If it is true, it means the element was clicked, so the function does not remove the panel.
The onclick attribute for the Process Info button is
onclick="formClicked = true; showPanel()"
Two statements form the value of the onclick attribute. The first one sets the formClicked variable to true. This action is what we have just described. The second statement is a call to the showPanel() function. We have seen the use of this call, which is to display the Form.
The onclick attribute of the Form element is
onclick="formClicked = true;"
There is only one statement here. The statement sets the formClicked variable to true. This action is what we have just described.
The onclick attribute for the BODY element is:
onclick="removeForm()"
Whenever the BODY element receives a click directly or indirectly, this function is called. This is the function that removes the panel (Form). This is the function code:
function removeForm()
{
if (formClicked == false)
{
document.getElementById('F1').style.display = "none";
}
formClicked = false;
}
As you can see, it first checks the state of the formClicked global variable. If it is false, it removes the panel; if it is true, it does not remove the panel.
After this function has been called, the next click from the user may go directly to the BODY; that is, the user may click the BODY directly. The panel has to be removed as a result. Now, if the formClicked variable remained true, then the panel would not be removed. So before the removeForm() function ends, it sets the formClicked variable to false. It sets this variable to false whether or not it removes the panel. The value of false is the initial and default value. This allows the decision to be taken for each click.
We have finished with the second method of removing the panel (Form).
Next: Panel Layout >>
More HTML Articles
More By Chrysanthus Forcha
