Practical prototype and scipt.aculo.us part 41 docx

Effect.ScrollTo Effect.ScrollTo is far more focused than the other core effects. It animates the scrolling of the browser viewport to bring the specified element into view. In other words, it’s a time-lapse version of Prototype’s Element#scrollTo function. To illustrate this effect, let’s change the CSS so that our box is “below the fold” on page load. My viewport isn’t very tall, so bumping it down 500 pixels will do it. Let’s also change the height of the page so that we’ll have some space below the box: /* CSS: */ #box { position: absolute; width: 50px; height: 50px; top: 500px; left: 0; background-color: #999; border: 2px solid #000; font-family: "Helvetica Neue"; text-transform: uppercase; text-align: center; line-height: 50px; font-size: 10px; } body { height: 1500px; } /* JS: */new Effect.ScrollTo('box'); This effect, shown in Figure 10-14, simulates the “smooth scrolling” behavior that’s now used in many applications. It helps the reader jump to a different part of the page without losing her original position. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 235 Figure 10-14. Effect.ScrollTo animates the viewport’s scroll offset. Introduction to Combination Effects We’ve only scratched the surface of script.aculo.us effects. As I mentioned earlier, the true power lies in writing combination effects—groups of core effects that run in parallel to create more complex animations. You’ll get to write your own effects later on, but first let’s look at some of the combination effects given to you out of the box. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS236 The first three examples of combination effects illustrate different ways to animate hiding and showing elements—each pair is a time-lapse version of Element#hide and Element#show. There are many different ways to get from visible to invisible. Effect.Fade and Effect.Appear The first pair, Effect.Fade and Effect.Appear, animate the opacity of the element. Thus, Effect.Fade will decrease the element’s opacity until it’s invisible, and then hide it; and Effect.Appear will show the element fully transparent, and then increase opacity gradu- ally until it fades into view (see Figure 10-15). new Effect.Fade("box"); Figure 10-15. Effect.Fade decreases an element’s opacity until it’s invisible. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 237 Naturally, Effect.Fade communicates something “fading away” (like an old soldier), so it’s best used on items that will disappear and not be used again. Likewise, Effect.Appear suggests the creation of something new, so it’s best used on items that haven’t been shown on the page before. Effect.BlindUp and Effect.BlindDown The next pair, Effect.BlindUp and Effect.BlindDown, work like the window blinds they’re named after. Calling Effect.BlindUp will cover the element vertically, line by line, starting with the bottom of the element (see Figure 10-16). Effect.BlindDown is the same anima- tion in reverse. new Effect.BlindUp('box'); Figure 10-16. Effect.BlindUp hides an element by covering up a progressively larger part of the element, starting from the bottom. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS238 Effect.BlindUp suggests that the element has simply been covered up; thus, it feels less “permanent” than Effect.Fade. Use this pair of effects for items that can be hidden, but can also be shown again. Effect.SlideUp and Effect.SlideDown Finally, Effect.SlideUp and Effect.SlideDown work like dresser drawers. Calling Effect.SlideUp will hide the element vertically, line by line, starting with the top of the element (see Figure 10-17). Effect.SlideDown is the same animation in reverse. These effects carry one caveat: to work properly, they require the element in question be double-wrapped in a block-level element. Here, we’re using a div, so we’ll place another div inside it: <! HTML: > <div id="box"><div>Box</div></div> /* JS: */ new Effect.SlideUp('box'); Figure 10-17. Effect.SlideUp hides an element by “pushing” it from the bottom and covering it from the top. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 239 Effect.SlideUp suggests that the element is disappearing into the element right above it. So this pair of effects is useful for collapsible panels, accordion menus, and even things like expandable trees. Effects Are Asynchronous We’ve already covered how JavaScript has no sleep statement, so it can’t halt all execu- tion. Remember how effects work at their core: a function is called, over and over again, via setTimeout. Each call advances the animation by one frame. But any other code can run in the “gaps” between these “scheduled” animation frames. To illustrate, we can start an effect, and then invoke the Firebug debugger with the special debugger keyword. Script execution will be paused so that we can step through the code. Effect.Fade('box'); debugger; Figure 10-18 shows the state of the page when the debugger starts. Figure 10-18. The debugger has paused execution before our effect has finished. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS240 . SCRIPT .ACULO. US EFFECTS236 The first three examples of combination effects illustrate different ways to animate hiding and showing elements—each pair is a time-lapse version of Element#hide and Element#show INTRODUCTION TO SCRIPT .ACULO. US EFFECTS 237 Naturally, Effect.Fade communicates something “fading away” (like an old soldier), so it’s best used on items that will disappear and not be used again. Likewise, Effect.Appear. right above it. So this pair of effects is useful for collapsible panels, accordion menus, and even things like expandable trees. Effects Are Asynchronous We’ve already covered how JavaScript has