How to Fly Text in DHTML

With dynamic positioning, it is possible to create simple animated

effects, such as flying text, by manipulating the position of elements
on a page over time. The use of flying text is fairly common on the
Internet, usually to draw attention to a piece of information on a page
—like to announce a new version of a product and prompt the user to
download it. Another common use for flying text is in slide show
presentations. Each main bullet point can appear independently of
others, flying in from the right, for example, and setting the animation
to occur automatically or on a mouse click.

The MARQUEE object, with the BEHAVIOR attribute set to slide,

provides a similar functionality, scrolling text in the direction specified
in the DIRECTION attribute (that is, up, down, left, or right). marquee is
currently supported only in Microsoft Internet Explorer and is limited to
straight vertical and horizontal scrolling, whereas flying text through
positioning gives the Web author complete freedom to move text
around.

This article demonstrates both ways to implement flying text through

the marquee element and through Cascading Style Sheets (CSS)
positioning. To better understand positioning in Dynamic HTML
(DHTML), as well as the CSS object model in Internet Explorer 4.0, see
About Element Positioning.

This article is divided into the following sections:

• Flying Text with MARQUEE

• Flying Text Using Dynamic Positioning
• Related Topics

Flying Text with MARQUEE

Implementing flying text with the marquee element in Internet
Explorer is a very simple process.

1. Enclose the text you want to fly in <MARQUEE> and

</MARQUEE> tags.
The MARQUEE element takes HTML-formatted text between the
start and end tags.

<MARQUEE behavior=slide>

<UL>

<LI class=yellow>Use Dynamic HTML to differentiate your

content

and create compelling Web sites.</LI>

</UL>

</MARQUEE>

2. Define the flying area using the WIDTH and/or HEIGHT

attribute(s), depending on the flying direction specified. Positioning
the marquee element on the page using the position, top, and left
CSS attributes might also be appropriate at this point.

Note For flying horizontally (DIRECTION="LEFT" or

DIRECTION=" RIGHT"), the HEIGHT attribute seemingly gets
ignored and, as such, need not be specified. Regardless of the
HEIGHT specified, only one line of text is scrolled. If multiple lines of
text need to be scrolled together horizontally, insert line breaks
using the br element.

<MARQUEE WIDTH="700" STYLE="position:absolute; top: 180"

... DIRECTION="left">

<UL>

<LI class=yellow>Use the Document Object Model (DOM)<br>

to create interactive documents.

</UL>

</MARQUEE>
 3. Specify all other appropriate attributes to control flying speed and
number of times to scroll.

4. <MARQUEE WIDTH="700" STYLE="position:absolute; top: 180"

LOOP=1 SCROLLAMOUNT=10 SCROLLDELAY=20 behavior=slide

DIRECTION=left>

Click the following Show Me button to see a flying text sample that
uses the marquee element. The sample is from a slide show
presentation and works best on an 800 x 600 display, with a full-
screen browser window.

Show Me
Implementing the preceding steps in a page causes text to fly as
soon as the page comes up. (Click the Show Me button above to see
how this works.) However, this might not always be appropriate,
because sometimes you might want to make the text fly on demand
—for example, on a mouse click or on a timer, as in a slide show
presentation. The way to do this is through the marquee object's
start and stop methods, as illustrated in the following code.

<SCRIPT>

function window.onload()

Marquee1.stop(); // set marquee to stop initially

function document.onclick()

Marquee1.start(); // Marquee1 is the ID of the MARQUEE

</SCRIPT>

Flying Text Using Dynamic Positioning

Implementing flying text with CSS positioning, although simple,
involves a little more work than with the marquee element, because
you have to manipulate the position of the element yourself.

The following steps outline this process.

1. Position the elements on the page.

It is best to do this with the rest of the elements laid out on the
page, so that you can visualize where everything fits. This can be
done with the help of style sheets. The following sample defines a
global style sheet with a style element, specifying the fonts, colors,
and margins to be used.

1. Hide Example

2. <STYLE>

3. <!--

4. :

5. LI.yellow {font-size: 25pt; font-weight:600; font-family: Arial,Helvetica; color:

gold;

6. margin-top:.2in; margin-bottom: 0.2in;

7. margin-left:0.5in; margin-right:0.5in;

8. }

9. :

10. -->

11. </STYLE>

12.

When positioning elements, decide whether to use absolute or

relative positioning. Static position, the default, leaves the object to
flow with the rest of the document. Relative positions the element at
an offset from its normal position in the flow. Absolute removes the
object from the flow, allowing you to specify a fixed location for the
element.

With the style sheet defined above, the following sample uses
relative positioning—the text is positioned somewhere near the
element's position in the document (that is, to the left, right, top, or
bottom). The sample uses a div element and sets the appropriate
CSS attributes for the text block. Note that the visibility property is
initially set to hidden, so that the text is not visible until flown in.
(This might not be necessary in every case, although it is
recommended.)

<DIV ID=Text1 style="position:relative; visibility: hidden">

<LI CLASS=yellow>Use Dynamic HTML to differentiate your

content and

create compelling Web sites

</DIV>

2. Calculate initial position for flying.

When the destination location is determined in Step 1, it is time to

set up the element for flying. Position the element on the edge of
the screen opposite the flying direction—for example, to fly an
element right to left, position the element on the right edge of the
screen. Place the element just on the edge of the screen—not on
some random coordinate offscreen—so that the text is visible on the
page as soon as it flies in.

The following sample flies the first block of text vertically, from the
top down, and calculates the initial y-coordinate position for the
element as shown below. For more information about how to access
the dimension and location of elements on the page through the
document object model, see Measuring Element Dimension and
Location.

Text1.style.pixelTop = document.body.offsetTop

- Text1.offsetTop

- Text1.offsetHeight;

</SCRIPT>

Initializing the position can be done either on the onload event or

when just about ready to fly the text.
 3. Set the visibility property to visible.

Recall that this property was initialized to hidden in Step 1.

Text1.style.visibility= "visible";

4. On a timer, call the function to fly the text in.

The timer is set up using setTimeout or setInterval.

window.setTimeout ("FlyFromTop (Text1,0);",10);

5. Fly the text in, adjusting the pixelTop or the pixelLeft property for
flying top to bottom or left to right, respectively.

The following function takes a pointer to the object being flown and
also a stop value. The stop value indicates the pixelTop value at
which flying stops.

Show Example

Three other functions are similarly defined in the sample—to fly

from right, to fly from left, or to fly from bottom.

Click the following Show Me button to see a flying text example that
uses dynamic positioning. The sample is derived from a slide show
presentation and works best on an 800 x 600 display, with a full-
screen browser window.

Show Me

Related Topics

• About Element Positioning

• Measuring Element Dimension and Location
• How to Animate a Sequence of Elements