DEVseo

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.

One thing to note here is that the original example I modified required a form that was hidden, then updated when a rating was clicked and submitted. This method creates a form when a rating is clicked in javascript and sends that instead. This was required in my project because the replaced element had to be an anchor.

Thing may get a little bit messy when it comes to the AJAX calls because I originally implemented quite an advanced system that contained a form and other bits and pieces when the rating was made. If you require a form to be submitted with some extra details I have included a switch in the script that allows this, however, for ease of use the form should be created as a separate file (a simple text version of the form with no other tags or anything) and the path to this needs to be included at the top of the javascript (everything is commented so you will know where to put it). One other other option that is required by the script is the path to send the final rating to so that your server can process it.

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:

View The Tutorial