Book/Chapter 9
Preview/

About   Part I - HTML and Scripting Overview of HTML and CSS Fundamentals of HTML Scripting Dynamic HTML Event Model Programming the Browser Window Window and Frame Management   Part II - Document Structure The HTML Document Programming Element Collections Scripts and Elements Scripting Individual Elements Forms and Intrinsic Controls   Part III - Dynamic Styles and Animation Dynamic Styles Dynamic Positioning   Part IV - Dynamic Content Dynamic Content User Selection and Editing Data Binding with HTML   Inside Dynamic HTML Order Now from Amazon.com

Inside Dynamic HTML Microsoft Programmers Series Chapter 9: Scripting Individual Elements Previous Section: Programming the Image and Map Elements Programming the Marquee Element Internet Explorer 3.0 supported a simple Marquee element for scrolling text horizontally. In Internet Explorer 4.0, the Marquee element was enhanced with a complete object model plus the ability to support and render any HTML code. This new Marquee control can even contain controls, which respond appropriately to mouse clicks and keyboard input as they move by. Other enhancements include the ability to scroll in any direction--left, right, up, or down. A marquee can display one of three behaviors alternate, scroll, and slide. In alternate mode, the marquee's contents move back and forth or up and down, always remaining on the screen. In scroll and slide modes, the contents move in one direction. They may appear from the right marquee border, for example, and move left across the screen. In scroll mode, the motion does not repeat until after all of the contents have scrolled onto and off the marquee. In slide mode, the motion repeats sooner, after the last of the contents have scrolled onto the marquee. With any of these three behaviors, you can specify a finite number of repetitions or allow the marquee to continue animating until the user jumps to another page. Marquee Animation Properties The marquee attributes are exposed as properties that can be dynamically modified. For some of these properties, assigning a new value while the marquee is running causes the marquee to restart its animation; with others, it does not. The following table describes the attributes and how changing them affects the marquee. Attribute/Property Restarts Marquee? Description behavior Yes Specifies the alternate, scroll, or slide behavior for the marquee. The default value is scroll. direction No Specifies the direction of motion. All four directions are supported: left, right, up, and down. The default value is right. height Yes Specifies the physical height of the marquee. loop Yes Specifies the number of times for the animation to repeat. The default value is infinite. scrollAmount No Specifies the number of pixels to move each time the contents are redrawn. The default value is 6. scrollDelay No Specifies the number of milliseconds between times the contents are redrawn. The default value is 85. trueSpeed No Specifies whether the marquee should catch up with any skipped cycles. The default value is false, which causes the marquee to act as it does in Internet Explorer 3.0. width Yes Specifies the physical width of the marquee. Marquee Events The Marquee element supports all the standard mouse and keyboard events. All elements contained within the marquee also continue to fire their respective events. The following table describes the events that the marquee exposes during the animation. Event Description onstart The marquee is about to begin scrolling. For a marquee in scroll or slide mode, this event fires each time a new animation sequence is about to be initiated. For a marquee in alternate mode, this event fires once at the beginning of the animation. onbounce The marquee animation has reached the end and will reverse itself. This event fires when the Marquee's behavior property is set to alternate. onfinish The marquee has finished scrolling. Marquee Methods The Marquee element exposes two methods for starting and stopping the animation: start and stop. These methods can be used to manually control the scrolling of a marquee. Using the stop and start methods, the following code allows the user to stop and start a marquee by holding down and releasing the mouse button over the marquee. By stopping the marquee, the user can read its contents more easily. The marquee's title attribute is displayed as a ToolTip when the mouse is held over the Marquee elementRun Sample. <HTML>    <HEAD>       <TITLE>Marquee stop and start Methods</TITLE>    </HEAD>    <BODY>       <MARQUEE TITLE="Hold down the mouse button to stop the marquee."             ONMOUSEDOWN="this.stop();"             ONMOUSEUP="this.start();">          <H1>Test Marquee</H1>          <P>Clicking the mouse button and holding it down             stops the marquee from scrolling.</P>          <INPUT TYPE=BUTTON VALUE="Demo Button"             ONCLICK="alert(`clicked');">       </MARQUEE>    </BODY> </HTML> Next Section: Programming the Object Element

© 1997-98 InsideDHTML.com, LLC. All rights reserved.