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

RelativeLayer

Name

RelativeLayer -- the RelativeLayer class and its core functionalities

Synopsis

<SCRIPT LANGUAGE="JavaScript1.2" SRC="scripts/rl_layer.js"</SCRIPT>

Requires

Browser detection

Utility functions and classes

Window related functions

Functions

RelativeLayer getRelativeLayer ( String layerId );
Object normalizeEvent ( event systemEvent, Object currentObject );

Events

absoluteclip
absolutemoveby
absolutemoveto
absoluteresize
availablemoveby
availablemoveto
availableresizeby
availableresizeto
click
create
init
mousedown
mousemove
mouseover
mouseup
position
raise
visiblemoveby
visiblemoveto
visibleresizeby
visibleresizeto

Classes

function RelativeLayer
{
new ( String layerId, String visibleHorizOffsetReferenceId, String visibleVertOffsetReferenceId, String visibleWidth, String visibleHeight, constant visibleHorizBorder, String visibleHorizOffset, constant visibleVertBorder, String visibleVertOffset, String visibleHandleHorizOffset, String visibleHandleVertOffset, String availableWidth, String availableHeight, constant availableHorizBorder, String availableHorizOffset, constant availableVertBorder, String availableVertOffset, String availableHandleHorizOffset, String availableHandleVertOffset, String bgColor, String bgImage );
void addEventListener ( String type, Function listener );
void availableMoveBy ( String horizDistance, String vertDistance, boolean fireEvent );
void availableMoveTo ( String horizOffset, String vertOffset, boolean fireEvent );
void availableResizeBy ( String horizDistance, String vertDistance, boolean fireEvent );
void availableResizeTo ( String width, String height, boolean fireEvent );
integer calculateAvailableHandleHorizOffset ( );
integer calculateAvailableHandleVertOffset ( );
integer calculateAvailableHeight ( integer visibleHeight );
integer calculateAvailableHorizOffset ( integer visibleWidth, integer availableWidth );
integer calculateAvailableVertOffset ( integer visibleHeight, integer availableHeight );
integer calculateAvailableWidth ( integer visibleWidth );
integer calculateVisibleHandleHorizOffset ( );
integer calculateVisibleHandleVertOffset ( );
integer calculateVisibleHeight ( );
integer calculateVisibleHorizOffset ( integer visibleWidth );
integer calculateVisibleVertOffset ( integer visibleHeight );
integer calculateVisibleWidth ( );
void createLayer ( );
void destroyLayer ( );
void fireEvent ( String eventType, ... );
void fireEventObject ( Object event );
integer getAbsoluteHeight ( );
integer getAbsolutePageX ( );
integer getAbsolutePageY ( );
integer getAbsoluteWidth ( );
integer getAbsoluteX ( );
integer getAbsoluteY ( );
String getAvailableHandleHorizOffset ( );
String getAvailableHandleVertOffset ( );
String getAvailableHeight ( );
constant getAvailableHorizBorder ( );
String getAvailableHorizOffset ( );
constant getAvailableVertBorder ( );
String getAvailableVertOffset ( );
String getAvailableWidth ( );
String getBgColor ( );
String getBgImage ( );
String getId ( );
RelativeLayer getParentLayer ( );
String getVisibleHandleHorizOffset ( );
String getVisibleHandleVertOffset ( );
String getVisibleHeight ( );
integer getVisibleHorizBorder ( );
String getVisibleHorizOffset ( );
String getVisibleHorizOffsetReferenceId ( );
constant getVisibleVertBorder ( );
String getVisibleVertOffset ( );
String getVisibleVertOffsetReferenceId ( );
String getVisibleWidth ( );
integer getZIndex ( );
boolean intersects ( RelativeLayer otherLayer );
boolean isVisible ( );
Object makeEventObject ( String eventType, ... );
void position ( String/boolean eventType/fireEvent, ... );
void raise ( );
void refresh ( );
void removeEventListener ( String type, Function listener );
void setAutoReposition ( boolean active );
void setBgColor ( String color );
void setBgImage ( String url );
void setHtml ( String html );
void setVisible ( boolean visible );
void setZIndex ( integer zindex );
boolean startScroll ( integer x, integer y, integer speed );
boolean stopScroll ( );
void visibleMoveBy ( String horizDistance, String vertDistance, boolean fireEvent );
void visibleMoveTo ( String horizOffset, String vertOffset, boolean fireEvent );
void visibleResizeBy ( String horizDistance, String vertDistance, boolean fireEvent );
void visibleResizeTo ( String width, String height, boolean fireEvent );
};

