The idea:
Turn this...
into this...
Pros:
- small change in the design template and output, no extra scripting required.
- enlarges the click-able area for small and hard-to-point-at character.
- doesn't need much markup.
- has a nice roll-over effect.
- needs no JavaScript, only CSS.
- works in all browsers, tho Gecko-based browsers will display it the nicest.
Cons:
- another nested table... but I couldn't find a way to avoid using one without breaking compatibility with older browsers.
Compatibility:
- IE displays the rollover, but doesn't interpret "display: block" for a-tags - the click-able area for small characters stays small.
- All browsers except Mozilla will show a traditional, rectangular border around the hovered/active element, since the round border is created with a vendor-specific CSS property. (-moz-border-radius)
The new character bar markup would look like this. The prev and next cells are unchanged, they're just here for reference.
Code: Select all
<td align="left"><i>prev</i></td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" id="charsel"><tbody><tr>
<td id="charseljump">Jump to:</td>
<td><a href="#">all</a></td>
<td><a href="#">0-9</a></td>
<td><a href="#">a</a></td>
...
<td><i>k</i></td>
...
<td><a href="#">z</a></td>
</tr></tbody></table>
</td>
<td align="right"><i>next</i></td>Code: Select all
#charsel a{
display: block;
padding: 3px 5px;
}
#charsel i {
display: block;
background-color: #babdc4;
padding: 2px 4px;
border: 1px inset #aaa;
-moz-border-radius: 4px;
}
#charseljump {
padding-right: 5px;
}
#charsel a:hover {
background-color: #cfd2d9;
padding: 2px 4px;
border: 1px solid #aaa;
-moz-border-radius: 4px;
}
#charsel a:active, #charsel a:focus {
background-color: #babdc4;
padding: 2px 4px;
border: 1px inset #aaa;
-moz-border-radius: 4px;
}