NOTE : This element is currently only supported by the Microsoft Internet Explorer. For authors writing specifically for Netscape, a marquee effect can be obtained through the use of a Java applet, JavaScript script, or by using a multi-block GIF 'banner' (these can be constructed using the GIF construction kit).
The <MARQUEE>
element allows the author to create a region of text that can be made to scroll across the screen (much like the Windows Marquee screen saver)
E.g. :
<MARQUEE>This text will scroll from right to left slowly</MARQUEE>
appears thus:
NOTE : If you are not viewing this page with Internet Explorer then the example <MARQUEE>
s will not display properly.
Marquees can be aligned to the left or right hand side in the HTML document and have a variety of attributes to control them.
ALIGN="left|right|top|middle|bottom"
This attribute can be set to either LEFT, RIGHT, TOP, MIDDLE
or BOTTOM
and specifies that the text around the marquee should align with the top, middle , or bottom of the marquee.
For example:
<MARQUEE ALIGN=TOP>Hello in browser land.</MARQUEE>Welcome to this page
The text "Welcome to this page'" would be aligned with the top of the Marquee (which scrolls the text "Hello in browser land" across the screen. (NOTE : Until the Marquee width is limited by setting the WIDTH
attribute, then the Marquee will occupy the whole width of the browser window and any following text will be rendered below the Marquee.)
BEHAVIOR="scroll|slide|alternate"
This can be set to SCROLL, SLIDE
or ALTERNATE
. It specifies how the text displayed in the Marquee should behave. SCROLL
(the default) makes the Marquee test start completely off one side of the browser window, scroll all the way across and completely off the opposite side, then start again. SLIDE
causes the text to scroll in from one side of the browser window, then stick at the end of its scroll cycle. ALTERNATE
means bounce back and forth within the marquee.
E.g.
<MARQUEE BEHAVIOR=ALTERNATE>
This marquee will "bounce" across the screen</MARQUEE>
will appear thus :
BGCOLOR="#rrggbb|colour name"
This specifies a background colour for the marquee, either as a rrggbb hex triplet, or as one of the pre-named colours. (See <BODY BGCOLOR>
for more information)
E.g.
<MARQUEE BGCOLOR="#F0F8FF">Nice Background colour!<MARQUEE>
will appear thus :
CLASS="Style Sheet class"
The CLASS
attribute is used to specify the <PLAINTEXT>
as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.
DATAFLD="Data column name"
The DATAFLD
attribute can be used to specify a data column name from the Data source (see DATASRC
) that the <MARQUEE>
is bound to. For more information on the DATAFLD
attribute, see the Data Binding topic.
DATAFORMATAS="HTML|text"
When the <MARQUEE>
element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS
attribute should be set to "TEXT
" or "HTML
" accordingly. with DATAFORMATAS="HTML"
, the data provided for the <BUTTON>
element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS
attribute, see the Data Binding topic.
DATASRC="Data source"
The DATASRC
attribute can be used to specify a data source that the <BUTTON>
is bound to. For more information on the DATASRC
attribute, see the Data Binding topic.
DIRECTION="left|right"
This specifies in which direction the text should scroll. The default is LEFT
, which means scrolling to the left from the right. This attribute can also be set to RIGHT
, which would cause the marquee to scroll from the left to the right.
HEIGHT="value|value%"
This specifies the height of the marquee, either in pixels (HEIGHT=n
) or as a percentage of the screen height (HEIGHT=n%
).
ID="Style Sheet/Scripting identifier"
The ID
attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MARQUEE>
element for scripting purposes. Any <MARQUEE>
element with an ID
attribute can be directly manipulated in script by referencing its ID
attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
HSPACE="value"
This attribute is the same as that for images. It is used to specify the number of pixels of free space at the left and right hand sides of the <MARQUEE>
so that text that flows around the <MARQUEE>
doesn't push up against the sides.
LANG="Language identifier"
The LANG
attribute can be used to specify what language the <MARQUEE>
element is using. It accepts any valid ISO standard language abbreviation (for example "en"
for English, "de"
for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE="Scripting language"
The LANGUAGE
attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MARQUEE>
element. It can accept values of vbscript
, vbs
, javascript
or jscript
. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE
attribute is set.
LOOP="value|-1|infinite"
LOOP=n
specifies how many times a marquee will loop when activated. If n=-1, or LOOP=INFINITE
is specified, the marquee action will loop indefinitely. NOTE : By default, <MARQUEE...>
's will loop indefinitely.
SCROLLAMOUNT="value"
Specifies the number of pixels between each successive draw of the marquee text. That is, the amount for the text to move between each draw.
SCROLLDELAY="value"
SCROLLDELAY
specifies the number of milliseconds between each successive draw of the marquee text. That is, it controls the speed at which text draw takes place.
For example :
<MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I'm fast</MARQUEE>
would render thus
STYLE="In line styling"
As well as using previously defined style sheet settings, the <MARQUEE>
element can have in-line stylings attached to it. For example:
<MARQUEE STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</MARQUEE>
would display the <MARQUEE>
in an 8pt Arial font. See the Style Sheets section for more details about style sheet settings.
TITLE="Informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE
attribute is used for informational purposes. If present, the value of the TITLE
attribute is presented as a ToolTip when the users mouse hovers over the <MARQUEE>
section.
TRUESPEED="Speed flag"
With the TRUESPEED
flag set, all SCROLLDELAY
values are used as specified. If the TRUESPEED
flag is not set, then any values of SCROLLDELAY
of less than 59 mS are rounded to 60mS.
VSPACE="value"
This attribute is the same as that for images. It is used to specify the number of pixels of free space at the top and bottom of the <MARQUEE>
so that text that flows around the <MARQUEE>
doesn't push up against the top or bottom.
WIDTH="value|value%"
This specifies the width of the marquee, either in pixels (WIDTH=n
) or as a percentage of the screen height (WIDTH=n%
).
NOTE :If you wish to set the <FONT>
to be displayed in the <MARQUEE>
, then the <FONT>
declaration needs to be outside the <MARQUEE>
E.g.
<FONT FACE="Comic Sans MS"><MARQUEE>Hello</MARQUEE></FONT>
will appear thus:
Every <MARQUEE>
element in a document is an object that can be manipulated through scripting. Note that scripting of the <MARQUEE>
element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <MARQUEE>
element at all.
<MARQUEE...>
Properties
In addition to the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.), the <MARQUEE>
element also supports the following properties:
behavior
The behavior
property directly reflects, or sets the value of the BEHAVIOR
attribute.
bgColor
The bgColor
property directly reflects, or sets the value of the BGCOLOR
attribute. It takes any valid #rrggbb hex triplet, or any of the possible Colour Names.
clientHeight
The clientHeight
property reflects the height (in pixels) of the contents of the <MARQUEE>
element.
clientWidth
The clientWidth
property reflects the width (in pixels) of the contents of the <MARQUEE>
element.
dataFld
The dataFld
property directly reflects, or sets the value of the DATAFLD
attribute (see above). For more information on the DATAFLD
attribute, see the Data Binding topic.
dataFormatAs
The dataFormatAs
property directly reflects, or sets the value of the DATAFORMATAS
attribute (see above). For more information on the DATAFORMATAS
attribute, see the Data Binding topic.
dataSrc
The dataSrc
property directly reflects, or sets the value of the DATASRC
attribute (see above). For more information on the DATASRC
attribute, see the Data Binding topic.
direction
The behavior
property directly reflects, or sets the value of the BEHAVIOR
attribute.
height
The height
property directly reflects, or sets the value of the HEIGHT
attribute.
hspace
The hspace
property directly reflects, or sets the value of the HSPACE
attribute.
loop
The loop
property directly reflects, or sets the value of the LOOP
attribute.
scrollAmount
The scrollAmount
property directly reflects, or sets the value of the SCROLLAMOUNT
attribute.
scrollDelay
The scrollDelay
property directly reflects, or sets the value of the SCROLLDELAY
attribute.
scrollHeight
The scrollHeight
property reflects the contents of the <MARQUEE>
elements total scrollable height (in pixels).
scrollLeft
The scrollLeft
property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <MARQUEE>
element are totally visible on the screen, the scrollLeft
property is 0, only increasing if the left-most edge of the <MARQUEE>
elements contents are scrolled off the left hand edge of the current viewing window.
scrollTop
The scrollTop
property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <MARQUEE>
element, the scrollTop
property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <MARQUEE>
element are visible, then the scrollTop
property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.
scrollWidth
Like the scrollHeight
property, the scrollWidth
property reflects a value that represents the total scrollable width of the contents of the <MARQUEE>
element.
trueSpeed
The trueSpeed
property directly reflects, or sets the value of the TRUESPEED
flag.
vspace
The vspace
property directly reflects, or sets the value of the VSPACE
attribute.
width
The width
property directly reflects, or sets the value of the WIDTH
attribute.
<MARQUEE...>
Methods
In addition to the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.), the <MARQUEE>
element also supports the following methods:
blur
The blur
event can be used to force the users focus away from the referenced <MARQUEE>
element, firing the onblur
event.
focus
The focus
method can be used to pass the users focus to the referenced <MARQUEE>
element, forcing the onfocus
event to fire.
start
The start
method can be used to start a <MARQUEE>
through scripting.
stop
Unsurprisingly, the stop
method can be used to stop a <MARQUEE>
through scripting.
For example:
<MARQUEE...>
Events
In addition to the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart. Details of these can be found in the standard Dynamic HTML events topics.), the <MARQUEE>
element also supports the following events:
onblur
When the referenced <MARQUEE>
element loses the users focus, the onblur
event is fired.
onbounce
The onbounce
event fires when the <MARQUEE>
'bounces' on the side of the screen. Note that this requires BEHAVIOR="alternate"
set for the <MARQUEE>
. For example, the following <MARQUEE>
will tell you how many times it's 'bounced'
Number of bounces : 0
onfinish
When a <MARQUEE>
finishes its scrolling, it will fire the onfinish
event. Note that <MARQUEE>
's loop indefinitely, unless their LOOP
attributes are set to a value. If the <MARQUEE>
is set to loop indefinitely, the onfinish
event will never fire.
onfocus
When the user passes the focus to any <MARQUEE>
element, the onfocus
event is fired for that element.
onresize
Whenever the <MARQUEE>
is resized (i.e. through scripting, or browser size changes perhaps), the onresize
event fires. Dynamic resizing of the content of the <MARQUEE>
element could be scripted in the onresize
event for example.
onscroll
The onscroll
event occurs whenever the <MARQUEE>
scrolls. Note that for the <MARQUEE>
element, the onscroll
event occurs every time the <MARQUEE>
text scrolls, so depending on the SCROLLDELAY
and SCROLLAMOUNT
settings, there could be a huge amount of onscroll
events fired. For example, the <MARQUEE>
element below counts the number of scrolls. It will only scrolls. To start it, press the Start button. When you're bored of watching the count, press the Stop button.
Number of onscroll
events : 0
onstart
The onstart
event fires when a 'bounce' cycle begins. Note that when a <MARQUEE>
is bouncing (i.e. BEHAVIOR="alternate"
), it fires the onstart
event only once, when it first starts 'bouncing'.
© 1995-1998, Stephen Le Hunte