Description

Details

Following is a detailed description of the elements listed in the synopsis.

Functions

getRelativeLayer
     Retrieves the RelativeLayer Object that corresponds to a given layer id.

Parameters

String
the id of the layer that has to be retrieved.

Returns

RelativeLayer
the corresponding RelativeLayer object if the id could be found.
null
if the id couldn't be found.

normalizeEvent
     Transforms a browser specific event object into a 'standard' format. The following event types are currently supported :

Parameters

systemEvent
the event that was generated by the system. This is not used and ignored by Internet Explorer since the event properties are taken from a global event object.
currentObject
the object that is current when being in the event handler that received the system event (typically, just pass 'this' as parameter). When omitted, Netscape 4.x and Internet Explorer are unable to determine which RelativeLayer generated the event.

Returns

Object
the newly constructed cross-browser event object.

Events

All event objects contain the following members :

type
the type of the event.
target
the RelativeLayer that generated the event or null if this couldn't be determined.
Below is a detailed description of each event type and the members that are available in the corresponding event objects.

absoluteclip
     This event is fired when the layer's clipping rectangle is changed through the use of browser-specific functions. The values are in pixels and are taken directly from the layer's properties. The generated event Object has the following members :
oldtop
the top value of the previous clipping rectangle.
oldright
the right value of the previous clipping rectangle.
oldbottom
the bottom value of the previous clipping rectangle.
oldleft
the left value of the previous clipping rectangle.
newtop
the top value of the new clipping rectangle.
newright
the right value of the new clipping rectangle.
newbottom
the bottom value of the new clipping rectangle.
newleft
the left value of the new clipping rectangle.

absolutemoveby
     This event is fired when the layer's position is changed through the use of browser-specific functions. The values are in pixels and are taken directly from the layer's properties. The generated event Object has the following members :
oldx
the x position before the move was executed.
oldy
the y position before the move was executed.
xdiff
the difference between the old and the new x position.
ydiff
the difference between the old and the new y position.

absolutemoveto
     This event is fired when the layer's position is moved to a new position through the use of browser-specific functions. The values are in pixels and are taken directly from the layer's properties. The generated event Object has the following members :
oldx
the x position before the move was executed.
oldy
the y position before the move was executed.

absoluteresize
     This event is fired when the layer is resized through the use of browser-specific functions. The values are in pixels and are taken directly from the layer's properties. The generated event Object has the following members :
oldwidth
the previous width
oldheight
the previous height
newwidth
the new width
newheight
the new height

availablemoveby
     This event is fired when the position of the available area has been changed through the use of the availableMoveBy() method. The generated event Object has the following members :
oldhorizoffset
the expression that defines the previous horizontal offset of the available area.
oldvertoffset
the expression that defines the previous vertical offset of the available area.
horizoffsetdiff
the expression that defines the difference between the old and the new horizontal offset of the available area.
vertoffsetdiff
the expression that defines the difference between the old and the new vertical offset of the available area.

availablemoveto
     This event is fired when the position of the available area has been changed through the use of the availableMoveTo() method. The generated event Object has the following members :
oldhorizoffset
the previous horizontal offset of the available area.
oldvertoffset
the previous vertical offset of the available area.

