Class xbPositionableElement — Cross Browser DHTML Positionable Element
class xbPositionableElement
{
public:
xbPositionableElement(String id,
String sideX,
String sideY,
Number offsetX,
Number offsetY);
// properties
String id;
String name;
String sideX;
String sideY;
Number offsetX;
Number offsetY;
HTMLElement div;
Number runId;
// methods
void start();
void stop();
Number _getInnerSize(String propName);
Number _getScrollOffset(propName);
Number _updatePosition();
}
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.
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.
readonly String - ID Attribute to be given to the DIV containing the elements to be positioned.
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.
readonly Number - Timer ID for the animation. Returned by setTimeout.
String - contains the location of where to place the positioned element in terms of the horizontal axis. Can be one of 'left', 'center', or 'right'.
String - contains the location of where to place the positioned element in terms of the vertical axis. Can be one of 'top', 'center', or 'bottom'.
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.
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.
readonly Number - the number in miliseconds to wait before refreshing the position of the div.
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 terms 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 terms 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.
Returns: Nothing
This method starts the positioning of the div. This method should be called in a page's onload event handler.
Stops the updating of the div's position
Arguments: None
Returns: Nothing
Internal method used to reposition the Element after changes in the window's size or the scroll position.
Arguments: None
Returns: Nothing
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.
Example 1. 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+
Example 2. 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+
Example 3. 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+