Practical prototype and scipt.aculo.us part 36 docx

#box {position: relative; width: 600px; height: 300px; background-color: #ddd; top: 50px; left: 25px; } This example means to say, “Render the element as you would normally, except place

#box {

position: relative;

width: 600px;

height: 300px;

background-color: #ddd;

top: 50px;

left: 25px;

}

This example means to say, “Render the element as you would normally, except place

it 50 pixels lower and 25 pixels to the right.” Figure 9-10 shows the difference when com-pared to static positioning

Figure 9-10.The same element, but with static positioning

Offset Parents and Positioning Context

There’s one final wrinkle Elements can be placed relative to the document as a whole,

but they can also be placed relative to any other element We’ll call this the element’s

positioning context It alters the meaning of CSS properties like top

We can see for ourselves how changing the positioning mode of an element affects

how that element’s children are rendered (see Figure 9-11):

<! HTML: >

<div id="box">

<div id="box2"></div>

</div>

/* CSS: */

#box {

width: 300px;

height: 300px;

position: static;

background-color: #ddd;

}

#box2 {

width: 100px;

height: 100px;

position: absolute;

bottom: 15px;

right: 15px;

background-color: #333;

}

In this example, the child box is positioned relative to the entire document But when

we change its parent’s positionfrom staticto relative, things look much different (see

Figure 9-12)

child, the black box.

Any value for positionother than the default staticcreates a new positioning

con-text for its children In both examples, the child box is positioned 15 pixels from the

bottom and right edges of the canvas; but when we changed the parent box’s positioning,

we changed the canvas

Assigning relative positioning to an element won’t affect its placement unless it’s

accompanied by pixel values for left,right,top, or bottom Apositionvalue of relative,

then, can be used to assign a new positioning context for all the element’s children while

leaving it otherwise unchanged

When we discuss an element’s offset parent, we’re referring to the parent that defines

that element’s positioning context

Positioning with Offset Properties

The previously discussed offsetWidthand offsetHeightproperties, which measure an element’s border box, have three useful cousins The first two, offsetLeftand offsetTop, measure the distance from an element’s outside edge to the outside edge of its offset parent

And, luckily, the offsetParentproperty exists so that we can easily determine an element’s offset parent

var box = $('box2');

box.offsetTop; //-> 185

box.offsetLeft; //-> 185

box.offsetParent; //-> <div id="box">

Once again, these properties are nonstandard But even the most rabid of

standardistas will find it hard not to use them Stop worrying and learn to love them

Introducing script.aculo.us

Is your head spinning yet? Aren’t you glad script.aculo.us is here to make all this easier? script.aculo.us is a UI library built upon Prototype It includes an effects framework, implementations of several kinds of UI widgets, and a drag-and-drop system Prototype

solves general problems; script.aculo.us uses Prototype to solve specific problems.

script.aculo.us was developed by Thomas Fuchs, a talented JavaScript developer who

is also a member of Prototype Core The two projects—Prototype and script.aculo.us— have been separate since almost the beginning, but have always had coordinated release schedules They’re fraternal twins

Similarities to Prototype

If you know Prototype, you’ll have no trouble picking up script.aculo.us

• It’s MIT-licensed script.aculo.us carries the same permissive license as Prototype and Ruby on Rails, so it can be used in any project, whether it’s commercial or noncommercial

• It’s bundled with Ruby on Rails The built-in helpers in Rails use script.aculo.us, but the library can easily be used in any context

• It has its own site with documentation The script.aculo.us documentation is collaborative and wiki-based

• It follows the API conventions of Prototype It uses many of the patterns you’ve

seen already

• It has an emphasis on solving the 80 percent of problems common to all web

apps If you’ve got very specific needs, you can write custom code on top of

script.aculo.us

The script.aculo.us Web Site

You can learn more about script.aculo.us at its web site, at http://script.aculo.us, which

includes collaborative, wiki-based documentation and other resources to help you when

you get stuck

Contributing to script.aculo.us

Like Prototype, script.aculo.us welcomes bug fixes and enhancements The bug tracker is

open to the public and contains a list of pending script.aculo.us bug reports and feature

requests Patches of all kinds are enthusiastically encouraged

Getting Started with script.aculo.us

Unlike Prototype, script.aculo.us is distributed as a set of files, instead of just one file

That’s because it’s divided into modules, most of which are optional

Figure 9-13 shows what script.aculo.us looks like when you download and unzip it