This section contains overviews and tutorials for Dynamic HTML (DHTML).

Creating Web Sites

About Conditional Comments

This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques. Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

About Mouse Capture

Internet Explorer 5 enables Web authors to design pages that handle mouse events in the same way desktop applications do.

About the DHTML Object Model

The DHTML Document Object Model (DOM) allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server. The DHTML DOM puts sophisticated interactivity within easy reach of the average HTML author.

About the W3C Document Object Model

This document discusses the implementation of the World Wide Web Consortium (W3C) Document Object Model (DOM) interface available in Internet Explorer 5 and later.

Attribute Differences in Internet Explorer 8

Starting with Internet Explorer 8, there is a distinction between the value of an attribute as it is specified by a page author and the representation of the value in the DOM. This distinction can affect the functionality of Web sites originally designed to support older versions of the browser. This article explains the distinction between content attributes and DOM attributes DOM, demonstrates how this distinction impacts Web pages, and shows how to obtain each value using JavaScript.

Building High Performance HTML Pages

The features delivered with Internet Explorer 4.0 and later have helped make the Web a compelling space in which to work and to play. The quantity and complexity of pages as well as the number of consumers of those pages has significantly increased the traffic on the Web. For all the merit that the Web brings to application developers, it introduces a host of problems.

Building Tables Dynamically

This article discusses the structure of HTML tables and explains how to use the DOM to create them. It also compares the benefits of using table-specific methods instead of the more generic DOM methods. The article assumes you are familiar with JavaScript.

Creating Accessible Web Pages With DHTML

This article explains how to create accessible Web pages using DHTML with Internet Explorer.

Cross-Platform Functionality

With Internet Explorer 4.0, content authors can easily create pages that run on all platforms—the 32-bit Windows® platforms, Windows 3.1, Macintosh, and UNIX. In particular, core DHTML and Active Channel functionality are cross-platform.

Defining Document Compatibility

Document Compatibility defines how Internet Explorer renders your Web pages. This article explains document compatibility, how to specify the document compatibility mode for your Web pages, and how to determine the document mode of a Web page.

Detecting Internet Explorer More Effectively

This topic demonstrates how to detect current and future versions of Internet Explorer more effectively.

Faster DHTML in 12 Steps

This article describes how using some DHTML features can affect performance more than others, and it presents tips that will help your pages perform faster.

Finding Text in the Document

You can search for a given string of text in a document by using the findText method on a TextRange object. This method starts the search at the beginning of the range and, if it finds the string, positions the range so that it entirely encloses the string.

How to Add a Shortcut Icon to a Web Page

You can use shortcut icons to display your logo or some other small graphic on the Internet Explorer Favorites menu, address bar, and—starting with Internet Explorer 7—page tabs. They have no special Web server requirements and are a great way to add brand recognition to your Web site.

How to Animate a Sequence of Elements

Dynamic positioning, CSS, and the DHTML DOM, put together, bring animation to the Internet with very minimal code. The manner in which each element in the series appears on the page can vary, from being flown into the page to being gradually faded in using any one of the transition patterns exposed by the filter attribute, or simply made visible through the visibility property of the element.

How to Apply a Transition on an Image

This article demonstrates how to implement a simple transition on an image.

How to Change Text Color Character by Character

This tutorial uses the table container to demonstrate color cycling effects for text.

How to Create a Dynamic Table of Contents

The example provided in this article demonstrates how to create an expandable table of contents, using code that you can reuse without modification.

How To Create a Mouse Capture Context Menu

In this sample, a context menu is created that opens when the user right-clicks a specific object on the Web page.

How To Create a Mouse Capture Drop-down Menu

DHTML menus can be tuned to better respond to mouse activity by coordinating the use of the mouse capture methods and events in Internet Explorer 5 and later. The mouse capture methods setCapture and releaseCapture and the onlosecapture event allow Web authors to create dynamic features that do not interfere with other content on the page.

How to Create an HTML Editor Application

This tutorial describes how to use features found in Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands.

How to Fly Text in DHTML

This article demonstrates both ways to implement flying text through the marquee element and through CSS positioning.

How to Fly Text in Geometric Patterns

