These projects are retired. The development has stopped and we don't provide support for them anymore.

Nested layers

A nested layer is defined inside another layer instead of having the window pane as its container. The layer that contains this nested layer is called the parent layer. A nested layer's position and dimension will be relative to the available area of that parent layer.

This example contains two layers, the first layer is the parent of the second one. It has the same height as the window pane and is 80% as wide and horizontally centered inside it.

The second, and thus nested, layer has the same width as it's parent layer and is 60% as high and vertically centered inside it.

The background colors of both layers are clearly different to make their distinction very apparent.

Source and example output

Example 2-3. Nested layers example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Nested layers example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"80%","100%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);

layer2 = new RelativeLayer(
"layer2Div", "", "",
"100%","60%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#ff6666");
layer2.setVisible(true);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
This is the parent layer.<BR>

    <DIV ID="layer2Div">
    This is the child layer.<BR>
    </DIV>
    
</DIV>

</BODY>

</HTML>

Remarks

Nested layers are handled transparently by RelativeLayers. The only distinction from non-nested layers, is that the DIV tag of a nested layer is defined inside the DIV tag of its parent.

Creating the RelativeLayers

Table 2-4. Nested layers example : explanation of the parent layer creation

new RelativeLayer
(
   
    "layer1Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

    "80%", "100%",
    LEFT, "50%",
    TOP, "50%",
    "0", "0",
    =>    

Definition of the position and size of the visible area (see figure Figure 2-6). The layer is 80% as wide as the window and fits the window height perfectly (100%). The positioning offsets are defined relative to the LEFT and TOP borders of the window. The positioning handle remains in the center of the visible area. The positioning offsets are respectively 50% of the window's width and height. This results in a visible area that is perfectly centered in the window pane.

    "100%", "100%",
    LEFT, "50%",
    TOP, "50%",
    "0", "0",
    =>    

The available area matches the visible area perfectly.

    "#dddddd"
    =>    

Light gray background color and no background image.

);
   

Figure 2-6. Nested layers example : definition of the position and size of the visible area of the parent layer.

Table 2-5. Nested layers example : explanation of the nested layer creation

new RelativeLayer
(
   
    "layer2Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

    "100%", "60%",
    LEFT, "50%",
    TOP, "50%",
    "0", "0",
    =>    

Definition of the position and size of the visible area (see figure Figure 2-7). The layer has the same width as its parent layer's available area (100%) and is 60% as high. The positioning offsets are defined relative to the LEFT and TOP borders of the parent layer's available area. The positioning handle remains in the center of the visible area. The positioning offsets are respectively 50% of the parent layer's available area width and height. This results in a visible area that is perfectly centered in the parent layer's available area.

    "100%", "100%",
    LEFT, "50%",
    TOP, "50%",
    "0", "0",
    =>    

The available area matches the visible area perfectly.

    "#ff6666"
    =>    

Light red background color and no background image.

);
   

Figure 2-7. Nested layers example : definition of the position and size of the visible area of the nested layer.