HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [294]
♦ The wrap in div button lets you wrap an HTML element around any existing element. The wrap in div button puts a div (with a red border) around every cloned element. You can click this button multiple times to add multiple wrappings to any element. Figure 3-7 shows what happens after I wrap a few times.
Figure 3-5: More text can be appended inside any content area.
Figure 3-6: I’ve made several clones of the original content.
Figure 3-7: Now you see a red-bordered div around all the cloned elements.
♦ The change alternate paragraphs button increases readability; sometimes you want to be able to alternate styles of lists and tables. jQuery has an easy way to select every other element in a group and give it a style. The change alternate paragraphs button activates some code that turns all odd-numbered paragraphs into white text with a green background. Look at Figure 3-8 for a demonstration.
♦ The reset button resets all the changes you made with the other buttons.
The code for changeDocument.html seems complex, but it follows the same general patterns you’ve seen in jQuery programming. As always, look over the entire code first and then read how it breaks down:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Adding Content Demo
This is the original content
Admittedly you see a lot of code here, but when you consider how much functionality this page has, it really isn’t too bad. Look at it in smaller pieces, and it all makes sense.
Figure 3-8:
All odd-numbered paragraphs have a new style.
Building the basic page
As usual, begin by inspecting the HTML. The basic code for this page sets up the playground:
1. Create a form with buttons.
This form will become the control panel. Add a button for