Synopis

Source

xbPositionableElement.js

Uses

• nothing

See Also

• xbAnimatedElement

Introduction

CSS 2 provides for the ability to position content at a fixed position in a browser's window through the use of the CSS rule position: fixed however only Netscape Gecko currently supports this advanced CSS 2 feature.

xbPositionableElement is an JavaScript Object which provides the ability to display an absolutely positioned element at a fixed position in the browser's window through the use of DHTML.

Description

Notes

Script Location/Invocation

xbPositionableElement requires that the HTML Content to be positioned be contained inside of an absolutely positioned HTML Element that has a unique ID attribute.

Cross Browser Support

Fully supports Gecko based browsers such as Netscape 6.x, Netscape 7.x, CompuServe 7.0 on all platforms. Supports Internet Explorer 5.5+ on Windows. Supports Opera 5+ on Windows and Netscape Navigator 4.x.

Properties

id

readonly String - ID Attribute to be given to the DIV containing the elements to be positioned.

name

readonly String - Name of the global variable created during construction which holds a reference to the newly created xbPositionableElement object. This is used internally in during the animation using the setTimeout function.

runId

readonly Number - Timer ID for the animation. Returned by setTimeout.

sideX

String - contains the location of where to place the positioned element in dts of the horizontal axis. Can be one of 'left', 'center', or 'right'.

sideY

String - contains the location of where to place the positioned element in dts of the vertical axis. Can be one of 'top', 'center', or 'bottom'.

div

readonly HTMLElement - reference to the Element which contains the HTML that will be positoned. Note that the ID attribute of the element will be the ID attribute used in the xbPositionableElement constructor. This ID can be used to style the contents using CSS.

styleObj

readonly Object - reference to the div's stylable object.

For DOM HTML and DOM CSS Compatible browsers such as Mozilla, Internet Explorer and Opera this is a reference to div's CSS style object.

For Navigator 4, this is a reference to the div itself.

refreshInterval

readonly Number - the number in miliseconds to wait before refreshing the position of the div.

Methods

xbPositionableElement(String id, String sideX, String sideY, Number offsetX, Number offsetY)

Constructs an instance of the xbPositionableElement class.

Arguments:

String id - ID of the div.

String sideX - contains the location of where to place the positioned element in dts of the horizontal axis. Can be one of 'left', 'center', or 'right'.

String sideY - contains the location of where to place the positioned element in dts of the vertical axis. Can be one of 'top', 'center', or 'bottom'.

Number offsetX - number of pixels the element is to be positioned offset in the horizontal direction from the geometric position defined by sideX. This can be a negative or positive value.

Number offsetY - number of pixels the element is to be positioned offset in the vertical direction from the geometric position defined by sideY. This can be a negative or positive value.

Returns:

nothing

Support

Gecko/Netscape 6+, Internet Explorer 4+, Opera and Navigator 4.

start()

Returns:

Nothing

This method starts the positioning of the div. This method should be called in a page's onload event handler.

stop()

Stops the updating of the div's position

Arguments:

None

Returns:

Nothing

_updatePosition()

Internal method used to reposition the Element after changes in the window's size or the scroll position.

Arguments:

None

Returns:

Nothing

Examples

These examples illustrate the variety of uses for xbPositionableElement. Using xbPositionableElement you can position an HTML Element in a variety of ways.

Please view source for each example in order to understand it's construction.

Download

xbPositionableElement-examples.zip

General Examples

Tests

These tests illustrate the behavior of xbPositionableElement using each of the possible combinations of horizontal alignment (left, center, right) and vertical alignment (top, center, bottom).

Support

Netscape 4.x, Netscape 6.x/7.x, Netscape Gecko Based clients like Compuserve 7, Internet Explorer 5/Windows, Opera 5+

Offset Example

Two positioned images each offset from the bottom corners of the window.

Support

Netscape 4.x, Netscape 6.x/7.x, Netscape Gecko Based clients like Compuserve 7, Internet Explorer 5/Windows, Opera 5+

Animated Offset Example

Two positioned images each offset from the bottom corners of the window using animation.

Support

Netscape 4.x, Netscape 6.x/7.x, Netscape Gecko Based clients like Compuserve 7, Internet Explorer 5/Windows, Opera 5+