#box { position: relative; width: 600px; height: 300px; background-color: #ddd; top: 50px; left: 25px; } Figure 9-9. A relatively positioned element 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. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US204 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> CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 205 /* 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; } Figure 9-11. The black box positions itself in the context of the entire document. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US206 In this example, the child box is positioned relative to the entire document. But when we change its parent’s position from static to relative, things look much different (see Figure 9-12). Figure 9-12. By changing the gray box’s position to relative, we define a new context for its child, the black box. Any value for position other than the default static creates 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.Aposition value 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. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 207 Positioning with Offset Properties The previously discussed offsetWidth and offsetHeight properties, which measure an element’s border box, have three useful cousins. The first two, offsetLeft and offsetTop, measure the distance from an element’s outside edge to the outside edge of its offset parent. And, luckily, the offsetParent property 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. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US208 • 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. Figure 9-13. The directory structure of a downloaded script.aculo.us bundle CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 209 . 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,. 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. The script .aculo .us documentation is collaborative and wiki-based. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT .ACULO. US2 08 • It follows the API conventions of Prototype. It uses many