How to Create an Ajax Autocomplete Text Field - Part 4 [con't]
Why Absolute Positioning?
There are four possible position values to choose from. Each type of
positioning would yield very different effects on our list.
static
This is the default, so there's usually no reason to explicitly set it. An
element with position: static always retains its position within the
normal document flow. Hence, a static element ignores any top, bottom, left,
or right declarations (See Figure 7).
relative
position: relative moves an element relative to its
normal position in the document flow. Relative positioning could have worked,
but it would be difficult to set the position of our list relative to the Autocomplete
text field. Here's what the same <DIV> element would look like using relative
positioning with x, y coordinates of 105 and 202 pixels (See Figure 8).
That is definitely not what we're looking for. There's just too much math to
calculate how to move the <DIV> to align it under the text field.
absolute
An element with position: absolute is positioned at the specified coordinates
relative to its containing block. The element's position can be specified using
any of the left, top, right and bottom properties.
It turns out that this is the best choice for us, as it's not only the easiest
to position, but it has the added benefit of overlapping other page elements,
which is exactly what we want. Here is the same <DIV> element as above
but with an absolute x, y positioning of 105 and 202 pixels (See Figure 9).
There is also a value of fixed, which only works in IE7. It positions
an element at the specified coordinates relative to the browser window. This
causes the element to remain at that position regardless of scrolling.
The table#completeTable ID selector defines the appearance of the list
table. There are two properties which we need to set: border and width. The border uses named constants for better readability.
The table width is set to 200 pixels:
There are many border styles available in CSS and the choice above was
completely arbitrary. The important thing is to have some kind of border around
the list <TABLE> element to differentiate it from the rest of the page.
The width works much the same as the <TABLE> width attribute,
except that the CSS property can apply to any HTML element. The CSS width
property also offers more flexibility in terms of measurement units.
Unlike the table width attribute, which can only denote pixels or a percentage,
the CSS width can be in any of the following units of measurement:
| Unit | Description |
|---|---|
| % | percentage |
| in | inch |
| cm | centimeter |
| mm | millimeter |
| em | 1em is equal to the current font size. 2em means 2 times the size of the current font. e.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses |
| ex | one ex is the x-height of a font (x-height is usually about half the font-size) |
| pt | point (1 pt is the same as 1/72 inch) |
| pc | pica (1 PC is the same as 12 points) |
| px | pixels (a dot on the computer screen) |
The popupRow class affects the appearance of the table rows. The two
properties that we are setting are the cursor and the background
color:
The cursor property sets the mousepointer style. It can be set to just
about any style that your computer supports. You can even set it to a custom
cursor using the url property! We set it to a pointer
so each row in the completeTable will appear as a link. Here's
the complete list of possible cursor values:
| Value | Description |
|---|---|
url |
The url of a custom cursor to be used. Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used |
default |
The default cursor (often an arrow) |
auto |
Default. The browser sets a cursor |
crosshair |
The cursor render as a crosshair |
pointer |
The cursor render as a pointer (a hand) that indicates a link |
move |
The cursor indicates something that should be moved |
e-resize |
The cursor indicates that an edge of a box is to be moved right (east) |
ne-resize |
The cursor indicates that an edge of a box is to be moved up and right (north/east) |
nw-resize |
The cursor indicates that an edge of a box is to be moved up and left (north/west) |
n-resize |
The cursor indicates that an edge of a box is to be moved up (north) |
se-resize |
The cursor indicates that an edge of a box is to be moved down and right (south/east) |
sw-resize |
The cursor indicates that an edge of a box is to be moved down and left (south/west) |
s-resize |
The cursor indicates that an edge of a box is to be moved down (south) |
w-resize |
The cursor indicates that an edge of a box is to be moved left (west) |
text |
The cursor indicates text |
wait |
The cursor indicates that the program is busy (often a watch or an hourglass) |
help |
The cursor indicates that help is available (often a question mark or a balloon) |
The background property is set using a named CSS color constant. There
are also system and hyperlink color constants to choose from. If none of these
colors will do, you can also define your own color by using an RGB, RGB percentage
or a HEX number. The table below describes how to denote each type of color
unit:
| Unit | Description |
|---|---|
color_name |
A color name (e.g. red) |
| rgb(x,x,x) | An RGB value (e.g. rgb(255,0,0)) |
| rgb(x%, x%, x%) | An RGB percentage value (e.g. rgb(100%,0%,0%)) |
| #rrggbb | A HEX number (e.g. #ff0000) |
Our last class, popupItem, sets the appearance of the table cells, as
well as the font properties:
The padding property works just like a <TABLE> tag's cellpadding
attribute does. It sets how much space there is around a element's contents:
The white-space property sets how white space inside an element is handled.
There are three possible values, as follows:
| Value | Description |
|---|---|
| normal | Default. White-space is ignored by the browser |
| pre | White-space is preserved by the browser. Acts like the <pre> tag in HTML |
| nowrap | The text will never wrap, it continues on the same line until a <br> tag is encountered |
We are using nowrap because we want to avoid wrapping text. It works
the same as the table cell's nowrap attribute.
The last two properties control the appearance of the font.
The font-size: 0.8em; entry sets the font size to slightly smaller
than the browser's normal font size setting. For instance, if the user has their
browser set to display a default font size of 10 pixels, then the text in our
list will appear at eighty percent of 10 pixels, or 8 pixels.
Our final property, the font-family, sets a prioritized list of font
family names for an element. Examples include: Times, Courier and Arial.
The browser will use the first value it recognizes or use the default if none
are found. Multiple word names have to be enclosed in quotes, as I did with
Lucida Console.You can also define a generic-family such
as serif, sans-serif, cursive, fantasy or monospace. It's always
a good idea to offer a generic-family name as the last alternative in the font-family
list.
Here's the AutocompleteList.css file in its entirety:
We're now one file closer to having a completed Autocomplete text field control!
Next week, we'll write the AutocompleteList.js JavaScript file, which will govern
the behavior of the popup list in the browser.
References
About the Author
Robert Gravelle is a Senior Programmer/Analyst for the Canadian Border
Services Agency as well as a freelance IT consultant. Rob specializes in Java,
Perl, ASP, Microsoft application automation, JavaScript, VBScript, Web Development
and multi-tier systems. Feel free to contact Rob at [email protected] should you like more information, but note that, although Rob will do his very
best to respond in a timely manner, due to the volume of emails received, he
cannot guarantee a response to every message.
Original: April 16, 2008
Digg This
Add to del.icio.us
Find a programming school near you
