|
Using Spry:hover, Spry:even, & Spry:odd All Together
By Raymond Camden
Expert Author
Article Date: 2007-10-23
One of the nicer features of Spry is the simple way you can apply even, odd, and hover classes to a dataset.
Consider this example:
<tr spry:repeat="mydata" spry:setrow="mydata" spry:hover="hover" spry:even="even" spry:odd="odd">
<td style="cursor: pointer;">{name}</td>
<td style="cursor: pointer;">{age}</td>
<td style="cursor: pointer;">{gender}</td>
</tr>
This code will tell Spry to apply a CSS class named even for even rows, odd for odd rows, and to notice a mouse over event on a row and apply the hover class. For some reason though I couldn't ever get this to work with the following CSS:
<style>
.hover {
background-color: yellow;
}
.even {
background-color: red;
}
.odd {
background-color: blue;
}
</style>
Yes, I mixed blue, red and yellow. This is why I don't design web sites. Anyway, this never worked correctly for me. Luckily for me (not so much for them), I've got the Spry team on speed dial. Turns out this was a problem with my lack of knowledge of CSS. Kin Blas had this to share:
The 3 rules above all have equal specificity so if you have an element with more than one class on it like this:
<div class="even hover">
The last one defined in the CSS wins ... so in the above example the div would be red even when you hover over it. If you want hover to be more specific, then you have to change the order:
.even { background-color: red }
.odd { background-color: yellow }
.hover { background-color: blue }
When I switched the order - it worked perfectly.
Comments
About the Author:
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com
Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.
|
|
