Eyecandy: Nicer styles for the character navigation bar

Want to help out? Need help accessing the AniDB API? This is the place to ask questions.

Moderator: AniDB

Locked
Elberet
Posts: 778
Joined: Sat Jul 19, 2003 8:14 pm

Eyecandy: Nicer styles for the character navigation bar

Post by Elberet » Tue Nov 04, 2003 5:19 am

Just a small suggestion... Up to you if you like it or not, but if you do please feel free to implement it.

The idea:

Turn this...
Image

into this...
Image

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>
And finally, the CSS:

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;
}

Iceman[grrrr]
Posts: 312
Joined: Sat Aug 02, 2003 3:22 am
Location: Québec, Canada

Post by Iceman[grrrr] » Tue Nov 04, 2003 1:07 pm

Shouldn't that be in feature requests ?!?

Elberet
Posts: 778
Joined: Sat Jul 19, 2003 8:14 pm

Post by Elberet » Tue Nov 04, 2003 1:17 pm

No, 'cause a Feauture Request is "Hey exp, can you change this to look like this and that?" while Development is "Hey exp, look at that code and grab it if you like." :P

Locked