availableresizeby
     This event is fired when the size of the available area has been changed through the use of the availableResizeBy() method. The generated event Object has the following members :
oldwidth
the expression that defines the previous width of the available area.
oldheight
the expression that defines the previous height of the available area.
widthdiff
the expression that defines the difference between the new and the old width of the available area.
heightdiff
the expression that defines the difference between the new and the old height of the available area.

availableresizeto
     This event is fired when the size of the available area has been changed through the use of the availableResizeTo() method. The generated event Object has the following members :
oldwidth
the expression that defines the previous width of the available area.
oldheight
the expression that defines the previous height of the available area.

click
     This event is fired when a mouse button was clicked on the layer. The generated event Object has the following members :
pageX
the horizontal position of the mouse in the page.
pageY
the vertical position of the mouse in the page.
layerX
the horizontal position of the mouse in the layer (only when 'target' could be determined).
layerY
the vertical position of the mouse in the layer (only when 'target' could be determined).
which
the mouse button that was pressed.

create
     This event is fired when a layer has been dynamically created through the use of the createLayer() method or implicitely, by not providing a suitable DIV tag in the HTML body. The generated event Object contains no additional members.

init
     This event is fired when the layer's datastructure has been fully initialized and is ready for positioning. The generated event Object contains no additional members.

mousedown
     This event is fired when a mouse button is pressed on a layer. The generated event Object has the following members :
pageX
the horizontal position of the mouse in the page.
pageY
the vertical position of the mouse in the page.
layerX
the horizontal position of the mouse in the layer (only when 'target' could be determined).
layerY
the vertical position of the mouse in the layer (only when 'target' could be determined).
which
the mouse button that was pressed.

mousemove
     This event is fired when the mouse is moved over a layer. The generated event Object has the following members :
pageX
the horizontal position of the mouse in the page.
pageY
the vertical position of the mouse in the page.
layerX
the horizontal position of the mouse in the layer (only when 'target' could be determined).
layerY
the vertical position of the mouse in the layer (only when 'target' could be determined).

mouseover
     This event is fired when the mouse first moves into a layer's area. The generated event Object has the following members :
pageX
the horizontal position of the mouse in the page.
pageY
the vertical position of the mouse in the page.
layerX
the horizontal position of the mouse in the layer (only when 'target' could be determined).
layerY
the vertical position of the mouse in the layer (only when 'target' could be determined).

mouseup
     This event is fired when a mouse button is released on a layer. The generated event Object has the following members :
pageX
the horizontal position of the mouse in the page.
pageY
the vertical position of the mouse in the page.
layerX
the horizontal position of the mouse in the layer (only when 'target' could be determined).
layerY
the vertical position of the mouse in the layer (only when 'target' could be determined).
which
the mouse button that was pressed.

position
     This event is fired when the layer has been repositioned without calling a movement or resize method, but by for example calling the position() method. The generated event Object contains no additional members.

raise
     This event is fired when the layer has been raised above all the other layers by calling the raise() method. The generated event Object contains no additional members.

visiblemoveby
     This event is fired when the position of the visible area has been changed through the use of the visibleMoveBy() method. The generated event Object has the following members :
oldhorizoffset
the expression that defines the previous horizontal offset of the visible area.
oldvertoffset
the expression that defines the previous vertical offset of the visible area.
horizoffsetdiff
the expression that defines the difference between the old and the new horizontal offset of the visible area.
vertoffsetdiff
the expression that defines the difference between the old and the new vertical offset of the visible area.

visiblemoveto
     This event is fired when the position of the visible area has been changed through the use of the visibleMoveTo() method. The generated event Object has the following members :
oldhorizoffset
the expression that defines the previous horizontal offset of the visible area.
oldvertoffset
the expression that defines the previous vertical offset of the visible area.

visibleresizeby
     This event is fired when the size of the visible area has been changed through the use of the visibleResizeBy() method. The generated event Object has the following members :
