Section A. HTML and CSS structure


A. HTML and CSS structure

The most important decisions in the preparation phase concern the HTML and CSS structure of your pages. Unfortunately, it's not really possible to give general rules for correct HTML and CSS structures; they depend on the purpose and context of the script. An HTML structure that works brilliantly in one case can be counterproductive in another situation.

This is an area where you have to make your own decisions. However, I can offer a few examples that will help you start thinking about good structures.

HTML structure

HTML structure is vital to some example scripts. The most obvious are Sandwich Picker, whose core is formed by the principle of "one sandwich one <tr>," and Dropdown Menu, where the logical, semantic, nested <ul>/<li> structure is crucial.

Where does Sandwich Picker find the name of a sandwich? In the <tr>'s second <td>. How does Dropdown Menu know if an <li> has a submenu? It checks if the <li> has a child <ul>.

Obvious, isn't it?

In general, you should embrace such obviousness. Obviousness is the key to creating HTML structures that will help your script instead of hindering it. Besides, such HTML structures usually hold data that the script can use.

Whenever you can find the data your script needs by examining the document structure, you should do so, since it's always the simplest alternative. It's much easier to tell the script to look in the second <td> to find the sandwich name than to tell it to read it from an array or object that's defined elsewhere.

You'll see plenty of examples of this in 4F, where we discuss the HTML structure of the example scripts.

CSS structure

As with HTML, a good CSS structure can save you a lot of headaches.

The Order and Trash buttons in Sandwich Picker are excellent examples. They are created when the script is initialized, but the rules for their visibility and invisibility are complicated.

Initially both buttons are hidden. The Order button becomes visible when the user adds a quantity to a sandwich, since that's the first step in ordering it. When the sandwich is moved to the order table, the Order button should be hidden (the sandwich has already been ordered, after all), and the Trash button should appear (since only now has it become possible to remove the sandwich from the order form).

Of course you can write a script to arrange for all these show-and-hide actions. Hiding or showing a single button is trivial, but keeping track of which buttons are visible and hidden, and deciding which display changes are triggered by the latest user action, will most likely take a few dozen complicated lines of JavaScript.

Fortunately, you don't need JavaScript for this task. It's far simpler to define the display changes in CSS:

a.trash,a.order {     display: none; } tr.highlight a.order {     display: block; } #ordered a.order {     display: none; } #ordered a.trash {     display: block; } 


Initially both buttons are hidden. An order button in a tr.highlight is visible, except when it's in table#ordered, then it's hidden. A trash button is only visible in table#ordered.

As soon as the script takes action, the CSS associated with the buttons is reevaluated and the buttons are automatically shown or hidden, without the need for complicated JavaScript functions that monitor user behavior and button placement.

Now the script only has to change the class of an ordered sandwich to "highlight", and the Order button appears. When the script moves this <tr> to the Order table (which, unsurprisingly, has ), the button disappears again, but the Trash button appears.

Obvious, isn't it? Again, obviousness is the key. Creating good, useful CSS structures that cooperate closely with your scripts will save you a lot of time and trouble.



ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ISBN: N/A
EAN: N/A
Year: 2005
Pages: 116

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net