Class xbMarquee

Name

Class xbMarquee — Cross Browser JavaScript Object which emulates the Marquee object in Internet Explorer

Synopsis

class xbMarquee
{
public:
xbMarquee(String id, 
          String height, 
          String width;
          Number scrollAmount,
          Number scrollDelay,
          String direction,
          String behavior,
          String html);

  // properties
  String id;
  Number height;
  String heightUnit;
  Number width;
  String widthUnit;
  Number scrollAmount;
  Number scrollDelay;
  String direction;
  String behavior;
  String name;
  Number runId;
  HTMLElement containerDiv;
  HTMLElement div;
  Object styleObj;
  String html;
  Boolean isHorizontal;
  Object onmouseover;
  Object onmouseout;
  Object onclick;
  Object onstart;
  Object onbounce;

  // methods
  void start();
  void stop();
  void setInnerHTML(String html);
}

// class Properties
// internal use only
Number xbMarquee._name;
HTMLELement xbMarquee.getElm(String id);
Number xbMarquee._getInnerSize(HTMLELement elm, String propName);
Boolean xbMarquee.dispatchUIEvent(Event event, String marqueeName, String eventName);
String xbMarquee.createDispatchEventAttr(String marqueeName, String eventName);

Source

xbMarquee.js
Global file used by all browsers.

Uses: Nothing

Introduction

<marquee>...</marquee> is an HTML element invented by Microsoft. It is supported by IE3 and above. The marquee element is not part of the current or past HTML standards. There are no other browsers that currently support the marquee element. For this reason it is not used very often on major web pages. The intended effect is to scroll the text data surrounded by the marquee element tags. The scroll may be horizontal or vertical. The direction of the scroll may be either up or down, or from left or from right. In this document, we offer a comprehensive W3C-compliant alternative to the proprietary <marquee> extension. The Javascript library offered here covers all the major uses of <marquee> such as horizontal vs. vertical scroll, direction of text flow (LtoR, RtoL,alternating, up, and down), rate of scroll, etc.

Description

xbMarquee is an JavaScript Object that is used to emulate the basic functionality of the Marquee Object as defined by Internet Explorer in a cross browser fashion.

Notes

Script Location/Invocation. xbMarquee uses document.write to emit the HTML required for the emulated Marquee. This requires that the xbMarquee be created inside the BODY tag where the Marquee is to be located. In addition, due to issues in Internet Explorer and in Netscape Navigator 4, the Marquee must not be started until after the page has completed loading.

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 with the exception of language direction rtl.

Supports Internet Explorer 5.5+ on Windows and Internet Explorer 5.1+ on Macintosh with the exception of language direction rtl.

Support for Netscape Navigator 4.x should be determined on a case by case basis.

Using CSS to style xbMarquee. The appearance and language direction of xbMarquee can be governed using CSS rules specified for the HTML elements which are used to construct the marquee. To style xbMarquee, define CSS rules for the marquee container and the marquee itself. If you create an xbMarquee with ID myMarquee, then the container for the xbMarquee will have ID myMarqueecontainer and the marquee itself with have ID myMarquee. See the CSS example for more details.

Support for right to left languages (Hebrew and Arabic). Using CSS rule direction: rtl; will enable right to left langauge xbMarquees. Please see the examples below for more details.

Properties

id

readonly String - ID Attribute to be given to the DIV containing the Marquee. Note that the Marquee will be contained in another DIV with ID value IDcontainer

height

readonly Number - height of the Marquee in pixels

heightUnit

readonly String - Unit used in constructor for height argument. If not specified, defaults to 'px'.

width

readonly Number - width of the Marquee in pixels.

widthUnit

readonly String - Unit used in constructor for width argument. If not specified, defaults to 'px'.

scrollAmount

readonly Number - number of pixels to scroll Marquee contents during each increment.

scrollDelay

readonly Number - number of milliseconds to wait between each increment.

direction

readonly String - direction the Marquee will move it's contents. Possible values are 'left', 'right', 'up', 'down'.

behavior

readonly String - determines the behavior of the Marquee. Possible values are 'scroll' and 'alternate'. 'scroll' will move the contents of the Marquee in the direction specified by the direction while 'alternate' will alternate between the two possible values: 'left' and 'right' or 'up' and 'down'.

name

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

runId

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

containerDiv

readonly HTMLElement - reference to the Element which is used to contain the Marquee. Note that the ID attribute of the element will be the ID attribute used in the xbMarquee constructor with the string 'container' appended. This ID can be used to style the presentation of the container of the Marquee using CSS.

