Home arrow HTML arrow Completing Temporary Web Page Processing
HTML

Completing Temporary Web Page Processing


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
April 22, 2009
TABLE OF CONTENTS:
  1. · Completing Temporary Web Page Processing
  2. · Panel Layout
  3. · Elements to Use in the Table Cells
  4. · Spaces Within the Cell

print this article
SEARCH DEVARTICLES

Completing Temporary Web Page Processing
(Page 1 of 4 )

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).


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials