How to Create an Ajax Autocomplete Text Field - Part 9 [con't]
Mouse Event Handling
The rowOn(), rowOff() and rowDown() functions all need access to the row to
affect its appearance. As it stands, each of these functions contain the following
code to select the row element:
With the addition of the new <span> element, this code no longer works
since the firing element may not be the cell. We need to solidify this code with
a surefire way to get the row element. The solution can be found in the
way that the row's mouse handler functions are assigned. The mouse events already
belong to the row, so any time an event handler function is called, it's executed within that row's scope. In other words, the this
object is the row!
Another weakness in the current row event handler functions is that
they're setting appearance-related properties in JavaScript code. In keeping
with the standard that keeping formatting instructions in the
CSS file, we'll create some class rules for each row state. There
are four mouse events (over, up, down, and out),
but we only need to create three rules, as the mouseover and mouseup
states are currently the same:
className. To simplify things even further, I amalgamated
all the row handlers into one function called handleMouseEvent(e). In Mozilla-style
browsers, the event is passed to the function as the first argument, so we'll
include a parameter called e. In the case of Internet Explorer, which
doesn't pass the event to the function, but keeps it in the window.event
property, we can assign it to our e variable. The neat thing about this
new function is the event name is the same as the class. Hence, an event
of type "mouseover" will add the mouseover class to
the default of popupRow. Here's the final result:
Don't forget to update the assignments of our function to the row events,
in the appendFund() function:
The Moment of Truth!
Let's have a look at our changes in a browser. Right-click on the AutocompleteSearchCSS.jsp
file in the "Project Explorer" pane and select "Run As => 1 Run on Server" from the popup menu (See Figure 1)
Type an 's' in the textbox to display the search string highlighting. The search
string should be enclosed within a yellow box and the text should be blue. Hover
the mouse over the rows to make sure that the colors change.
Finally, click and release the left mouse button to test the mousedown
and up events. Here's a screenshot of the mouseover event (See Figure 2)
Adding a CSS Drop Shadow
A drop shadow is a great way to enhance the effect of the list floating
over the page contents. Many sites use a combination of CSS positioning, Internet
Explorer's AlphaImageLoader filter, and images to create the drop shadow, but
this week, we're going explore an alternative method using only CSS styles. The
illusion relies on several separate color boxes that, when put together, create
a gradation effect that will please all but the most discerning of critics.
The more boxes are used, the smoother the gradation, but as with animation effects,
there's a point of diminishing returns. Rather than utilize the standard three
<div> boxes, we'll use six!
The dropShadow JSP Parameter
As with any optional property, let's give the user the choice of having a dropShadow
or not. Since there are only two options to choose from, this parameter will
have to be treated as a boolean in the JavaScript code. We'll have to include
a little extra code to handle the conversion from a string to a boolean primitive.
Add the dropShadow parameter to the AutoCompleteSearchCSS.jsp page:
The JavaScript dropShadow variable, in the AutocompleteControl.jsp file
will create a String literal, set to the parameter's value:
The "shadow-container" CSS Rules
Aside from using a number of smooth color transitions, creating a convincing
drop shadow effect depends largely on the positioning of the layers. The following
image demonstrates how stacking several boxes in increasingly darker shades
with top and left properties of -1 pixel creates a shadow-like
effect (See Figure 3)
The colors and positioning of the layers are defined in the AutocompleteControl.css
file. The shadow-container ID rule is applied to the <div>
that replaces the list container element. As such, it shares some
of the same properties, such as the "absolute" positioning and "hidden"
visibility. All of its children's properties, with the exclusion of the
background color, are defined in a class rule. The shared properties
include the relative positioning of the top and left properties
of -1 pixel, and the a visibility of "inherited," so setting
the shadow-container's visibility will affect all the child elements.
The "!important" keyword is included mainly for the benefit of the
list container, so that this rule overrides the left and top
positions that we assigned in code:
Since we applied the style directly to the element, it acts like an inline
style, which normally supersedes the class style. Here's what the list looks
like without the !important keyword (See Figure 4)
Here's the CSS code associated with the drop shadow effect:
Find a programming school near you
