Scrolling JavaScript Banners: Specifying the Banner's Position - Doc JavaScript

Specifying the Banner's Position

Positioning a Dynamic HTML element in a standard HTML document is never easy. We'll position the banner with the use of a simple image (GIF, JPEG, animated GIF, or any other format):

<IMG SRC="blank.gif"
     NAME="holdspace" ID="holdspace"
     WIDTH="400" HEIGHT="21"
     STYLE="visibility:hidden; position:relative;">

The image is used to position the banner on the page. The banner moves on top of the image, which can be placed anywhere on the page, based on its coordinates. If the user's browser doesn't support JavaScript (or JavaScript is disabled), the banner cannot be displayed, so the image remains in place. The image acts as a backup in this case, so it should be meaningful. It may also be a 1x1 transparent GIF.

Notice that the NAME and ID attributes should have the same value. The NAME is used to reference the image in Navigator 4.0x, whereas the ID serves Internet Explorer 4.0x. By assigning the same value to these attributes, it is easy to create a cross-browser reference of the image in the script.

The WIDTH and HEIGHT definitions specify the dimensions of the image. Since the banner is placed on top of the image, these attributes determine the dimensions of the banner. The image actually saves space on the page for the banner that loads when the page has finished doing so.

The image's visibility is set to hidden in order to hide the image. Navigator 4.0x doesn't accept a visibility property for images, so this specification only affects Internet Explorer 4.0x. If the user has disabled style sheets, it does not affect the image. But because the script doesn't rely on style sheets, the banner is placed on top of the image (so it is hidden in any case). If you do not want the user to see the image until the banner is loaded, simply use a transparent one.

The position is set to relative to identify the element as a positioned one. This ensures that the parent element is also the one from which offsetLeft and offsetTop are measured. Without this property, Internet Explorer 4.0x would measure the offsetLeft and offsetTop properties with respect to the element's direct parent, which could be a TD element, for example. Since style sheets cannot be disabled in Internet Explorer 4.0x, this STYLE definition is always evaluated. Note that Navigator 4.0x's undocumented x and y properties of an image are not influenced by the image's parent element. They are always measured from the left and top edges of the page.

Another way to add a positioned (absolute) element to a standard page is to nest it within another element that has a position value of relative. However, Internet Explorer 4.0x's clip property doesn't function properly on relative elements. Peter Belesis, author of Webreference's Dynamic HTML Lab, suggested a workaround for this problem. Instead of nesting an absolute element within a relative one, simply nest an absolute element within another absolute element that is nested within a relative element. Navigator 4.0x doesn't require this workaround, because its clipping works fine with relative elements as well.

Created: February 10, 1998
Revised: February 10, 1998

URL: https://www.webreference.com/js/column13/position.html