Dynamic HTML

Dynamic HTML is a set of innovative features in Microsoft® Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a document, Dynamic HTML gives authors the ability to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects.

With Dynamic HTML, you can easily add effects to your documents that were previously difficult to achieve. For example, you can:

Hide text and images in your document and keep this content hidden until a given time elapses or the user interacts with the page.
Animate text and images in your document, independently moving each element from any starting point to any ending point, following a path that you choose or that you let the user choose.
Create a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.
Create a form and then instantly read, process, and respond to the data the user enters in the form.

Dynamic HTML achieves these effects by modifying the current document and automatically reformatting and redisplaying the document to show changes. It does not need to reload the document or load a new document, or require a distant server to generate new content. Instead, it uses the power of the user's computer to calculate and carry out changes. This means a user does not have to wait for text and data to complete time-consuming roundtrips to and from a server before seeing results. Furthermore, Dynamic HTML does not require additional support from applications or embedded controls to carry out changes. Typically, Dynamic HTML documents are self-contained, using styles and a little script to process user input and directly manipulate the HTML tags, attributes, styles, and text in the document.

The HTML elements, attributes, and styles in Dynamic HTML are based on existing HTML and cascading style sheets (CSS) specifications. Users can view your documents whether they use Internet Explorer version 4.0 or some other browser. Naturally, the dynamic and interactive features that you add to your documents may not be fully functional when viewed with a browser that does not support Dynamic HTML. But Dynamic HTML is designed to "degrade gracefully"—if you follow some basic guidelines, the content of your document can be viewable in other browsers.

Dynamic HTML works well with applications, ActiveX® Controls, and other embedded objects. You can use existing applications and controls, or you can create new ones that specifically take advantage of the features of Dynamic HTML. Applications and controls work best when you rely on them to do computationally difficult tasks, and use Dynamic HTML to display output and process user input. For example, you can create a document that lets the user query, display, and modify the content of a large, server-based database by combining the data binding features of Dynamic HTML with a data source object. The data source object retrieves and sets data in a database, and Dynamic HTML does the rest: processing user queries, displaying the data, and carrying out the necessary interaction with the object.

In short, Dynamic HTML eliminates the shortcomings of previous browser technologies. Authors can create innovative Web sites, whether on the Internet or an intranet, without having to sacrifice performance for interactivity and special effects. Not only does Dynamic HTML enhance the user's perception of your documents, it also improves server performance by reducing requests to the server and, subsequently, server load.

The following topics explain Dynamic HTML in more detail and introduce you to the topics in this section that will help you begin using Dynamic HTML.

Microsoft is working with Internet standards bodies such as the W3C (World Wide Web Consortium) to provide the best standards-based solutions that make the Web a better open environment for building efficient and interactive multimedia content. Dynamic HTML represents the next step in that effort—all the HTML and CSS extensions for Dynamic HTML conform to W3C specifications or have been submitted to the W3C for consideration. Microsoft will enhance future versions of Internet Explorer to conform to future specifications recommended by the W3C.

Dynamic Styles

Dynamic styles are a key feature of Dynamic HTML. By using styles and style sheets, you can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep your documents small and the scripts that manipulate the document fast.

The object model gives you programmatic access to styles. This means you can change inline styles on individual elements and change style rules in a document's cascading style sheets (CSS) using simple script-based programming. These scripts can be written in JScript® (compatible with ECMA 262 language specification) or Visual Basic® Scripting Edition (VBScript)

Inline styles are CSS style assignments that have been applied to an element using the STYLE attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, if you want to highlight the text in a heading when the user moves the mouse over it, you can use the heading's inline style to enlarge the font and change its color, as in the following simple document:

<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function doChanges() {
    window.event.srcElement.style.color = "green";
    window.event.srcElement.style.fontSize = "20px";
}
</SCRIPT>
<BODY>
<H3 ID=heading onmouseover="doChanges()" STYLE="color:black;font-size:18">Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort.
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In the above example, the process (also known as an event handler) that responds when the onscreen cursor moves over an HTML tag that contains an onmouseover statement receives control when the user first moves the mouse into the heading (known as an event). The handler uses the srcElement property of the event object to determine which element is the source of the event (in this case, the H3 element). It then uses the color and fontSize properties of the style object for the element to change the color and font size. Setting these properties changes the CSS color and font-size attributes given in the STYLE attribute for the heading, and the browser immediately updates the onscreen text to show these new attribute values.

By using styles, you can create a simple document, such as the following, in which all items in a bulleted list are hidden until the user clicks the mouse.

<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function showMe() {
    MyHeading.style.color = "red";
    MyList.style.display = "";
}
</SCRIPT>
<BODY onclick="showMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort. Just click and see!
<UL ID=MyList STYLE="display:none">
<LI>Change the color, size, and typeface of text
<LI>Show and hide text 
<LI>And much, much more
</UL>
<P>And this is just the beginning!
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In the above example, the CSS display attribute is set to "none", causing the UL list to be hidden from view. When the user clicks the document, the event handler clears the value of this attribute, making the browser display the list onscreen. Notice how any content that comes after the list shifts down to accommodate the new text rendering.

