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

Chapter 2. The basics of RelativeLayers

We'll start by going over the basic functionalities of RelativeLayers through a series of examples.

Your first layer

This first example is very simple and shows how quickly a RelativeLayer can be defined.

It displays a gray rectangle on a blue background which takes up 80% of the window size and is always centered in the middle of it. The position and size of the rectangle is recalculated with each resize.

Source and example output

Example 2-1. Basic example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Basic example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function unsupportedBrowser()
{
    window.location.href="http://uwyn.com";
}
//-->
</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%","80%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd", "");
layer1.setVisible(true);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
Your first relative layer !<BR>
</DIV>

</BODY>

</HTML>

Remarks

Opera doesn't launch the onResize event when the window is resized. Therefore, the contents of the page will be lost when this happens.

Required HTML tags

Besides the new RelativeLayer() command there are a few HTML tags that have to be present to provide the correct framework to be able to define a new layer :

  • <SCRIPT LANGUAGE="JavaScript" SRC="rl_error.js"></SCRIPT>
    
    The inclusion of this script suppresses the display of javascript error messages and provides a default function when the page is being visited by an unsupported browser.
  • <SCRIPT LANGUAGE="JavaScript" SRC="rl_browser.js"></SCRIPT>
    
    The inclusion of this script automatically detects the visitor's browser and determines if RelativeLayers supports it. Should it be unsupported, then the unsupportedBrowser() is called. The rl_error.js script provides a default implementation that pops up a warning dialog and closes the browser window at its dismissal, of course this function can be overridden. In this example the visitor is redirected to another URL. Note that the previous two script inclusions are targeted at every javascript browser (LANGUAGE="JavaScript"). The following scripts will only function with javascript 1.2 and should thus contain the appropriate language specifier.
  • <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window.js"></SCRIPT>
    
    The inclusion of this script offers cross-browser access to functionalities that are related to the window in which the script is running. The following functionalities are provided :
    • hooks that are launched when the contents of the window are loaded,
    • hooks that are launched when the window is resized,
    • detection of recursive resize,
    • retrieval of the window's dimensions,
    • update of the dimensions of the main window document.
  • <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer.js"></SCRIPT>
    
    The inclusion of this script provides all the core functionalities of RelativeLayers.
  • <DIV ID="layerName">
       layer contents
    </DIV>
    
    RelativeLayers automatically creates the necessary stylesheets to position and display the layers. To be able to display information in the layer, this stylesheet needs to be linked to content. This is done by declaring an HTML DIV tag with an ID parameter. This ID corresponds to the id that has to be provided during the creation of the RelativeLayer object.

Creating the RelativeLayer

A RelativeLayer is created with the new RelativeLayer(); command. It's described in detail in the reference section. Following is a description of how this command has been used in this example.

Table 2-1. Basic example : explanation of the layer creation

new RelativeLayer
(
   
    "layer1Div",
    =>    

The id of the layer that will be used to reference it for example for the <DIV> tag.

    "", "",
    =>    

This layer is positioned according to its parent, which is the window here.

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

Definition of the position and size of the visible area (see figure Figure 2-1). The width and height are 80% of the window width and height. 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 offsets from the borders of the window to the positioning handle are respectively 50% of the window's width and height.

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

Definition of the position and size of the available area (see figure Figure 2-2). The width and height are the same (100%) as the width and height of the visible area. The offsets are defined relative to the LEFT and TOP borders of the visible area. The positioning handle remains in the center of the available area. The offsets from the borders of the visible area to the positioning handle are respectively 50% of the visible area's width and height. This whole definition results in an available area that has the same size as the visible area and that is positioned exactly underneath it.

    "#dddddd", ""
    =>    

Sets the background color of the layer to light gray and defines no background image.

);
   

Figure 2-1. Basic example : definition of the position and size of the visible area.

Figure 2-2. Basic example : definition of the position and size of the available area.

When the RelativeLayer has been created, don't forget that it has to be shown explicitly with the setVisible() method.