Practical prototype and scipt.aculo.us part 34 ppsx

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