This article outlines the basics of how to animate text to move in geometric patterns. Achieving results might take more time at the onset, yet once you have a few routines for calculating different slopes, you can adapt them quickly to generate unique effects.

How to Manipulate Text Effects in Response to Mouse Events

Some DHTML effects require minimal scripting to attain. One such effect, activating text in response to mouse events, is achieved largely through the use of CSS rules and the className property. Creating text effects in this manner yields ease of maintenance and succinct code.

HTML Enhancements in Internet Explorer 8

Internet Explorer 8 includes features designed to more closely support industry standards, such as the HTML 4.01 Specification . This article describes these features, and provides guidance for incorporating them into your Web sites.

Introduction to Dynamic HTML

DHTML is a set of innovative features originally introduced in Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a Web page as the user interacts with it, DHTML enables authors to create visually compelling Web sites without the overhead of server-side programs or complicated sets of controls to achieve special effects.

Introduction to Forms

Forms provide an interface for collecting, displaying, and delivering information, and are a key component of HTML. By providing different controls such as text fields, buttons, and checkboxes, forms can enhance Web pages with a means to exchange information between a client and a server.

Performance Considerations in Internet Explorer

This page provides links and tips for getting extra performance from DHTML, Script, Web Servers, ActiveX Controls, Java Applets, and Plugins.

Scripting with Elements and Collections

Every HTML document consists of a combination of HTML tags and their attributes. These elements define the structure of the document and determine how the content is presented. Using the DHTML Object Model, you can examine and modify these elements and their modifying attributes.

Selecting Objects with JavaScript

This article describes the W3C Selectors API  and how it enables you to use CSS selectors to select objects in JavaScript applications.

Tabbed Browsing for Developers

Tabbed browsing in Internet Explorer 7 affects the DOM and the WebBrowser Control. This topic describes the effects on the DOM, shows how applications hosting the WebBrowser Control can enable tabbed browsing shortcuts, and describes notifications useful to those writing Internet Explorer 7 extensions.

Tips and Tricks

As with any type of programming, writing bug-free, efficient scripts that meet your expectations takes a bit of work. The following sections provide some tips and hints to make that work take less time and go more smoothly.

Understanding the Event Model

An event is a notification that occurs in response to an action, such as a change in state, or as a result of the user clicking the mouse or pressing a key while viewing the document. An event handler is code, typically a function or routine written in a scripting language, that receives control when the corresponding event occurs.

Understanding User-Agent Strings

This topic describes the user-agent string, which identifies your browser and provides certain system details to servers hosting the Web sites you visit. The topic also shows how to view your user-agent string, summarizes tokens used by recent versions of Internet Explorer, and documents registry keys that affect the user-agent string.

Using AutoComplete in HTML Forms

Internet Explorer 5 and later includes an integrated feature called AutoComplete, which helps users quickly enter information into form fields. The AutoComplete innovation in HTML forms safely stores information entered into INPUT_text and INPUT_password fields.

Using IFRAME Elements

In Internet Explorer 5.5 and later, frames are windowless, resulting in greatly improved performance. In addition, Internet Explorer 5.5 and later can now overlap IFRAME elements—also known as inline floating frames—and can make the content inside inline floating frames transparent.

Using the Popup Object

The popup object enables you to create window objects that take full advantage of DHTML.

Using the TextRange Object

Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text manipulation that can be done using a "text range" object.

Working with Windows, Frames, and Dialog Boxes

Internet Explorer creates a window object whenever it opens an HTML document. Because this object is the highest-level object in the object model, you use it to gain access to properties and subobjects in the object model that you need to dynamically access the document content. This article explains how to use the window object, create new window objects, and create special types of window objects.

Content Design and Presentation

About Element Positioning

Internet Explorer supports the ability to position HTML elements in x- and y-coordinates and to overlap elements in planes along the z-axis, which extends toward and away from the viewer in a Web document. These capabilities allow authors to precisely place elements, images, controls, or text on to a web page. By using scripts to manipulate the position coordinates and other dynamic styles, authors can move elements around a page, creating animated effects. The combination of dynamic styles, positioning, transparent Microsoft ActiveX Controls, and transparent images presents authors with a rich set of animation options.

About Font Embedding

