15.0 Introduction

This chapter's recipes attempt to provide solutions for real-world challenges that you may encounter in your DHTML development. The difficulty in arriving at such a roster of solutions is that DHTML is flexible enough to inspire the imaginations of every developer in different directions. While most of the recipes here can be used as-is, they are also meant to serve as basic foundations upon which you can build your specific application. If these recipes give you ideas for ways to add value to your site, all the better.

Several of the recipes in this chapter rely on scriptable objects whose powers are not always easy to grasp: the JavaScript core language Date object (covered in depth in Chapter 2), and an object representing text ranges (known as the TextRange object in IE for Windows and the Range object in the W3C DOM). The abstract nature of these objects and the technical details of their operation can cause numerous conceptual problems along the way.

Although the details of text range implementations in the IE for Windows and W3C DOMs are quite different, their fundamental operations are the same. At its core, a text range is a sequence of body text separate from the HTML elements that surround or are nested within the sequence. You don't see a text range, per se, although it is possible to highlight its text for the user to see, if it's important to your application.

A text range has a starting point and an ending point. When you create a text range, it has a default set of boundaries (again, the details vary with DOM type). Relocating those two boundaries may entail a reference to an HTML element, but the text range itself is devoid of any node hierarchy like that of the HTML document. The typical sequence of working with a text range is to create the abstract text range, position its boundary points, and then perform some operation on the text (such as removing the contents or grabbing a copy of the text). For example, you can convert a user selection of a portion of body text to a span element that is then under the control of a style sheet rule (see Recipe 15.2).

Between the two implementations, the IE TextRange object is the more flexible and better equipped for practical duty. It is the only one that offers facilities for searching within the body text for string matches (and positioning the boundary points around the found instance). Importantly, the IE TextRange object can also be applied to content in a textarea element. Therefore, while it may appear cool to be able to script a global search-and-replace operation in the body text (Recipe 15.3), it's more practical in a textarea containing a bunch of text supplied by the user. Of course, IE 5.5 or later for Windows offers facilities in the browser to make the body content editable (although you must still provide a server mechanism for preserving the changes).

Because many of the recipes in this chapter deal with positioning elements on the page, many rely on the importation of the DHTML API library shown in Recipe 13.3. Scripts with dependencies on the functions of that library are clearly marked. Although the library is not large, you are free to create a version of the library that includes only the functions needed for a specific application. Or you can copy and paste those functions into your in-document code or other .js library code. Also, be on the lookout for recipes that employ cookies to preserve settings across settings—they use the cookies.js library from Recipe 1.9.