I really needed a nice little star rating system with YUI for this blog (which can been at the bottom) and after a single search in Google I found Ville Saavuori's Star Rating Script for YUI, which is perfect for the job I needed (so you will see a direct implementation of it used here at the bottom of this blog!).
However, for a new project I am undertaking I realised that his implementation was not going to work for multiple rating systems on the same page because it is based on ID's, and as we all know, you can only have one ID reference in the DOM on one page. So I started to rework the script to allow for more rating systems on a single page using classes instead of ID's.
Below I have attached the script as a downloadable zip, which should contain everything you need to get the script working. I have based the script on using an element with the class name 'rating-el', so anything you need the rating system to override, please add that class to the element.
The syntax for creating your rating is as follows:
<div class="ratingdiv"> <a href="#n" title="Average: 3.1" class="rating-el">This will be replaced</a> </div>
As you can see in the example above there is a div surrounding the element we want to be replaced. I haven't tested this but you could probably use a span or any other element as a container here as the script simply looks for the class name. Then, on the element that you want to be replaced by your >rating system simply add the class 'rating-el'. The script will do the work of hiding this element and creating everything it needs to build your rating system.
Everything is nicely namespaced, so there shouldn't be any conflicts with this and other scripts you may have running
One thing to point out is that in order to get the current average for the item being rated you will need to add a title attribute to the DOM Node you need replacing that contains the exact phrase "Average: x.x": where x.x is the current rating, which will differ for you, obviously. it also requires a decimal place, even if it is 4.0 etc.
I have created a demo page which has a couple of examples, and the script and styles are all in the head of the document in the page. Also there is information on the YUI dependencies you will need, too.
Failing that, if you just want to get a copy, here's one I made earlier, which contains everything you will need to get the script working, including the demo page, which can be used as a reference point to installing the scripts.
Any bugs/feature requests, leave a comment below and enjoy!
Quick update: I have written a tutorials on how you can use MySQL and PHP to build the Star Rating into your site. Just click the following link:
Posted 17th Aug 2009 @ 15:32:55 Last update 24th May 2013 @ 18:01:35