This type of application
of JavaScript is known as DOM scripting. The Document Object
Model is the browser??™s view of the hierarchy of all tags and all their
attributes in your page. CSS uses the DOM to set tag attributes, but
JavaScript is a powerful scripting language that can also get (as well
as set) all the attributes of all elements in the DOM (such as the
height of divs) and perform all kinds of processes on them. There
are a number of JavaScript scripts out there that can enable you to
match up the height of elements. They usually require you to identify
the columns to be compared to the JavaScript, by adding the
same class to each column div.
My favorite code to use for this purpose is NiftyCorners by
Alessandro Fulciniti. Not only can this handy script instantly provide
you with equal length columns, but it can also, as its name suggests,
round the corners off any element. (The rounded-corner look
quickly became the de?¬? nitive design feature of the Web 2.0 sites.)
Let??™s see how to use NiftyCorners to create equal length, roundedcorner
columns for our three-column ?¬? xed-width layout that we
saw earlier in the chapter.
sets the color of content area background
background removed to let faux
blend show through
background removed to let main
wrapper background color show
through
BASIC PAGE LAYOUT 165
Modi?¬? cation to the Nifty Cube File
Note that I have made a small mod to the niftycorners.
Pages:
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208