Tuesday, January 20, 2009

Mootools star rating; trying Rabid Ratings

I have been looking around at different javascript-based rating systems for a new web site I'm making, and I liked the look and feel av Rabid Ratings, a Mootools 1.2-based app/plugin/widget (what is the right term for a thing like this?) written byMichelle Steigerwalt.

For a change, Rabid Ratings uses hearts, not stars, as the rating graphic. What sets it a apart from other systems I've seen, though, is the use of transparent graphics with a color bar 'underneath' providing the color change effect as you mouse over to do your rating. 

Now, being a traditionalist (and a guy), I felt stars would be more appropriate for the site I'm designing, so I set about changing the graphic. Now, at this point, I got confused. Turns out, Rabid Ratings uses a large PGN set to the background color of the page, with "punched holes" that show the ratings. Instead of the graphic being set to the size of the rating symbol, the whole PNG is rather large, about 300 pixels wide, and somehow centered around the transparent rating symbols.  Thankfully, the original PSD file is included.

Once again, being a guy, I never really read the instructions properly. Michelle documented how you should change the javascript file to reflect changes made to the PNG, and there's a GIF showing what measurements of the PNG file whould be put into each variable. Did I notice this? No. I ended up hacking away at the PSD, shrinking the DIV, modifying the calculations in the js, and generally wreaking havoc on the original code to make things work. In the end, though, things turned out alright, and I got a working, 5-star rating system with MYSQL storage of results, ip checking and the full monty. 

The moral of the story: If you use Mootools and need a star rating system, check out Rabid Ratings, but as always: RTFM! :-) Now, to make the system even more foolproof, Michell might consider adding a demo using a different size/type/number of rating graphics, just to illustrate the changes necessary to make it work. Oh, and make a zip of the whole script set. That done, Rabid Ratings would be just about perfect. :-) 

No comments:

Post a Comment