Export (0) Print
Expand All

How to Fly Text in DHTML

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

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, updownleft, or right). marquee is currently supported only in 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 Microsoft Internet Explorer 4.0, see About Element Positioning.

This article is divided into the following sections:

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.
    
    <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.

    Click to view sample.

    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.

    
    <STYLE>
    <!-- 
        :
    LI.yellow {font-size: 25pt; font-weight:600; font-family: Arial,Helvetica; color: gold;  
        margin-top:.2in; margin-bottom: 0.2in;
        margin-left:0.5in; margin-right:0.5in;
        }
        :
    -->
    </STYLE>
    
       
    
    

    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.

    
    function FlyFromTop (oDiv,stopY)
    {
        oDiv.style.pixelTop += 10;
        if (oDiv.style.pixelTop >= stopY) 
            oDiv.style.pixelTop = stopY;
        else
        {
            copyDiv = oDiv;
            copyY   = stopY;
            window.setTimeout ("FlyFromTop (copyDiv,copyY);", 10);
        }     
    }
    
    

    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.

    Click to view sample.

Related topics

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

 

 

Show:
© 2014 Microsoft