Synopis

Source

xbAnimatedElement.js

Uses

• nothing

See Also

• xbMarquee
• xbPositionableElement
• Stock Ticker

Description

Notes

Script Location/Invocation

xbAnimatedElement 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 xbAnimatedElement object. This is used internally in during the animation using the setTimeout function.

runId

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

pathFunc

Function - path function which take an integer argument (the tick or time) and returns an object with properties x and y which are to be used to position the element.

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 xbAnimatedElement 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.

tick

readonly Number - a counter which is incremented each time the element is moved.

Methods

xbAnimatedElement(String id, Function pathFunc)

Constructs an instance of the xbAnimatedElement class.

Arguments:

String id - ID of the div.

Function pathFunc - Reference to Function which returns the new position of the element.

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

Examples

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

Download

xbAnimatedElement-examples.zip

General Examples

Move an image around a circle.

Support

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

Perform a Random Walk

Support

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