Class xbAnimatedElement — Cross Browser DHTML Animated Element


class xbAnimatedElement
  xbAnimatedElement(String id, Function pathFunc);

  // properties
  String      id; 
  String      name; 
  HTMLElement div;  
  Number      runId;
  Function    pathFunc;
  Number      tick;
  // methods
  void        start();
  void        stop();


Uses:  Nothing



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.



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


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


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.


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.


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.


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


xbAnimatedElement(String id, Function pathFunc)

Constructs an instance of the xbAnimatedElement class.


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.


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


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

General Examples

Example 1.  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+

Example 2.  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+