www.fgks.org   »   [go: up one dir, main page]

Click to Rate and Give Feedback
HTML and DHTML Overviews and Tutori...
HTML and DHTML Overviews and Tutorials

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

Overviews/Tutorials

Activities in Internet Explorer 8

In Windows Internet Explorer 8, "Activities" are contextual menu options that can quickly access a Web service from any Web page. Users can install Activities from the Internet Explorer 8 Activity Gallery World Wide Web link or through any Web site that advertises them. Activities make it easier to copy information from one Web page to another. This article describes how to define and deploy XML-based Activities.

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 Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

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

About Dynamic Content

Internet Explorer 4.0 gives you a rich set of properties and methods to dynamically construct and alter Web pages on the fly. For example, a script can insert a list of section titles at the beginning of the document, or replace that list with a list of links to the actual sections in the document.

About Dynamic Properties

Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas. The formulas used in a dynamic property can reference property values from other elements, thereby allowing authors unique flexibility when designing their Web pages.

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 been a feature of Microsoft applications, such as Microsoft Word and Microsoft PowerPoint for several years. It enables fonts used in the creation of a document to travel with that document, ensuring that a user sees the pages exactly as the author intended. Now, Internet Explorer 4.0 brings embedded font support to the Web. This technology gives site designers the confidence that Internet Explorer 4.0 users see their pages exactly as intended.

About Mouse Capture

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

About Native XMLHTTP

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

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 Pop-up Blocker

The Pop-up Blocker feature in Internet Explorer 6 for Microsoft 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 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.

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.

Activating ActiveX Controls

Users cannot directly interact with ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements. Users can interact with such controls after activating their user interfaces. This topic describes how Internet Explorer handles ActiveX controls, shows how to load ActiveX controls so their interfaces are activated, and describes the impact of this behavior on accessibility tools and applications hosting the WebBrowser Control.

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.

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.

Color Table

Colors can be specified in HTML pages in two ways

Compatibility in Internet Explorer 5.5

This document describes the features in Internet Explorer 5.5 that may not be compatible with applications you developed for earlier versions of Internet Explorer.

Compatibility in Internet Explorer 6 for Windows XP Service Pack 2

This document describes the features in Windows XP SP2 that may be incompatible with applications you developed for earlier versions of Internet Explorer.

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.

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.

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.

CSS Length Units Reference

This section defines the supported length units for CSS

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.

Developer Tools: Script Debugging Overview

The Internet Explorer 8 Developer Tools provides a built-in lightweight debugger that lets you set breakpoints and step through client-side script without leaving Internet Explorer. This document outlines the high-level features of the script debugger.

Discovering the Internet Explorer 8 Developer Tools

Internet Explorer 8 provides enhanced Developer Tools to help you research and resolve problems involving HTML, CSS, and JavaScript. This article introduces the HTML and CSS developer tools.

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.

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

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

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 World Wide Web link. This article describes these features, and provides guidance for incorporating them into your Web sites.

Introduction to DOM Storage

The DOM Storage

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

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.

Introduction to Microsoft Script Debugger for Internet Explorer

Microsoft Script Debugger is a debugging environment that extends the functionality of Internet Explorer 4.0 and later and Microsoft Internet Information Server (IIS). You can use the Script Debugger to browse, edit, and debug .htm and .asp files that contain Microsoft Visual Basic Scripting Edition (VBScript) or Microsoft JScript. You can also use it to combine HTML and script development and to test programs written in other languages. You can then use the Microsoft virtual machine (Microsoft VM) to run the programs and to debug scripts for any scripting language engine that supports ActiveX debugging interfaces.

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.

Language Codes

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

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.

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.

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.

Mitigating Cross-site Scripting With HTTP-only Cookies

Cross-site scripting is a server-side vulnerability that is often created when rendering user input as HTML. Cross-site scripting attacks can expose sensitive information about the users of the Web site. In order to help mitigate the risk of cross-site scripting, a new feature has been introduced in Internet Explorer 6. This feature is a new attribute for cookies which prevents them from being accessed through client-side script.

OpenService Specification for Activities – Version 0.8

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

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.

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

Printing and Style Sheets

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

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.

Search Provider Extensibility in Internet Explorer 7

Internet Explorer 7 promotes search to the top level with the Instant Search box. Multiple search providers can be installed, and users can easily switch between them. This topic explains how a Web site developer can interactively add providers to this new user interface element.

Security Considerations: Dynamic HTML

This document provides information about security considerations related to DHTML.

Selecting Objects with JavaScript

The Selector API lets you use CSS selectors to select objects with JavaScript. This article describes the Selector API and how use it to select objects with Javascript.

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

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

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.

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.

Tags What's this?: Add a tag
Community Content
 
Add Community Content
© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker
DCSIMG