For Dummies JavaScript and AJAX 978-0-470-41799-7 User Manual

12

 

Figure 1-3: 

Click the 

Toggle 

Visibility 

button to 

make the 

panel with 

the output 

reappear.

 

I clicked the Toggle Visibility button, and the output disappeared.

 ✓ 

The Toggle Style button instantly changes the appearance of part of 
the page. You can use JavaScript to change the contents of any part 
of the page (that is, the HTML) — but you can also use JavaScript to 
modify the appearance (the CSS) in real time. In this example, I’ve cre-
ated a special CSS class called funky that is added to or removed from 
the output box every time the user clicks the button. This approach 
works with any CSS class. (Amazing, huh?) Figure 1-4 shows the page 
with the funky class applied.

 

 

If you need a refresher on CSS or XHTML, please look over the bonus 
chapters on the Web site: www.dummies.com/go/javascriptand
ajaxfd

 or www.aharrisbooks.net/jad.

 

 

I’ve added callouts to some of the figures in this chapter to describe 
what’s happening. The images in this book are not sufficient to under-
stand what the page does. Find the program at www.dummies.com/go/
javascriptandajaxfd

 or www.aharrisbooks.net/jad and look at 

it yourself.

 ✓ 

The Animate button is even more fun. The Animate button makes a 
series of gradual changes to the output box, changing its size, shape, 
and appearance over time. (You’ve really got to try it; a screen shot 
won’t do it justice.) 

05_417997-ch01.indd   12

05_417997-ch01.indd   12

10/26/09   9:55 PM

10/26/09   9:55 PM