Font embedding has long been a feature of Microsoft applications, such as Microsoft Word and Microsoft PowerPoint. It enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. Internet Explorer has supported embedded fonts since Internet Explorer 4.0.

Changing Element Styles

This document shows you how to change the SRC attribute on an iframe element so that the contents of iframe change on the fly. The same example also shows you how to change the background color of the body for the SRC= document of the iframe. The next set of examples shows how to change the class name of the element so that it is associated with a different style sheet.

Controlling Presentation with Measurement and Location Properties In Quirks Mode

DHTML exposes measurement and location properties that you can use to change the size and position of HTML elements on your Web pages. When you understand what these properties are and how they affect elements on a page, you can achieve greater control over the appearance of your Web pages. For example, you can use these properties to design pages that are similar to documents in other applications, such as PowerPoint or Word.

Controlling Presentation with Measurement and Location Properties In Strict Mode

DHTML exposes measurement and location properties that can be used to change the size and position of HTML elements on your web pages. An understanding of these properties and their impact on the elements in a page can help you achieve greater control over the layout of your websites. This article explains how you can use measurement and location properties to control the appearance of a web page that is rendered using the Internet Explorer 7 strict mode.

Enhancing Table Presentation

Internet Explorer 5 gives the author more control over table presentation. Significantly faster rendering is now possible. Using this layout, authors can increase table rendering speeds by several orders of magnitude, particularly for longer, more complex tables.

Introduction to Dynamic Styles

You can dynamically change the style of any HTML element in a document. You can change colors, fonts, spacing, indentation, position, and even the visibility of text. Because the DHTML DOM makes every HTML element and attribute accessible, it is easy to use scripts to dynamically read and change styles.

Introduction to Filters and Transitions

With Internet Explorer 4.0 and above, you can apply various multimedia-style visual effects to your Web page. You can implement these effects in Web pages using CSS properties. By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents. Internet Explorer 5.5 and above supports the richest variety of optimized filters. Most examples in this article require that you have Internet Explorer 5.5 installed.

Managing Style Sheets

Dynamically changing CSS styles that are applied to documents is not limited to the inline styles (styles defined on HTML elements with the STYLE attribute). Global style sheets defined with a LINK or STYLE tag in the HEAD section of the document can be manipulated through script. Manipulating the global style sheet is a powerful way to dynamically change the styles that apply to Web pages.

Measuring Element Dimension and Location

The following section is designed to help Web authors understand how to access the dimension and location of elements on the page through the DHTML Object Model.

Printing and Style Sheets

The style and link elements support the MEDIA attribute, which defines the output device for the style sheet.

Understanding CSS Selectors

The basic building blocks of a CSS style sheet are its style rules. Selectors are used to "select" elements on an HTML page so that they can be styled. Without selectors, there would be no way to determine how the rules should be applied. This article introduces the fundamentals of CSS declaration syntax, to describe how selectors are used.

Quick Reference Guides

Color Table

Colors can be specified in HTML pages in two ways—by using numbers to denote an RGB color value, or by using a color name.

CSS Length Units Reference

This section defines the supported length units for CSS

Language Codes

The following table lists all the possible language codes used to specify various system settings.

Data Storage and Cookies

About DHTML Data Transfer

As of Internet Explorer 5, you have access to an extensive data transfer implementation. For Internet Explorer, data transfer involves writing information to and reading it from the clipboard through a data transfer object. The information transferred includes both the data format and the data itself.

Introduction to DOM Storage

The DOM Storage API includes two related mechanisms for persisting client-side data in a secure manner using the DOM, sessionStorage and localStorage. These objects were introduced in Internet Explorer 8.

Introduction to Persistence

Persistence enables authors to specify an object to persist on the client during the current and later sessions using DHTML behaviors. Persistence allows Internet Explorer 5 and later to retain Web page information, styles, variables, and state.

Persisting Collapsible Table of Contents State

Web pages that employ a collapsible table of contents tend to share a single problem: when a user leaves the page, the table of contents reverts to its original state. For anyone trying to navigate through these nested references, it is frustrating to leave the page and return, only to have to wade through the table of contents again. Persistence behavior provides a solution to this problem.

Persisting Custom and Dynamic Styles