oldwidth
the expression that defines the previous width of the visible area.
oldheight
the expression that defines the previous height of the visible area.
widthdiff
the expression that defines the difference between the new and the old width of the visible area.
heightdiff
the expression that defines the difference between the new and the old height of the visible area.

visibleresizeto
     This event is fired when the size of the visible area has been changed through the use of the visibleResizeTo() method. The generated event Object has the following members :
oldwidth
the expression that defines the previous width of the visible area.
oldheight
the expression that defines the previous height of the visible area.

Classes

RelativeLayer

new
     The constructor of a RelativeLayer object makes it possible to define its shape, position and background. It will be automatically positioned when the page has finished loading. Below are schematic drawings to visually show what all the parameters for the constructor are used for :

Figure 1. RelativeLayer definition : explanation the visible area's variables.

Figure 2. RelativeLayer definition : explanation the available area's variables.

Parameters

layerId
the unique id of this layer. This will be used to reference the layer in other functions and parameters. The id of the DIV that contains the layer's content will also have to be identical.
visibleHorizOffsetReferenceId
the id of the layer that will be used as a reference for the horizontal offset of the visible area. If this is an empty string, the parent layer will be used.
visibleVertOffsetReferenceId
the id of the layer that will be used as a reference for the vertical offset of the visible area. If this is an empty string, the parent layer will be used.
visibleWidth
the visible width of the layer, relative to the parent layer. Besides a regular distance expression this can be 'AUTO', which means that the width will automatically be calculated to match the width of the contents exactly.
visibleHeight
the visible height of the layer, relative to the parent layer. Besides a regular distance expression this can be 'AUTO', which means that the height will automatically be calculated to match the height of the contents exactly.
visibleHorizBorder
the border of the reference layer from which the visible area's horizontal offset will be measured. This is either LEFT or RIGHT.
visibleHorizOffset
the horizontal offset of the visible area from the border of the reference layer.
visibleVertBorder
the border of the reference layer from which the visible area's vertical offset will be measured. This is either TOP or BOTTOM.
visibleVertOffset
the vertical offset of the visible area from the border of the reference layer.
visibleHandleHorizOffset
definition of the horizontal position of the visible area handle that is used to position the whole visible area. The distance is measured from the absolute center of the visible area.
visibleHandleVertOffset
definition of the vertical position of the visible area handle that is used to position the whole visible area. The distance is measured from the absolute center of the visible area.
availableWidth
the width of the available area, this is relative to the width of the visible area. Besides a regular distance expression this can be 'AUTO', which means that the width will automatically be calculated to match the width of the contents exactly. The default value is 100%.
availableHeight
the height of the available area, this is relative to the height of the visible area. Besides a regular distance expression this can be 'AUTO', which means that the height will automatically be calculated to match the height of the contents exactly. The default value is 100%.
availableHorizBorder
the border of the visible area from which the available area's horizontal offset will be measured. This is either LEFT or RIGHT. The default value is LEFT.
availableHorizOffset
the horizontal offset of the available area from the border of the visible area. The default value is 50%.
availableVertBorder
the border of the visible area from which the available area's vertical offset will be measured. This is either TOP or BOTTOM. The default value is TOP.
availableVertOffset
the vertical offset of the available area from the border of the visible area. The default value is 50%.
availableHandleHorizOffset
definition of the horizontal position of the available area handle that is used to position the whole available area. The distance is measured from the absolute center of the available area. The default value is 0.
availableHandleVertOffset
definition of the vertical position of the available area handle that is used to position the whole available area. The distance is measured from the absolute center of the available area. The default value is 0.
bgColor
the color of the layer's background. To use no background color, omit the parameter or provide an empty string.
bgImage
the url of the layer's background image. To use no background image, omit the parameter or provide an empty string.

Returns

Object
the newly created RelativeLayer object

addEventListener
     Registers a listener for a specific event type. The event type can either internally supported by RelativeLayers or any other type for the creation of custom events.

Parameters