div

readonly HTMLElement - reference to the Element which is to represent the Marquee. Note that the ID attribute of the element will be the ID attribute used in the xbMarquee constructor. This ID can be used to style the contents of the Marquee using CSS.

styleObj

readonly Object - reference to either the the Style object for the Marquee.

For DOM HTML and DOM CSS Compatible browsers such as Mozilla and Internet Explorer this is a reference to the Marquee's HTMLElement's CSS style object. object

For Netscape Navigator 4, this is a reference to the Marquee's Layer object.

html

readonly String - contains Marquee HTML content.

isHorizontal

readonly Boolean - true if marquee orientation is horizontal (left,right).

onmouseover

Object - reference to mouseover event handler function or null if none exists. This function is called as a method of the xbMarquee object whenever the mouse enters the marquee.

onmouseover

Object - reference to mouseout event handler function or null if none exists. This function is called as a method of the xbMarquee object with the event object as argument whenever the mouse exits the marquee.

onclick

Object - reference to click event handler function or null if none exists. This function is called as a method of the xbMarquee object with the event object as argument whenever the user clicks on the marquee. Not supported by Netscape 4.x.

onstart

Object - reference to start event handler function or null if none exists. This function is called as a method of the xbMarquee object with no arguments when the behavior is set to scroll and whenever the marquee resets it's position to it's starting position. Note that start is not fired when the start method is called.

onbounce

Object - reference to bounce event handler function or null if none exists. This function is called as a method of the xbMarquee object with no arguments when the behavior is set to alternate and whenever the marquee changes direction.

Methods

xbMarquee(String id, String height, String width, Number scrollAmount, Number scrollDelay, String direction, String behavior, String html)

Constructs an instance of the xbMarquee class.

Arguments: String id - ID to be assigned to the marquee.

String height - height of Marquee. May include units such as 'px', 'em', or '%'. Note that Netscape Navigator 4 currently is not supported when using units other than pixels ('px').

String width - width of Marquee. May include units such as 'px', 'em' or '%'. Note that Netscape Navigator 4 currently is not supported when using units other than pixels ('px').

Number scrollAmount - number of pixels to shift Marquee contents.

Number scrollDelay - number of milliseconds to wait between each shift.

String direction - one of 'left', 'right', 'up', or 'down'.

String behavior - one of 'scroll', or 'alternate'.

Returns: nothing

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

start()

Returns: Nothing

This method starts the Marquee animation. This method should be called in a page's onload event handler in order to make certain that all positions have been initialized in the elements created during the xbMarquee's construction.

stop()

Stops the Marquee's animation.

Arguments: None

Returns: Nothing

setInnerHTML(String html)

Sets the xbMarquee's content.

Arguments: String html containing markup to be used as the new content of the xbMarquee.

Returns: Nothing

Note: Only supported by Gecko and Internet Explorer 5+.

Examples

Download. examples.zip

These examples illustrate the variety of uses for xbMarquee. Using xbMarquee you can create left or right horizontal scrollers, up or down vertical scrollers, scrollers which react to mouseover, mouseout and click events as well as react to changing states, scrollers in different languages (left to right languages and right to left languages), scrollers which load content from external javascript files and scrollers which automatically are updated from external HTML documents whenever they are refreshed.

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

Support for Examples. The best support is found in Netscape Gecko based browsers such as Netscape 6.2.3, Netscape 7 and CompuServe 7. Internet Explorer 5+/Windows provides good support while Internet Explorer 5/Macintosh has major limitations. Netscape 4.x's has several limitations while Opera is no longer supported except for static display in a DIV. Please test the different examples in each of the browsers you wish to support and make your design decisions accordingly.

General Examples

Example 1. Tests in Quirks Mode

These tests illustrate the behavior of xbMarquee using each of the possible directions (up, down, left, right) and each possible behavior (scroll, alternate). Use these tests to test how well a particular browser supports the basics of xbMarquee.

Example 2. Tests in Standards Mode

Example 3. Basic Example

Illustrates the basics of using xbMarquee.

Example 4. Using Event Handlers

Example 5. Using CSS to Style xbMarquee

Example 6. Using Percentages in Height and Widths

Example 7. Combine Multiple Marquees into single page

Example 8. Marquees in IFRAME/ILAYERs

Example 9. Dynamic Content in xbMarquee.

Note that this example is only supported by Gecko/All Platforms and Internet Explorer 5.5/Windows.

Example 10. Load xbMarquee content from an external Javascript file.

Example 11. Automatic refreshing of xbMarquee content from an external file without reloading page.