Dynamic and custom styles selected at run time by the user can be persisted when the page is saved as a favorite using the saveFavorite behavior.

Persisting Form Data

Using HTML to design forms comes with some drawbacks, namely the need for a server or client-side script to process the form data. The saveSnapshot behavior can be used to save a Web page and persist the form data directly within the page itself. This allows a larger audience to use Web forms for day-to-day activities without needing a special script to process and deliver the information.

Persisting Session Information

Session information is usually recorded for sites that use multiple pages to accomplish a task, such as virtual shopping carts and advanced search engines. Pages that employ these variables and files can easily swell to a very large size while they juggle delivering a Web page and processing the surrounding scripts. Persistence allows most of this information to be stored on the client, thus decreasing download time and the performance hit to the server's processor(s).

Security Considerations

About Cross-Frame Scripting and Security

With DHTML, content in different windows and frames can interact in powerful ways by scripting with the object model. However, since a browser can simultaneously display unrelated documents in its various windows and frames, certain rules must be enforced to protect data integrity and privacy of information.

About the Pop-up Blocker

The Pop-up Blocker feature in Internet Explorer 6 for Windows XP Service Pack 2 (SP2) protects users from malicious activity that is often hidden behind or initiated by pop-up windows. Designed to give users back control over their Web browsing experience, this feature is on by default, and it blocks script-initiated pop-up and pop-under windows that launch automatically from a Web site. By understanding how the Pop-up Blocker works, you can ensure that important information on your Web site gets noticed, and you can provide your users with a better Web-browsing experience.

About Window Restrictions

In Internet Explorer, scripts can open two different types of windows and can resize and reposition existing windows. Malicious coders have used these script-opened windows and the script-driven window positioning to mislead and deceive users. The Window Restrictions security feature in Internet Explorer 6 for Windows XP SP2 now restricts the opening and placement of windows by script to prevent malicious coders from misleading users. These restrictions include constraints on new Internet Explorer windows created by the window.open method and HTML pop-up windows created by the window.createPopup method, and positioning and sizing of Internet Explorer windows. By understanding Window Restrictions and how they work, you can write your scripts so that your Web pages function as expected.

Security Considerations: Dynamic HTML

This document provides information about security considerations related to DHTML.

Integrating Sites and Services

About Native XMLHTTP

This topic describes the native implementation of Extensible Markup Language / Hypertext Transfer Protocol (XMLHTTP) in Internet Explorer 7.

Connectivity Enhancements in Internet Explorer 8

Internet Explorer 8 contains several important connectivity enhancements that can improve both the performance and functionality of Asynchronous JavaScript and XML (AJAX) and other Web applications. These enhancements include an increase in the maximum number of concurrent connections from a single host, and the addition of connectivity events.

Introducing AJAX Navigations

Internet Explorer 8 introduces AJAX Navigations. These features are designed to help alleviate the frustration of end users with AJAX-enabled Web sites that are not navigable through the Back and Forward buttons, and that do not update the browsing history. With just a few simple lines of script, you can add AJAX Navigations to your Web site, making the navigation of your AJAX-enabled content as smooth and seamless as "traditional" navigation.

Introducing Cross-domain Request

With Cross-domain Request ("XDR") in Internet Explorer 8, developers can create cross-site data aggregation scenarios. Similar to the XMLHttpRequest object but with a simpler programming model, this request, called XDomainRequest, is the easiest way to make anonymous requests to third-party sites that support XDR and opt in to making their data available across domains.

XMLHttpRequest Enhancements in Internet Explorer 8

Internet Explorer 8 enables finer control over AJAX requests. Specifically, developers now have the ability to specify a timeout for the XMLHttpRequest object, which, in combination with the increased number of concurrent connections enabled in Internet Explorer 8, can prevent delays in AJAX applications. An event handler for timeouts has also been added.

Installing a Search Provider and Setting the Default

Internet Explorer 8 extends a rich searching experience by offering users the option to install multiple search providers. As a user installs search providers, each provider has a chance to set itself as the default provider. Internet Explorer 8 has a new mandatory Search Provider Default user experience that keeps the user in control of their preferred search provider.

OpenService Accelerators Developer Guide