type
a String with the type of the event for which the listener will be registered.
listener
the function that will be called when an event of the specified type is fired.

availableMoveBy
     Moves the available area by the specified offsets.

Parameters

horizDistance
the horizontal distance by which the available area will be moved. The expression is evaluated relative to the size of the visible area.
vertDistance
the vertical distance by which the available area will be moved. The expression is evaluated relative to the size of the visible area.
fireEvent
this parameter defaults to true which means that an event is fired when the available area has been moved. If false is passed instead, no event is fired.

availableMoveTo
     Moves the available area to the specified offset.

Parameters

horizOffset
the horizontal position to where the available area will be moved. The expression is evaluated relative to the size of the visible area.
vertOffset
the vertical position to where the available area will be moved. The expression is evaluated relative to the size of the visible area.
fireEvent
this parameter defaults to true which means that an event is fired when the available area has been moved. If false is passed instead, no event is fired.

availableResizeBy
     Resizes the available area by the specified offsets.

Parameters

horizDistance
the horizontal distance by which the available width will be changed. The expression is evaluated relative to the size of the visible area.
vertDistance
the vertical distance by which the available height will be changed. The expression is evaluated relative to the size of the visible area.
fireEvent
this parameter defaults to true which means that an event is fired when the available area has been resized. If false is passed instead, no event is fired.

availableResizeTo
     Changes the size of the available area to the one specified by the provided width and height.

Parameters

width
the new width of the available area. The expression is evaluated relative to the size of the visible area.
height
the new height of the available area. The expression is evaluated relative to the size of the visible area.
fireEvent
this parameter defaults to true which means that an event is fired when the available area has been resized. If false is passed instead, no event is fired.

calculateAvailableHandleHorizOffset
     Calculates the number of pixels of the horizontal distance from the absolute center of the available area to its positioning handle.

Returns

integer
the calculated number of pixels.

calculateAvailableHandleVertOffset
     Calculates the number of pixels of the vertical distance from the absolute center of the available area to its positioning handle.

Returns

integer
the calculated number of pixels.

calculateAvailableHeight
     Calculates the number of pixels of the available area's height.

Parameters

visibleHeight
since the calculations in this function need to know the current visible height, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateAvailableHorizOffset
     Calculates the number of pixels of the available area's horizontal offset from the border of the horizontal reference layer.

Parameters

visibleWidth
since the calculations in this function need to know the current visible width, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.
availableWidth
since the calculations in this function need to know the current available width, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateAvailableVertOffset
     Calculates the number of pixels of the available area's vertical offset from the border of the vertical reference layer.

Parameters

visibleHeight
since the calculations in this function need to know the current visible height, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.
availableHeight
since the calculations in this function need to know the current available height, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateAvailableWidth
     Calculates the number of pixels of the available area's width.

Parameters

visibleWidth
since the calculations in this function need to know the current visible width, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateVisibleHandleHorizOffset
     Calculates the number of pixels of the horizontal distance from the absolute center of the visible area to its positioning handle.

Returns

integer
the calculated number of pixels.

calculateVisibleHandleVertOffset
     Calculates the number of pixels of the vertical distance from the absolute center of the visible area to its positioning handle.

Returns

integer
the calculated number of pixels.

calculateVisibleHeight
     Calculates the number of pixels of the visible area's height.

Returns

integer
the calculated number of pixels.

calculateVisibleHorizOffset
     Calculates the number of pixels of the visible area's horizontal offset from the border of the horizontal reference layer.

Parameters

visibleHeight
since the calculations in this function need to know the current visible width, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateVisibleVertOffset
     Calculates the number of pixels of the visible area's vertical offset from the border of the vertical reference layer.

Parameters

visibleWidth
since the calculations in this function need to know the current visible width, it can be provided as an optional parameter to prevent it being calculated more than once unnecessarily.

Returns

integer
the calculated number of pixels.

