Practical prototype and scipt.aculo.us part 35 doc

So we’ve got a box with 10 pixels of padding, 25 pixels of margin, and 5 pixels of border on all sides.. By this measurement, our box is 80 pixels wide 50 pixels of content, plus 10 pixe

Giving one value for marginor paddingwill apply that value to all sides of an element And the borderproperty is shorthand for specifying a border’s width, style, and color all

at once So we’ve got a box with 10 pixels of padding, 25 pixels of margin, and 5 pixels of

border on all sides.

There are several ways to measure the box’s dimensions:

The most obvious way to the human eye is to measure from the outside edges of the border By this measurement, our box is 80 pixels wide (50 pixels of content, plus 10 pixels of padding on either side and 5 pixels of border on either side) and

80 pixels tall Let’s call this the border box This corresponds to the offsetWidthand offsetHeightDHTML properties

A related approach would be to measure from the inside edges of the border By this

measurement, our box is 70 pixels wide (50 pixels of content, plus 10 pixels of

padding on either side) and 70 pixels tall Let’s call this the padding box It

corre-sponds to the clientWidthand clientHeightDHTML properties

The way CSS approaches it is to measure the dimensions of the invisible content

box How much usable space is there within the box? By this measurement

(exclud-ing all margins, padd(exclud-ing, and border), our box would be 50 pixels square, just like

we wrote in the CSS Let’s call this the content box A computed style call (i.e.,

Element.getStyle) would report these dimensions

The all-encompassing approach involves the total amount of space this element

occupies In other words, how big would its parent element need to be in order to

contain it? By this measurement, our box would be 130 pixels square: 25 pixels of

margin, 5 pixels of border, 10 pixels of padding, 50 pixels of content, 10 more pixels

of padding, 5 more pixels of border, and 25 more pixels of margin Let’s call this the

margin box.

All four of these approaches have an argument for representing the “true” dimen-sions of a box In an ideal world, we’d have a pleasant, uniform API for retrieving all four

But in the actual world, only two come easily; the rest are left as an arithmetic exercise for

developers

DHTML Properties

Two properties, clientWidthand clientHeight, are available on every DOM node to report

the dimensions of an element’s padding box These two properties return integers:

$('box').clientWidth; //-> 50

$('box').clientHeight; //-> 50

Likewise, offsetWidthand offsetHeightreport the dimensions of an element’s

border box:

$('box').offsetWidth; //-> 80

$('box').offsetHeight; //-> 80

For the content box, it’s not quite as simple The quickest path to the answer is

a call to Element.getStyle, parsing the result into an integer:

var width = $('box').getStyle('width'), height = $('box').getStyle('height');

width; //-> "50px"

height; //-> "50px"

parseInt(width, 10); //-> 50

parseInt(height, 10); //-> 50

This tactic has the disadvantage of being far slower Luckily,offsetWidthand

clientWidthare often good enough, approximating the actual values nearly enough to

justify the optimization Don’t use the computed style approach unless you need total

accuracy

CSS Positioning (Static, Absolute, and Relative)

Those of you who are comfortable with CSS may not need a crash course, but CSS

posi-tioning is complex enough that it warrants coverage CSS defines four different values for

the positionproperty, corresponding to four different ways to determine an element’s

position on the page Three of them enjoy wide support: static,absolute, and relative

Static Positioning

The default value,static, works the way you’re used to Elements are arranged from top

to bottom in the order they appear on the page In this mode, the CSS properties for

posi-tioning (top,bottom,left, and right) have no effect

Absolute Positioning

Here’s where things get weird Absolute positioning doesn’t care about the order of ele-ments on the page It treats the entire document as a grid, letting you place eleele-ments according to pixel coordinates

For instance, I can create a box and place it on the screen anywhere I want (see Figure 9-6):

<! HTML: >

<div id='box'>Absolutely positioned</div>

/* CSS: */

#box {

position: absolute;

width: 600px;

height: 300px;

top: 50px;

left: 25px;

background-color: #ddd;

}

Figure 9-6.An absolutely positioned block-level element

In this example, the top-left corner of the page is the origin of the grid A topvalue of

50pxmeans that the top edge of the box will be placed 50 pixels from the top edge of the

canvas Likewise, the left edge of the box will be placed 25 pixels from the left edge of the

canvas (see Figure 9-7)

<! HTML: >

<div id='box'>Absolutely positioned</div>

<div id='box2'>Also absolutely positioned</div>

/* CSS: */

#box {

position: absolute;

width: 600px;

height: 300px;

top: 50px;

left: 25px;

background-color: #ddd;

}

#box2 {

position: absolute;

width: 600px;

height: 300px;

top: 100px;

left: 75px;

background-color: #888;

}

When an element is given absolute positioning, it’s taken out of the ordinary

docu-ment “flow”—its statically positioned brethren no longer account for it or make space

for it

Figure 9-7.Two absolutely positioned block-level elements

The z-index Property

I wasn’t entirely accurate when I said that order doesn’t matter with absolute positioning

In this example, the two elements overlap quite a bit, so order is used to determine which one should be “on top.”

But the CSS z-indexproperty lets us override that default ordering (see Figure 9-8):

#box {

position: absolute;

width: 600px;

height: 300px;

top: 50px;

left: 25px;

background-color: #ddd;

z-index: 2;

}

Figure 9-8.Two absolutely positioned elements The first has a larger z-index value than the

second, so it appears in front.

The grid analogy serves us well here Imagine that left/rightand top/bottom

con-trol the x and y axes of the grid; z-indexcontrols the z axis, otherwise known as the

depth Numbers refer to layers on the page; a higher number represents a layer

“closer” to the user That’s why the second box appears on top of the first

If two elements have the samez-indexvalue (or have no z-indexdefined), then

their order on the page determines which one is on top But here, by giving the first

box a z-indexof 2, we’ve ensured that it will appear above the second box

Relative Positioning

Relative positioning is the most confusing—it’s a mix of static and absolute positioning

Like absolute positioning, it responds to the top,bottom,left, and rightproperties

Unlike absolute positioning, it does not remove an element from the document flow.

Also, the element is positioned relative to its own top-left corner—not the top-left

corner of the document (see Figure 9-9)