Layer

Layers provide a way to position overlapping transparent or opaque blocks of HTML content precisely on a page. When combining this functionality with JavaScript the author of a web page now has the ability to dynamically move or alter HTML elements, opening up new possibilities such as animation and zooming in/out of elements.

A Layer object is created with every instance of the HTML <LAYER> or <ILAYER> tag in a document. These objects are then stored in the layers array of the parent document and accessed using either the name defined within the HTML tag or an integer (with '0' being the first element defined, in source order, in the specified form).

The ability to position elements above or below others requires a third positional parameter. This is called the z-index (the higher the z-index the more to the fore the layer is) and elements can be manipulated using this parameter to dynamically move them, not just horizontally and vertically, but also 'forwards' (above) and 'backwards' (below) relative to other elements on the screen.

Examples

Code:

<layer name=aboveLayer bgcolor="lightgreen" top=50 
        left=80 width=150 height=50> Hello from the layer above</layer>

        <layer name=belowLayer above=aboveLayer bgcolor="lightblue" top=20 
        left=50 width=75 height=100>Layer below</layer>

Explanation:

This example creates two layers and uses the above attribute of the layer tag to display the aboveLayer layer at the top.

Properties

above

Syntax: layer.above

If a layer is topmost in the z-order, this property relates to the enclosing window object, otherwise it is a reference to the layer object above the calling layer. An example of this property is given in the code above.

background

Syntax: layer.background.src = "image"

This property is used to set the image used for the backdrop of a layer. The value is null if the layer has no image backdrop.

below

Syntax: layer.below

This property represents the layer below the calling layer. The value of this property is null if the calling layer is the bottom most in the z-order.

bgColor

Syntax: layer.bgColor = "colorinfo"

This property defines a document's background color. The "colorinfo" argument is a string that can contain either the hexadecimal definition of the color or its literal description.

clip.bottom

Syntax: layer.clip.height

This property sets the height, in pixels, of the layer's viewable area (known as the clipping rectangle). Anything outside of this area is not seen.

clip.left

Syntax: layer.clip.left

This property sets the left edge of the layer's viewable area (known as the clipping rectangle). Anything outside of this are is not seen.

clip.right

Syntax: layer.clip.right

This property sets the right edge of the layer's viewable area (known as the clipping rectangle). Anything outside of this are is not seen.

clip.top

Syntax: layer.clip.top

This property sets the top edge of the layer's viewable area (known as the clipping rectangle). Anything outside of this are is not seen.

clip.width

Syntax: layer.clip.width

This property sets the width, in pixels, of the layer's viewable area (known as the clipping rectangle). Anything outside of this are is not seen.

constructor

Syntax: Object.constructor

This specifies a function to create an object's property and is inherited by all objects from their prototype.

document

Syntax: layer.document

This property is used to access the document contained within a layer. All the methods available to the Document object can also be used to modify the contents of the layer.

left

Syntax: layer.left

This property returns the horizontal position, in pixels, of the left edge of a layer in relation to its parent layer.

name

Syntax: layer.name

This property returns a string that contains the name of a layer as defined by the ID atttribute of the <LAYER> tag.

pageX

Syntax: layer.pageX

These properties return the X (horixontal) and Y (vertical) position of the specified layer in relation to the page containing it.

PageY

Syntax: layer.PageY

These properties return the X (horixontal) and Y (vertical) position of the specified layer in relation to the page containing it.

parentLayer

Syntax: later.parentLayer

For a layer nested within another, this property is a reference to the parent Layer object. If not a nested layer, this property refers to the Window object that contains the layer.

prototype

Syntax: Object.prototype.name = value

This allows the addition of properties and methods to any object.

siblingAbove

Syntax: layer.siblingAbove

This property is a reference to the Layer object above the specified layer in z-order, amongst layers that share the same parent layer. This property's value is null if no sibling above exists.

siblingBelow

Syntax: layer.siblingBelow

This property is a reference to the Layer object below the specified layer in z-order, amongst layers that share the same parent layer. This property's value is null if no sibling above exists

src

Syntax: layer.src

This property returns a string containing the URL of the source of the layer's content. This is the same as the SRC attribute of the <LAYER> tag.

top

Syntax: layer.top

This property is a reference to the top-most browser window that contains the specified layer. Use this property to affect changes to the layer's top-most window i.e. layerName.top.close().

visibility

Syntax: layer.visibility = "value"

This property determines whether or not a layer is visible.

zIndex

Syntax: layer.zIndex

This property returns the relative z-order of the specified layer in relation to any sibling layers. Any siblings with a lower zIndex are displayed below the specified layer and any with a higher zIndex are stacked above.

Methods

captureEvents

Syntax: layer.captureEvent(eventType)

This method instructs the window or document to capture all events of a particular type. See the event object for a list of event types.

eval

Syntax: Object.eval(string)

The eval method is deprecated as a method of Object, but is still used as a high level function. It evaluates a string of JavaScript in the context of an object.

handleEvent

Syntax: layer.handleEvent("eventID")

This method is used to call the handler for the specified event.

load

Syntax: layer.load("fileName", width)

This method is used to change the contents of a layer by loading a file containing HTML code into the layer.

moveAbove

Syntax: layer.moveAbove(layerName)

This method is used to move the layer above the one specified with the layerName argument.

moveBelow

Syntax: layer.moveBelow(layerName)

This method is used to move the layer below the one specified with the layerName argument.

moveBy

Syntax: layer.moveBy(horizPixels, vertPixels)

This method is used to move the layer a specified number of pixels in relation to its current co-ordinates.

moveTo

Syntax: layer.moveTo(Xposition, Yposition)

This method moves the layer's left edge and top edge to the specified x and y co-ordinates, respectively.

moveToAbsolute

Syntax: layer.moveToAbsolute(xCoord, yCoord)

This method moves the specified layer to the pixel co-ordinates supplied in the x and y parameters, relative to the page, as opposed to the parent layer.

releaseEvents

Syntax: layer.releaseEvents("eventType")

This method is used to release any captured events of the specified type and to send them on to objects further down the event hierarchy.

resizeBy

Syntax: layer.resizeBy(horizPixels, vertPixels)

This method is used to resize the layer by the specified horizontal and vertical number of pixels.

resizeTo

Syntax: layer.resizeTo(outerWidth, outerHeight)

This method is used to resize a layer to the dimensions supplied with the width and height (both integers, in pixels) parameters.

routeEvent

Syntax: layer.routeEvent(eventType)

This method is used to send a captured event further down the normal event hierarchy; specifically, the event is passed to the original target object unless a sub-object of the window (a document or layer) is also set to capture this type of event, in which case the event is passed to that sub-object.

toSource