Temporary Web Page Processing

In the currently-used method, after clicking the button, the part of the page below the button is shifted downward, giving room for a pane that has the requirements of the details you have to act on (sign in). This current method may vary from designer to designer, but it is effectively what I give you here.

The pane is a block level element, such as an HTML form or DIV or TABLE. We shall use an HTML form for this. For now, I will use a simple form, which has a title; two labels, each with corresponding Input Text Elements; and a Submit button. This is the code for the form.

<form action="www.somesite.comhtmlFormAction.exe" id="F1" style="width:300px; border:1px solid black; text-align:center;display:none">

<h2>A Form</h2>

<table>

<tbody>

<tr><td>Label 1</td><td><input id="I1" type="text"></td></tr>

<tr><td>Label 2</td><td><input id="I2" type="text"></td></tr>

</tbody>

</table>

<br />

<input type="submit" value="Submit"><br /><br />

</form>

The form elements are in an HTML table. This form code should be added just below the button element in the previous code. The ID attribute for the Form is ‘id="F1"’. Note that the form has a style attribute. Also note that the value of the display property in the style attribute is "none."

When you have this value of "none," the form cannot be seen on the page, and it does not occupy space. So if you add the form code to the previous code as I said, you will not see the form if you open the resulting web page. If the value is changed to "block," it will occupy space and shift everything that was in the space it has just occupied, downward.

Current method of showing the pane

We are still dealing with the current method. In other to show the pane, the button needs to respond to an onclick event. This is why the button has the following onclick attribute:

onclick="showPanel()"

When the button is clicked, the showPanel() function is called. The showPanel() function is a JavaScript function that the designer writes. This is the one I wrote:

function showPanel()

{

document.getElementById('F1').style.display = "block";

}

There is only one statement inside. This statement sets the value of the form’s display property to "block." When the value becomes "block," the form occupies space and shifts everything that was in the space it has just occupied downward.

When you do not want the pane, you need a mechanism (maybe a button to click and a function) to change the value of the form’s display property back to "none." If this is done, you will no longer see the form, and all the elements that were below the form will rise up to their original positions. To save time, I will not explain how the current method manages this.

This section and the previous one show how the current method works.