Free Tutorials » Blog Archive » » How to handle Layer Attributes

How to handle Layer Attributes

Posted by Mantasha in HTML on 06 27th, 2008 | no responses

The visibility attribute

Layers, by default, are usually seen (but most often not heard). You can change that by setting the visibility attribute to show, hide, or inherit. As expected, show forces the layer to be seen, hide hides it from view, and inherit explicitly declares that you want the layer to inherit its parent’s visibility. The default value for this attribute is inherit. Layers that are not nested are considered to be children of the main document, which is always visible. Thus, non-nested layers lacking the visibility attribute are initially visible.

It makes little sense to hide layers unless you plan to reveal them later. In general, this attribute is only used when you include some JavaScript routines with your document that will reveal the hidden layers as a result of some user interaction.

Layers that are hidden do not block layers below them from view. Instead, a hidden layer can best be thought of as being transparent. One way to hide content in the main document is to place an opaque layer over the content. To display the hidden context, hide the opaque layer, revealing the content underneath.

The width attribute

Layers are only as big as necessary to contain their content. The initial width of a layer is defined to be the distance from the point at which the layer is created in the current text flow to the right margin. Netscape then formats the layer’s contents to that width and makes the height of the layer tall enough to contain all of the layer’s contents. If the contents of the layer wind up smaller than the initial width, the layer’s width is then reduced to this smaller amount.

You can explicitly set the width of a layer using the width attribute. The value of this attribute defines the width of the layer in pixels. As expected, Netscape then sets the height based upon the size of the layer’s contents, wrapped to the specified width. If elements in the layer–such as images–cannot be wrapped and instead extend past the right margin of the layer, only a portion of the element will be shown. The remainder will be clipped by the edge of the layer and not shown. This is similar to the behavior of an image in the main document window. If the image extends beyond the edge of the browser window, only a portion of the image is displayed. Unlike the browser window, however, layers cannot sport scrollbars allowing the user to scroll around in the layer’s contents.

The src attribute

The contents of a layer are not restricted to what you type between its <layer> and </layer> tags; you can also refer to and automatically load the contents of another document into the layer with the src attribute. The value of the src attribute is the URL of the document containing the layer’s content.

This document is not a full-fledged HTML document and in particular, should not contain <body> or <head> tags. Any other HTML content is allowed.

You can combine conventional layer content with content taken from another file by using both the src attribute and placing content within the <layer> tag. In this case, the content from the file is placed in the layer first, followed by any inline content within the tag itself. If you choose to use the src attribute without supplying additional inline content, you still must supply the closing </layer> tag to end the definition of the layer.

The src attribute provides, for the first time, a source inclusion capability in HTML. Previously, to insert content from one HTML document within another, you had to rely on a server-based capability to read the other file and insert it into your document at the correct location. Since layers are positioned, by default, at their defining point within the current flow, including another file in your document is simple:

...other content
<layer src="boilerplate"></layer>
...more content

Since a layer is rendered as a separate HTML entity, the contents of the included file will not be flowed into the containing text. Instead, it is as if the inserted text were contained within a <div> tag or other block-level HTML element.

The clip attribute

Normally, users see the entire layer unless it is obscured by a covering layer. With the clip attribute, you can mask off portions of a layer, revealing only a rectangular portion within the layer.

The value of the clip attribute is two or four integer values, separated by commas, defining pixel offsets into the layer corresponding to the left, top, right, and bottom edges of the clip area. If only two values are supplied, they correspond to the right and bottom edges of the visible area, and Netscape then assumes that the top and left values are zero. Therefore, clip=”75,100″ is equivalent to clip=”0,0,75,100″.

The area of the layer outside the visible area is made transparent, allowing whatever is under the layer to show through.

The clip attribute is handy for hiding portions of a layer, or for creating fade and wipe effects using JavaScript functions to change the clipping window over time.