script.aculo.us PART 2 What You Should Know About DHTML and script.aculo.us DHTML is the term assigned to a collective set of technologies used to create dynamic web content, including HTML, JavaScript, and CSS. The dynamism in DHTML comes from the fact that we’re modifying the structure and presentation layers of the document (HTML and CSS) after the page has been loaded. This definition is broad enough to cover animations (elements moving across the page over time), new interaction models (drag- and-drop), and new controls (sliders, combo boxes, and in-place editors). DHTML isn’t a special language; it’s just a term for what becomes possible when the DOM APIs for markup and style are made available to JavaScript. Some of it relies on sta- ble, agreed-upon standards like the DOM; some of it relies on the mystical APIs that were introduced a decade ago as part of the browser wars. It exists at the intersection of the visual and the analytical, making designers and developers equally uncomfortable. We’ll deal with the analytical parts as we go. The visual parts require a crash course in CSS concepts and a quick look at the APIs that let us control how elements are dis- played through JavaScript. Introducing the CSS Box Model Web design is all about rectangles, to put it plainly. Every element represented visually is a rectangle of some sort. (That we aren’t dealing with circles, triangles, or irregular polygons is a blessing. Be thankful.) Typically, these rectangles are placed onto the page in a way that represents their hierarchical relationship. The rectangle created by a table cell, for instance, will appear inside the one created by its table row. A parent element, then, acts as a containing block for its children. 193 CHAPTER 9 This is the default rendering behavior for most elements because it’s a visual con- veyance of the elements’ semantics. Most parent-child relationships have meaning. A list item belongs to an unordered list; a legend belongs to a fieldset; a table cell belongs to a table row. As you’ll learn, though, there are ways to override this default arrangement. With CSS, you can have near-perfect control of how elements are placed. Visualizing with Block-Level Elements Visually, most elements are represented as blocks—big rectangles, if you prefer—and are thus called block-level elements. As the primary pieces of page construction, block-level elements are broadly cus- tomizable. Through CSS, you can control their dimensions, colors, and spacing. Also remember that many CSS properties inherit—some properties defined on an element propagate to its children unless specifically overridden. Block-level elements have implicit line breaks. If there are two paragraph ele- ments in a row, for instance, the second will render below the first. By default, they won’t compete for hor izontal space. Figure 9-1 illustrates this behavior. Figure 9-1. The markup on the left translates roughly to the structure on the right. But, as Figure 9-2 illustrates, any element can be made to behave like a block-level element, even if it isn’t one, by setting that element’s CSS display property to block. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US194 Figure 9-2. An element meant for inline display can act like a block-level element if its CSS display property is changed. Formatting Blocks with Inline Elements Other elements don’t lend themselves to block formatting. Many—like anchor (a), emphasis ( em), and strong (strong)—are meant to be formatted within the lines of a paragraph or other block-level element. They’re inline elements—small rectangles, if you prefer—and are not as greedy or imposing, space-wise, as their block-level brethren. Figure 9-3 illustrates. Figure 9-3. By default, inline elements adopt the size and shape of the text they envelop. Inline elements can contain text and other inline elements, but not block-level elements: <! RIGHT: > <p><strong>Never pour salt in your eyes.</strong></p> <! WRONG: > <strong><p>Never pour salt in your eyes.</p></strong> CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 195 Inline elements don’t have implicit line breaks. If you wish to start a new line, you must use a line break ( br) or wrap at least one of the elements inside a block-level element. You can make any element behave like an inline element by setting its display prop- erty to inline. We’ll revisit inline display later. For now, though, let’s take a closer look at block dis- play and the box model. Thinking Outside the Box: Margins, Padding, and Borders The box model is day-one material for those learning CSS. But even experts can be sur- prised by its nuances. The dimensions of an element are nominally controlled by the CSS width and height properties, but these control the dimensions of the usable content area, not the entire box. A block-level element can also have padding (space inside the box) and margin (space outside the box). In between margin and padding lies the box’s border. A developer can also control a border ’s thickness, color, and style (see Figure 9-4). Figure 9-4. An illustration of common measurements in the CSS box model, along with related DHTML properties CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US196 This might all be clearer in example form (see Figure 9-5): <! HTML: > <p id="box">Never pour salt in your eyes.</p> /* CSS: */ #box { width: 50px; height: 50px; background-color: #ddd; margin: 25px; padding: 10px; border: 5px solid #aaa; } Figure 9-5. The visual result of the given markup and CSS CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 197 . script .aculo. us PART 2 What You Should Know About DHTML and script .aculo. us DHTML is the term assigned to a collective set of technologies used to create dynamic web content,. (drag- and- drop), and new controls (sliders, combo boxes, and in-place editors). DHTML isn’t a special language; it’s just a term for what becomes possible when the DOM APIs for markup and style. designers and developers equally uncomfortable. We’ll deal with the analytical parts as we go. The visual parts require a crash course in CSS concepts and a quick look at the APIs that let us control