Ajax For Dummies®

Chapter 9. Working with Cascading Style Sheets in Ajax Applications

<feature><title>In This Chapter</title> <objective>

Creating an Ajax-driven drop-down menu system

</objective> <objective>

Getting newly displayed text noticed

</objective> <objective>

Working with text styles

</objective> <objective>

Setting colors and backgrounds

</objective> <objective>

Positioning elements using styles

</objective> </feature>

“Uh oh,” says the crack Ajax programmer. “This isn’t working.”

“What’s the problem?” you — the highly-paid Ajax consultant — ask.

“I can’t get this menu application to work. I can get the data for the menu items from the server using Ajax alright, but I can’t make the menus appear and disappear. What gives?”

“What style property are you using to make them appear and disappear?” you ask.

“Style property?” the crack Ajax programmer asks.

“Hoo boy,” you say, “better let me take over for a while.”

Because Ajax does its thing without page refreshes, Ajax applications are very fond of changing the current page dynamically. That is, Ajax applications can’t rely on restructuring the page when it next appears — it’s already in front of the user. That means that you’ve got to work your magic right there while the user watches. For this reason, Ajax programmers are very fond of dynamic HTML (DHTML) and cascading style sheets (CSS).

DHTML lets you rewrite the HTML in a page on the fly. You’ve already seen plenty of examples of using DHTML in this book, as in this line of JavaScript, which rewrites the ...