Temporary Web Page Processing

Temporary Web Page Processing - Showing the panel in front of other elements
(Page 4 of 4 )

From here to the end of the series, I show you my method. In my method, a window panel will appear in front of the elements that are shifted downward in the current method.

With my method, the attributes of the form element remain as they are. You add the following two properties to the style attribute of the form element:

position:absolute; z-index:2

You need to add a semi-colon after ‘z-index:2’, if this property is not the last in the style attribute. There is now the position and z-index properties; I will explain why shortly. The value of the position property is "absolute." The value of the z-index property is 2.

Now when an element has the position property with the absolute value, and you do not give the element the CSS left and top properties, the element remains where you place it in the normal flow. If you give this element a z-index value greater than those of its surrounding elements, the element appears in front of the surrounding elements.

In addition to this, know that our form has a value of "none" for its display property. If we change this value to "block," the form appears in front of its surrounding elements; if we change the value back to "none," the form disappears. While the form is displayed or off, the values of its position and z-index properties remain the same. You can assume that the value for the z-index property of the HTML BODY element is zero, while that of the elements on the BODY according to normal flow is 1. So giving our form a z-index value of 2 is okay.

Background of the form

If you do what I have said in this section, you will see the form in front of its surrounding elements. The problem is that you will also see the elements behind the form. The reason is that the background of the HTML form element is transparent by default. To solve this problem, just give the background of the form a suitable background color. I give the background the DodgerBlue color. Add the following property to the style tribute of the form:

background-color:DodgerBlue

You need to add a semi-colon after DodgerBlue, if this property is not the last in the style attribute. If you try the code now, you will see a form with a DodgerBlue background color. It is no longer transparent.

Removing the panel

From the last section above, we know how to display the panel in front of other elements. In this section we shall look at two ways of removing the panel. Note: our panel object is an HTML form element.

Removing the panel – method 1

One of the ways to remove the panel is to have a button on the form; when the user clicks the button, the form is removed as a result. We shall have this button at the top-right corner of the form.

The button is the first element of the form. The content of the button is just "X," so that it looks like the Close button found at the top-right corner of document windows. In order to have the button at the extreme right corner, we shall give the button the following CSS property:

float:right

This is the button tag, and a line break element next to it:

<button type="button" onclick="closePanel()" style="float:right">X</button><br />

When an element has the float property, this implies that other elements can appear by its side. It is good for this button to be the only one on the first line of the form. In order to achieve this, I put the <br /> just after the button’s tag.

When the button is clicked, the following function is called:

function closePanel()

{

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

}

This function has only one statement. The statement sets the value of the display property of the form to "none." It uses the ID of the form to do this. Setting the value to "none," removes the form.

Let us take a break at this point and continue in the next part of the series.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus