<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.
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.
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.
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 dedtined on a case by case basis.
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.
Using CSS rule direction: rtl; will enable right to left langauge xbMarquees. Please see the examples below for more details.
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
readonly Number - height of the Marquee in pixels
readonly String - Unit used in constructor for height argument. If not specified, defaults to 'px'.
readonly Number - width of the Marquee in pixels.
readonly String - Unit used in constructor for width argument. If not specified, defaults to 'px'.
readonly Number - number of pixels to scroll Marquee contents during each increment.
readonly Number - number of milliseconds to wait between each increment.
readonly String - direction the Marquee will move it's contents. Possible values are 'left', 'right', 'up', 'down'.
readonly String - dedtines 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'.
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.
readonly Number - Timer ID for the animation. Returned by setTimeout.
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.
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.
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.
readonly String - contains Marquee HTML content.
readonly Boolean - true if marquee orientation is horizontal (left,right).
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.
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.
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.
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.
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.
Constructs an instance of the xbMarquee class.
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'.
nothing
Gecko/Netscape 6+, Internet Explorer 4+, and Netscape Navigator 4.
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.
Stops the Marquee's animation.
None
Nothing
Sets the xbMarquee's content.
String html containing markup to be used as the new content of the xbMarquee.
Nothing
Only supported by Gecko and Internet Explorer 5+.
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.
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.
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.
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.
Illustrates the basics of using xbMarquee.
Note that this example is only supported by Gecko/All Platforms and Internet Explorer 5.5/Windows.
xbMarquee using BIDI CSS direction:rtl; for use in right to left languages such as Hebrew and Arabic.
Gecko based browsers are the only ones which currently support using right to left direction via CSS combined with positioning.
Basic xbMarquee.
xbMarquee which loads content from an external JavaScript file.
xbMarquee which scrolls a table of links vertically with Mouse Over pausing.