improved star-rating widget December 11, 2006
[updated to work in Safari too]
You know all those little star-rating widgets you see on sites like Amazon? Well, Kondomedia has come up with a great example of how to put one together. There are just two little problems: 1) it jumps you to the top of the page every time you click a star. 2) the star you clicked on doesn’t stay clicked. Neither are difficult problems to solve but there’s no reason you should have to figure it out when I’ve already had to. So here you go:
Step one. Go read their article on it to understand the basics of how this all works and what we’re working towards graphically. There’s no point in me rewriting something they wrote so well.
Next you’ll need this image.
Then you’ll need to tweak the html in two key ways. First to make it not jump you have to link to a non-existent anchor instead of #. If you link to # or any other valid anchor your page will jump, but if you link to an anchor that doesn’t exist the page stays where it is. This is about the only time failing silently is a good thing. So, in the example here I’ve changed the anchors to #b1 through #b5. They could all be the same it really doesn’t matter. I just know that i’ll never have a #bn anchor because I’m smart enough to use anchors that actually mean something when you see them.
Next I’m going to actually make it do something because I’m assuming you don’t want a widget that just lets people click on stars for no good reason. In this example I’ve used erb code examples ( <%= foo %> ) of how you’d put in the dynamically generated values but you’d use whatever it is that you use. Note that I’m filling in the default value and calculating the width of the current-rating li element.
And, of course, you’ll need the updateVoteUI javascript:
The CSS remains exactly the same as created by Komodomedia:
Leave a Reply