Dynamic styles are based on the W3C Recommendation for Cascading Style Sheets (CSS) specification for static style sheets. For a list of topics that describe and explain dynamic styles in full detail, see Dynamic Styles.

Dynamic Content

With Dynamic HTML, you can change the content of a document after it is loaded. Internet Explorer gives you a rich set of properties and methods to dynamically construct and alter documents, from inserting and deleting elements to modifying the text and attributes in individual elements.

The Dynamic HTML object model gives you access to all elements in the document. Consider the following simple document. You can replace and change elements as well as change colors and text by using a few lines of script.

<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
    MyHeading.outerHTML = "<H1 ID=MyHeading>Dynamic HTML!</H1>";
    MyHeading.style.color = "green";
    MyText.innerText = "You can do the most amazing things with the least bit of effort.";
    MyText.align = "center";
    document.body.insertAdjacentHTML("BeforeEnd", "<P ALIGN=\"center\">Just give it a try!</P>");
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere on this page.</P>
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

When the user clicks on the page above, the script replaces the H3 element with an H1 element, centers the paragraph, and inserts a new paragraph at the end of the document. Using script in this way, you can add, delete, and replace any elements and text in the document.

For a list of topics that describe and explain dynamic content in full detail, see Dynamic Content.

Positioning and Animation

Positioning is the ability to place an HTML element at a specific point in a document by assigning an x- and y-coordinate and a z-plane to that element. This means you can place elements—images, controls, and text—exactly where you want them and achieve special, overlapping effects by defining in what order elements at the same point should be stacked atop one another.

Positioning is an extension of cascading style sheets. This means that you set the position of an element by setting the appropriate CSS attributes for that element. The following simple document shows how you can set the absolute position of an image.

<HTML>
<HEAD><TITLE>Positioning</TITLE>
<BODY>
<H3>Welcome to Dynamic HTML!</H3>
<P>With positioning, you can place images exactly where you want them, even behind text and other images.
<IMG STYLE="position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif">
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In the preceding example, the image is placed at the top left corner of the document. Setting the z-index attribute to -1 causes the image to be placed behind the text on the page.

Internet Explorer 4.0 supports positioning and animation of elements even after a document has been loaded. Because the object model gives you access to styles and style sheets, you can set and change the position of an element as simply as you set and change its color. This makes it especially easy to change the position of elements based on how the user is viewing the document, and even to animate the elements. For animation, all you need is to slightly modify the position of an element on some interval. For example, the following document presents an image that glides across the top of the document and comes to rest at the upper-left corner.

<HTML>
<HEAD><TITLE>Dynamic Positioning</TITLE>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide()
{
    Banner.style.pixelLeft = 
    document.body.offsetWidth;
    Banner.style.visibility = "visible";
    id = window.setInterval("Glide()",50);
}
function Glide()
{
    Banner.style.pixelLeft -= 10;
    if (Banner.style.pixelLeft<=0) {
        Banner.style.pixelLeft=0;
        window.clearInterval(id);
    }
}
</SCRIPT>
<BODY onload="StartGlide()">
<H3>Welcome to Dynamic HTML!</H3>
<P>With dynamic positioning, you can move images anywhere in the document even while the user views the document.
<IMG ID="Banner" STYLE="visibility:hidden;position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif">
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In this example, the StartGlide function is called when the document is loaded. The function sets the absolute position of the Banner image to the top and far right edge of the document body, shows the image, and starts an interval. The Glide function is called repeatedly in 50-millisecond intervals. The function moves the image to the left by 10 pixels, and when the image is finally at the left edge, it cancels the interval.

Dynamic positioning has many uses in consumer and business applications. By combining dynamic styles, positioning, transparent images, and transparent ActiveX Controls, you can present a rich set of animation effects in your documents.

Dynamic positioning and animation is based on the W3C Working Draft on Positioning HTML with Cascading Style Sheets and will be adapted as needed to conform to the final recommendation. Documents that use positioning will be compatible with browsers that support this standard.

For a list of topics that describe and explain CSS positioning in full detail, see Positioning.

Filters and Transitions

Internet Explorer 4.0 supports an extensible architecture that enables you to specify filters and transitions using CSS properties. Visual filters can be used to apply visual effects to an element without requiring any scripts. The syntax is:

filter: filter_name( param1, param2, ...)

Transitions are effects that can be applied when changing the display of an element—switching from one image to another, for example. Both interpage transitions and transitions on specific elements within a page are supported. Transitions are most commonly seen in "slide show" presentations. Filters are effects (such as text drop shadows) that can be applied to content on Web pages. In addition to the set of standard filters and transitions included in Internet Explorer 4.0, the standard filters and transitions can be supplemented by additional third-party filters and transitions. For more information on filters, see Creating Multimedia Effects with Visual Filters and Transitions.