In Internet Explorer 8, Accelerators are contextual menu options that can quickly access applications or Web services from any Web page. Users can install Accelerators from the Internet Explorer 8 Service Gallery  or through any Web site that advertises them. Accelerators make it easier to copy information from one Web page to another. This article describes how to define and deploy XML-based Accelerators.

OpenService Specification for Accelerators - Version 0.8

This document covers the minimum properties necessary to enable the publication and consumption of an Accelerator.

Search Provider Extensibility in Internet Explorer

Starting with Internet Explorer 7, the Instant Search box provides an AutoComplete feature so users can search for similar search terms used in previous searches. Internet Explorer 7 also enables users to add multiple search providers. Search improvements in Internet Explorer 8 focus on helping users search by significantly improving the Instant Search box drop-down menu and supporting search suggestions.

XML Search Suggestions Format Specification

Internet Explorer 8 search suggestions are a service that search providers can support which allow the user to receive suggestions for a search query. XML suggestions from a search provider can support text suggestions or visual suggestions.

Testing Web Sites

Debugging HTML and CSS with the Developer Tools

Internet Explorer 8 provides enhanced Developer Tools to help you research and resolve HTML-, CSS-, and Microsoft JScript-related problems. This article is focused on the HTML and CSS tools of the Developer Tools.

Debugging Script with the Developer Tools

The Developer Tools feature of Internet Explorer 8 offers a built-in, lightweight JScript debugger that enables developers to set breakpoints and to step through client-side JScript code without leaving the browser. This document outlines the high-level features of the JScript debugger.

Web Developer Tools

This section lists the articles for Developer Tools.

Developer Tools Keyboard Shortcuts Reference

Internet Explorer 8 Developer Tools help you to quickly research and resolve HTML-, CSS-, and JScript-related problems. This article provides a list of Developer Tools shortcut keys that will help you accomplish these tasks even faster. The keys are listed below by feature set. A comprehensive list of all shortcut keys is also provided for easy lookup and reference.

Developer Tools Tutorials

The Developer Tools tutorials will show you how to use the Developer Tools to inspect and resolve Web page issues. To establish a context for these scenarios, a starting Web page is provided. Each tutorial is focused on resolving a specific issue in order to make this Web page better, and is designed to provide a simple and safe environment for experimenting with the many features of the Developer Tools.

Developer Tools User Interface Reference

This article is designed to give you a quick reference to the commands and menus available in the Developer Tools interface commands. The goal is to help you quickly identify main areas of the interface and to quickly find your way around, ultimately improving your productivity. Each element of the interface is identified and a short description of what it does is provided.

Discovering Internet Explorer Developer Tools

Every installation of Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug JScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem on-the-fly. This article introduces you to key features of the Developer Tools.

Internet Explorer Application Compatibility

This document is designed to be a companion to the Microsoft Application Compatibility Toolkit (ACT) (which is part of the Internet Explorer Compatibility Test Tool). The Internet Explorer Compatibility Test Tool logs information about your browsing session in Internet Explorer.

Mark of the Web

The Mark of the Web (MOTW) is a feature of Internet Explorer that enhances security by enabling Internet Explorer to force Web pages to run in the security zone of the location the page was saved from (as long as that security zone is more restrictive than the Local Machine zone) instead of the Local Machine zone. The role of the MOTW is more prominent with Internet Explorer 6 for Windows XP SP2 because of increased security restrictions in the Local Machine zone. When you are developing Web content, the MOTW enables you to test your active HTML documents in the security zone where you intend the pages to run. Adding the MOTW to your Web pages also enables you to fully test their compatibility with users' security settings.

Profiling Script with the Developer Tools

The Internet Explorer 8 Developer Tools provide a built-in script profiler that enables you to profile the JScript code running in Internet Explorer. This document outlines the high-level features of the script Profiler. For an introduction to the other features and a complete list of command reference of the Internet Explorer 8 Developer Tools, see Discovering Internet Explorer Developer Tools and Developer Tools User Interface Reference.

Testing Browser and Document Compatibility Modes with the Developer Tools

The Developer Tools enable you to test how users experience your Web page in different Internet Explorer versions, as well as how different document compatibility modes affect the behavior of your Web page in Internet Explorer 8. This allows quick resolution of compatibility problems before your users encounter them.