Simple Cross Browser Rating Script For Mootools.

Samples of Ratings


MooRating is a simple ( cross browser , of course as it uses the power of MooTools library) , lightweight and excellent Mootools based rating solution. It is not termed as “Star Rating”, simply because, the rating image could be as you choose ( I have provided Stars, Bars and Hearts with the download, but can create your own variety and drop it in).

How does it looks like :

Mootools Rating with different images
View Demo
Mootools Rating with Percentage values
View Demo
Mootools Rating with Fractional values
View Demo

Rating data: Whole Number, Decimal or Percentage
Currently the script is designed to show the rating data as whole values (1,2,3,4,5), in decimals (1.24, 3.45 etc) or in percentages( 12%, 55% etc) . The choice to show data in any of the mentioned formats can be set simply by changing some flag values within the javascript( moorating.js)
Basically there are two e two flags to play with, for displaying values in the format of your choice...

var inpercent = false; // Set this flag to true , if you require percentage values to be displayed
var isFractional = false // Set this to true, if you want fractional values like 1.24, 1.25, 4.56 rather than 1,2 ...5

And I dont think there is any explanation required for this. Moreover. The script is very simple. If you know a little javascripting, you could modify the script to get any sort of value displayed. For eg if you wanted three decimal places to be displayed ... just tweak the script as below ...

if(isFractional){if(x<=5 || x >=0) moostartval[i].innerHTML= formatNumber(x,3);} // 2 is changed to 3
else{moostartval[i].innerHTML= Math.round(x);

Updating Rating Value:
I havent bothered writing any AJAX scripts for updating the Ratings value, because I know from my experience that NOT ALWAYS do it intend to update the RATING as soon as the user rates something. You are free to do whatever you want with the rated value , Update it using AJAX or Submit it or Set a hidden form field value , to be submitted with the entire form etc.

There is function in the javascript called "updateRating". This function has been passed the the ID of the Rating Div, to identify as to which ratings ( if there are more that one ratings on the page) was updated and the value of the rating [updateRating(id, rating)]. You could choose to whatever you want with these values , as i mentioned earlier.

Rating Image: Stars, Hearts , Bars or anything you please
Changing the rating to any of the above types( stars, hearts etc) is very simple. Just create an image similar to the one provided and drop it in. Remember , if you change the name of the image, do make necessary changes in the CSS file , see below.

.moostar { margin:0px;padding:0px; overflow:hidden; width: 84px; height: 20px; float: left; background: url('stars.gif') repeat-x; }
.moostar span { float: left; margin:0px;padding:0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent: -9000px; z-index: 20; }
.moostar .curr { background: url('stars.gif') left 25px;}

Most ratings widgets use star and half-star images with mouse over events on each star. Moo Ratings uses a simple sprite image as a background image to achieve the required visual effects with a very low overhead.

Mootools 1.2
Download Source: