Adobe Edge Preview 5: The Missing Manual

Chapter 9. Helpful JavaScript Tricks

Here’s the payoff for learning the JavaScript/jQuery basics covered in Chapter 8. You can apply those skills to your Edge projects. One of the easiest ways to start is to use Edge’s triggers and actions to write code, and then apply your own modifications to customize that code. That’s exactly how this chapter begins. Then it presents yet another version of the photo gallery, using a nifty image source swapping technique. Along the way you learn how to change an element’s dimensions, position, and background colors the JavaScript/jQuery way. This chapter explains how you can simplify your code by assigning symbols and elements to variables. Last, but not least, you’ll see how to control symbols’ independent timelines.

More Showing and Hiding Tricks

Chapter 5 showed several examples using the Show and Hide actions. Now it’s time to revisit that subject and see how you can bend those simple tricks to your own iron will. Consider a simple Edge composition like the one in Figure 9-1. You can find 09-1_HideAndSeek with the exercises for this chapter on the Missing CD at www.missingmanuals.com/cds/edgepv5mm.

The idea is to make the text boxes with the words Show, Hide, and Toggle behave like buttons. Click on the word and the car picture disappears or reappears. For example, as covered in Chapter 5, this is the quick way to make Hide work:

1. In Edge, right-click (Control-click) the word “Hide” and choose Open Actions for “tbHide” from the shortcut menu. ...