calculateVisibleWidth
     Calculates the number of pixels of the visible area's width.

Returns

integer
the calculated number of pixels.

createLayer
     Dynamically creates the layer instead of relying on correct DIV tag in the HTML document. Don't call this function if a DIV tag with this layer's id is already present in the document, the behavior will be unpredictable. This function has no effect when the layer already exists.

destroyLayer
     Destroys the layer completely. It will not be retrievable in any way. Be sure that this is what you want to do. If you just want to make the layer invisible, use the setVisible() method instead.

fireEvent
     This is a shorthand function to quickly fire an event that is defined by a series of parameters. The parameters are passed directly to makeEventObject() and the generated event object is passed to fireEventObject(). See these methods for more information.

Parameters

eventType
the type of the event object.

fireEventObject
     Calls all the event listeners according to the provided event object. This object will be passed straight on to the listeners and needs to have at least the type member to make it possible to detect the event type.

Parameters

event
the event object that will be passed to the listeners.

getAbsolutePageX
     Calculates the absolute x position of the layer in the page. This just adds all the x properties of the parent layers and this layer together and has thus nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's x position in the page.

getAbsolutePageY
     Calculates the absolute y position of the layer in the page. This just adds all the y properties of the parent layers and this layer together and has thus nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's y position in the page.

getAbsoluteHeight
     Retrieves the height property of the layer. This provides direct access to this layer property and has nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's height property.

getAbsoluteWidth
     Retrieves the width property of the layer. This provides direct access to this layer property and has nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's width property.

getAbsoluteX
     Retrieves the x property of the layer. This provides direct access to this layer property and has nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's x property.

getAbsoluteY
     Retrieves the y property of the layer. This provides direct access to this layer property and has nothing do to with the internal positioning mechanism of RelativeLayers.

Returns

integer
the layer's y property.

getAvailableHandleHorizOffset
     Retrieves the expression that defines the horizontal offset from the center of the available area to its positioning handle.

Returns

String
the expression that defines the horizontal offset from the center of the available area to its positioning handle.

getAvailableHandleVertOffset
     Retrieves the expression that defines the vertical offset from the center of the available area to its positioning handle.

Returns

String
the expression that defines the vertical offset from the center of the available area to the positioning handle.

getAvailableHeight
     Retrieves the expression that defines the height of the available area.

Returns

String
the expression that defines the height of the available area.

getAvailableHorizBorder
     Retrieves the constant that defines the border of the visible area from which the available horizontal offset is measured.

constant

String
the constant that defines the border of the visible area from which the available horizontal offset is measured. This is either LEFT or RIGHT.

getAvailableHorizOffset
     Retrieves the expression that defines the horizontal offset of the available area from the horizontal border of the visible area.

Returns

String
the expression that defines the horizontal offset of the available area from the horizontal border of the visible area.

getAvailableVertBorder
     Retrieves the constant that defines the border of the visible area from which the available vertical offset is measured.

Returns

constant
the constant that defines the border of the visible area from which the available vertical offset is measured. This is either TOP or BOTTOM.

getAvailableVertOffset
     Retrieves the expression that defines the vertical offset of the available area from the vertical border of the visible area.

Returns

String
the expression that defines the vertical offset of the available area from the vertical border of the visible area.

getAvailableWidth
     Retrieves the expression that defines the width of the available area.

constant

String
the expression that defines the width of the available area.

getBgColor
     Returns the layer's background color that was set through RelativeLayers. This will not give access to the layer's style background color property.

Returns

String
the layer's background color.

getBgImage
     Returns the layer's background image url that was set through RelativeLayers. This will not give access to the layer's style background image property.

Returns

String
the layer's background image url.

getId
     Returns the id of this RelativeLayer.

Returns

String
the layer's id.

getParentLayer
     Retrieves the parent RelativeLayer object of this layer.

Returns

RelativeLayer
the layer's parent RelativeLayer.
null
if this layer's parent is the browser window itself.