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

Moving and resizing

RelativeLayers provides functions that allow you to sporadically change the position and dimension of a layer after its definition. These functions are not intended to be used as a mechanism to animate layers in a cross-browser manner since it would be horribly slow.

This example contains two layers. The dimension of the first layer will initially be 80% and 60% of the window's width and height. This layer will initially also be horizontally centered inside the window pane and the layer's top edge will be positioned 10% of the window's height from the window's top border.

The second layer is meant to control the first layer by providing links which allow the first layer's position and dimension to be changed in a variety of manners. The second layer is 80% as wide as the window pane, but it's height is determinated automatically from the height of its contents. This layer is horizontally centered inside the window, and its bottom edge is positioned at 10% of the window's height from the window's bottom border.

Source and example output

Example 2-4. Move and resize example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Move and resize 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%","60%",LEFT,"50%",TOP,"10%","0","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);

layer2 = new RelativeLayer(
"layer2Div", "", "",
"80%","AUTO",LEFT,"50%",BOTTOM,"-10%","0","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#ffffff");
layer2.setVisible(true);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
Demo of the interactive move functions.<BR>
</DIV>

<DIV ID="layer2Div">
    <A HREF="javascript:layer1.visibleMoveBy(-10,0)">Left</A>
    <A HREF="javascript:layer1.visibleMoveBy(10,0)">Right</A>
    <A HREF="javascript:layer1.visibleMoveBy(0,-10)">Up</A>
    <A HREF="javascript:layer1.visibleMoveBy(0,10)">Down</A><BR>
    <A HREF="javascript:layer1.visibleMoveTo('50%',0)">Top edge</A>
    <A HREF="javascript:layer1.visibleMoveTo('50%',
                          '100%-'+layer1.calculateVisibleHeight())">Bottom edge</A>
    <A HREF="javascript:layer1.visibleMoveTo('50%',
                          Math.floor((layer2.getAbsoluteY()-layer1.calculateVisibleHeight())/2))">Center</A>
    <A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2);
                          layer1.visibleMoveTo(center_offset_x,'10%')">Left edge</A>
    <A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2);
                          layer1.visibleMoveTo('100%-'+center_offset_x,'10%')">Right edge</A><BR>
    <A HREF="javascript:layer1.visibleResizeTo('10%','60%')">Narrow</A>
    <A HREF="javascript:layer1.visibleResizeTo('100%','60%')">Wide</A>
    <A HREF="javascript:layer1.visibleResizeTo('80%','60%')">Normal</A>
    <A HREF="javascript:layer1.visibleResizeTo('80%','10%')">Short</A>
    <A HREF="javascript:layer1.visibleResizeTo('80%','90%')">Long</A><BR>
    <A HREF="javascript:layer1.visibleResizeBy('-10%',0)">Narrower</A>
    <A HREF="javascript:layer1.visibleResizeBy('10%',0)">Wider</A>
    <A HREF="javascript:layer1.visibleResizeBy(0,'-10%')">Shorter</A>
    <A HREF="javascript:layer1.visibleResizeBy(0,'10%')">Longer</A><BR>
</DIV>

</BODY>

</HTML>

Remarks

The methods that change the position of a layer are visibleMoveBy() and visibleMoveTo(). The first method changes the position by applying the horizontal and vertical differences that are needed to change the current position to a new one, the second method replaces the current position by a completely new one. The methods that resize a layer are completely analogue and are called visibleResizeBy() and visibleResizeTo().

All these methods accept expressions as arguments that have the same format as the expressions that can be used during the definition of a new RelativeLayer.

Methods as calculateVisibleHeight() and calculateVisibleWidth() returs the current values of the requested property (width, height, ...). These values can be to construct expressions for the move and resize functions that adapt themselves to the dynamic size of a layer.

Creating the RelativeLayers

Table 2-6. Moving and resizing example : explanation of the main layer creation

new RelativeLayer
(
   
    "layer1Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

    "80%", "60%",
    LEFT, "50%",
    TOP, "10%",
    "0", "-50%",
    =>    

Definition of the position and size of the visible area (see figure Figure 2-8). The layer is 80% as wide as the window and 60% as height. The positioning offsets are defined relative to the LEFT and TOP borders of the window. The positioning handle remains in the horizontally center (0) of the visible area and is vertically moved to the top edge of the layer's visible area.. The positioning offsets are respectively 50% and 10% of the window's width and height.

    "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-8. Moving and resizing example : definition of the position and size of the visible area of the main layer.

Table 2-7. Moving and resizing example : explanation of the controlling layer creation

new RelativeLayer
(
   
    "layer2Div",
    =>    

The id of the layer.

    "", "",
    =>    

This layer is positioned according to its parent.

    "80%", "AUTO",
    LEFT, "50%",
    BOTTOM, "-10%",
    "0", "50%",
    =>    

Definition of the position and size of the visible area (see figure Figure 2-9). The layer is 80% as wide as the window and its height is determined automatically from the content's height. The positioning offsets are defined relative to the LEFT and BOTTOM borders of the window. The positioning handle remains in the horizontally center (0) of the visible area and is vertically moved to the bottom edge of the layer's visible area.. The positioning offsets are respectively 50% and -10% of the window's width and height.

    "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-9. Moving and resizing example : definition of the position and size of the visible area of the controlling layer.