Font Download

Internet Explorer 4.0 supports the use of dynamically downloaded fonts. Using the @font-face style attribute, a document can reference a font that is automatically downloaded, used for the page only, and discarded once the page is no longer displayed. The following example shows the use of downloaded fonts.

<HTML><HEAD>
<STYLE>@font-face {font-family:comic;0 src:url(http://abc.domain.com/fonts/comicbold.eot);}
</STYLE>
</HEAD>
<BODY>
<p style="font-family:comic;font-size:18pt">this line uses the @font-face style element to display this text using the Comic Sans MS font in 18-point size and bold.
<p>
</BODY></HTML>

Data Binding

Data binding is a feature of Dynamic HTML that lets you easily bind individual elements in your document to data from another source, such as a database or comma-delimited text file. When the document is loaded, the data is automatically retrieved from the source and formatted and displayed within the element.

One very practical way to use data binding is to automatically and dynamically generate tables in your document. You can do this by binding a TABLE element to a data source. When the document is viewed, a new row is created in the table for each record retrieved from the source, and the cells of each row are filled with text and data from the fields of the record. Because this generation is dynamic, the user can view the document even while new rows in the table are being created. Additionally, once all the table data is present, you can manipulate the data, such as sorting or filtering, without requiring the server to send additional data. The table is simply regenerated, using the previously retrieved data to fill the new rows and cells of the table.

Another practical use is to bind one or more elements in the document to specific fields of a given record. When the document is viewed, the elements are filled with text and data from the fields in that record, sometimes called the "current" record. A simple example is a form letter in which the name, e-mail address, and other details about an individual are filled from a database. To adapt the letter for a given individual, you simply specify which record should be the current record. No other changes to the letter are needed.

Yet another practical use is to bind the fields in a form to fields in a record. Not only can the user view the content of the record, but the user can also change that content by changing the settings and values of the form. The user can then submit these changes so that the new data is uploaded to the source—for example, to the HTTP server or database.

To provide data binding in your documents, you must add a data source object to your document. This invisible object is simply an ActiveX control or Java applet that knows how to communicate with the data source. Microsoft provides two data source objects with Internet Explorer 4.0: one to access comma-delimited data in text files and another to access SQL data in SQL Server and other ODBC sources. Additional data source objects, such as a JDBC data source, will also be available from Microsoft and third parties.

The following simple document shows how easy it is to bind to a data source. When viewed, this document displays the first three fields from all the comma-delimited records of the file "sampdata.csv" in a clear, easy-to-read table.

<HTML>
<BODY>
<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID=sampdata>
   <PARAM NAME="DataURL" VALUE="sampdata.csv">
   <PARAM NAME="UseHeader" VALUE="True">
</OBJECT>
<TABLE BORDER=1 DATASRC="#sampdata">
<THEAD>
<TR><TH>First Field<TH>Second Field<TH>Third Field
<TBODY>
<TR><TD><SPAN DATAFLD=A></SPAN><TD><SPAN DATAFLD=B></SPAN><TD><SPAN DATAFLD=C></SPAN>
</TABLE>
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

For a list of topics that describe and explain data binding in full detail, see Data Binding.

Dynamic HTML Object Model

The object model is the foundation of Dynamic HTML, providing the interface that allows scripts and components to access Dynamic HTML features.

Using the object model, you can access and manipulate virtually anything within the document. The HTML elements in the document are available as individual objects, meaning you can examine and modify an element and its attributes by reading and setting properties and by calling methods. The text is available through properties and methods on the elements.

The object model also makes user actions, such as pressing a key and clicking the mouse, available as events. You can intercept and process these and other events by creating event handler functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the object model to change the document.

The following simple HTML document shows how you can use the object model to modify a document. This document changes the color of the heading and adds a line of text when the user clicks the mouse in the document.

<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
    MyHeading.style.color = "green";
    MyText.innerText = "You can do the most amazing things with the least bit of effort.";
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere in this document.</P>
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The preceding example contains an event handler, named changeMe, that processes mouse clicks for the document. The handler uses the all collection of the document object to pick out the H3 and P elements using their ID values. It changes the color of the heading by setting the color property of the style object for that element. It replaces the text in the paragraph by setting the innerText property.

The object model is a superset of the JavaScript object model found in Netscape Navigator. This means that portions of the model are compatible with other browsers, even if they do not support Dynamic HTML. By following basic guidelines, you can write scripts that take full advantage of the object model when run in Internet Explorer and that provide reasonable results when run in browsers that do not support Dynamic HTML.

For lists of topics describing important aspects of the object model, see Working with Windows, Frames, and Dialog Boxes; Scripting with Elements and Collections; and Understanding the Event Model.

For a complete listing of the objects, properties, methods, collections, and methods of the object model, see DHTML References.