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

Using the available area

This example introduces the use of the available area and an easy way to scroll to the hidden parts of the layer's content.

The visible part of the layer is a rectangle that is 30% as wide and half as high as the window, in which it is completely centered. The available area is twice as wide as the visible area, but its height is calculated automatically. This makes the contained text perfectly fit inside.

On the top of the page, a layer contains links that allow you to scroll the available area of the first layer to any position. This navigation layer is always as wide as the browser window and determines its height according to the height of its contents.

Source and example output

Example 2-2. Available area example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Available area 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", "", "",
"100%","AUTO",LEFT,"0",TOP,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd", "");
layer1.setVisible(true);

layer2 = new RelativeLayer(
"layer2Div", "", "",
"30%","50%",LEFT,"50%",TOP,"50%","0","0",
"200%","AUTO",LEFT,"50%",TOP,"0","0","-50%",
"#dddddd", "");
layer2.setVisible(true);

var htmltext = "top top top top top top top top top top<BR><BR>";
for(var i = 0; i < 7; i++)
{
    for(var j = 0; j < 5; j++)
    {
        htmltext += "This is just a bit of text to fill up space.";
    }
    htmltext += "<BR><BR>";
}
htmltext += "bottom bottom bottom bottom bottom<BR>";
layer2.setHtml(htmltext);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#ffffff">

<DIV ID="layer1Div">
<CENTER>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);"
                          ONMOUSEUP="return layer2.stopScroll();">scroll up</A><BR>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(10, 0);"
                          ONMOUSEUP="return layer2.stopScroll();">scroll left</A>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(-10, 0);"
                          ONMOUSEUP="return layer2.stopScroll();">scroll right</A><BR>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);"
                          ONMOUSEUP="return layer2.stopScroll();">scroll down</A><BR>
</CENTER>
</DIV>

<DIV ID="layer2Div">
</DIV>

</BODY>

</HTML>

Remarks

Netscape 4.x can only change the width of a layer when its contents changes. That's why the layer's content is written dynamically. Later, another possibility will be explained (see the Section called External source in Chapter 3).

After a resize, Netscape 4.x loses the javascript handlers that have been attached to scroll links. This bug has been present in every release of the 4.x series and will probably never be resolved.

Netscape 6.x and Mozilla 0.8.x measure the height of the content wrongly and don't change the wrapping width correctly. This has been resolved by the development team in the current nightly builds.

Internet Explorer 4.0 apparently only updates the dimensions of a layer with changed content when the document has finish loading and executing. This prevents the correct retrieval of the available height, the first time the layer is positioned. Therefore, the vertical scroll will only work from the second use onwards.

This example doesn't work at all in Opera since layer clipping and content changes aren't implemented by the browser.

Since there are so many problems involved in using the available area in a cross-browser manner, it's probably better to restrict the features you use in this case. I've deliberately included most of the problems in this example. If you include the html from an external file, most issues are resolved. Opera is still incapable to use this feature in any situation though.

Creating the RelativeLayers

In this example two RelativeLayers are created. The contents of the navigation layer is written inside its DIV tag as regular HTML, while the text inside the second layer is set dynamically from javascript with the setHtml() method.

Since the available area of the second layer is bigger than its visible area, the navigation layer provides access to functions which allow you to scroll the available area in different directions. The startScroll() and stopScroll() are triggered when the mousebutton is pressed or released on the appropriate links.

Table 2-2. Available area example : explanation of the navigation layer creation

new RelativeLayer
(
   
    "layer1Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

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

Definition of the position and size of the visible area (see figure Figure 2-3). The width fits the window width perfectly (100%) and the height is calculated automatically from the height of the layer's content (AUTO). The positioning offsets are defined relative to the LEFT and TOP borders of the window. The positioning handle is placed exactly on the top-left corner of the layer (50% to the left of and 50% above the center of the visible area). The positioning offsets are both 0 which results in a visible area that touches the left and top edges of the window.

    "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-3. Available area example : definition of the position and size of the visible area of the navigation layer.

Table 2-3. Available area example : explanation of the second layer creation

new RelativeLayer
(
   
    "layer2Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

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

Definition of the position and size of the visible area (see figure Figure 2-4). The width is 30% and the height is 50% of the window dimension. 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 both 50% which results in a visible area that is centered perfectly in the window.

    "200%", "AUTO",
    LEFT, "50%",
    TOP, "0",
    "0", "-50%",
    =>    

Definition of the position and size of the available area (see figure Figure 2-5). The width is twice that of the visible area and the height is calculated automatically according to the contents. The positioning offsets are defined relative to the LEFT and TOP borders of the visible area. The positioning handle is moved to the middle of the top border of the available area. The horizontal positioning offset is 0 and the vertical positioning offset is -50%, this results in an available area that is horizontally centered under the visible area and that has its top border aligned with the top border of the visible area .

    "#dddddd", ""
    =>    

Light gray background color and no background image.

);
   

Figure 2-4. Available area example : definition of the position and size of the visible area of the second layer.

Figure 2-5. Available area example : definition of the position and size of the available area of the second layer.