The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jRating : Very flexible jQuery plugin for creating quickly a star rating system

Tags :

Plugin rate :

August, 13th 2013 : jRating v3.1 !! - New option "sendRequest" and new method "onClick"


January, 28th 2013 : jRating v3.0 !! - You can reselect the stars to rate X times again.

New Options :
- canRateAgain (boolean) : if true, visitor can rate {nbRates} times (see {nbRates} option below)
- nbRates (integer) : If {canRateAgain}, number of times that a visitor can rate (please see full documentation)

Infos containers changes : id="18_1" become data-average="18" & data-id="1"




jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every details from "the number of the stars" to "if the stars can represent decimals or not".

There is also an option to display small or big stars and images can be changed with any other file easily.

Although jRating can be used with any scripting language, a PHP file that handles the requests is already included in the download package on github.



<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jRating.jquery.js"></script>


<!-- basic exemple -->
<div class="exemple">
   <!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" data-average="12" data-id="1"></div>
    <!-- in this other exemple, 8 is the average and 2 is the id of the line to update in DB -->
   <div class="basic" data-average="8" data-id="2"></div>


<script type="text/javascript">
      // simple jRating call
      // more complex jRating call
         length : 20, // nb of stars
         onSuccess : function(){
           alert('Success : your rate has been saved :)');
      // you can rate 3 times ! After, jRating will be disabled
         canRateAgain : true,
         nbRates : 3
      // get the clicked rate !
        onClick : function(element,rate) {
Default : true - Disable the rate info. Can be set to true or false
Default : 'jquery/icons/stars.png' - Relative path of the large star picture (stars.png).
Default : 'jquery/icons/small.png' - Relative path of the small star picture (small.png).
Default : 'php/jRating.php' - Relative path of the PHP page (jRating.php).
Default : 'big' - Appearance type. Can be set to 'small' or 'big'.
Default : false - If set to true, filling of the stars is done star by star (step by step).
Default : false - If set to true, jRating is disabled
Default : 5 - Number of star to display.
Default : 0 - Number of decimals in the rate
Default : 20 - Maximal rate
Default : 45 - In pixel - Absolute left position of the information box during mousemove.
Default : 5 - In pixel - Absolute top position of the information box during mousemove.
Default : false - if true, visitor can rate {nbRates} times (see {nbRates} option below)
Default : 1 - If {canRateAgain}, number of times that a visitor can rate
Default : true - Send value to server ?
Returns : (element,rate) - Callback function in case of success during rating.
Returns : (element,rate) - Callback function in case of failure during rating.
Returns : (element,rate) - Callback function when clicking to a star


its possible to save in a input ?

For sure you can !

1. In the success response (line 150), you can do something like :

if(!data.error) {

2. In your jRating.php, send the rate in json to the javascript file :

if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'rating')
  $aResponse['rate'] = floatval($_POST['rate']);
    // save into your database or anything else
    // send the rate to your javascript file
    echo json_encode($aResponse);

Can you explain with a sql code i m bit confused it is not updating the current value in mysql database.
Table have to column productno. and rate

how can I do this by ASP.NET? T_T...

send by ajax, receive post data, as same as PHP.

Hello, could you explain better how to record in the database?

Hi, lovely project. My question is, if the initail ratining is 0 it still shows all the stars. E.g. id="0_2"

Don't worry i was being thick. Thanks

HI, great plugin, but how can I send the value of the rating to my server? I don't use PHP.
Even if I go to your JS file and I replace PHPPath with my path, I still get server error 404. Page not found.
Thanks for your help

Hi Matt,

You have to use PHP ! How can you send the rate to your database without PHP/MySQL ? o_O

If you specify a good path for you PHP file, you should not have a 404 error :)

Great Work! I've got a question.
I try to get an ID from the URL in JRating.php
To save it with the voting into the DB...
BUT: i cant store this id.. any solution?

I get the id by:
$url = JURI::current();
$id = substr( $url, strrpos( $url, '/' )+1 );

Can you give us the value of $url returned by JURI::current(); and the id you are looking for ?


Great job. Easy to set up and customize. The best ive seen.
1 point its a bit difficult to put 5/5, 20/20 when decimals are set. Any solution?

Here is a strange question cause it would seem simple.
I cannot change the color of the Div which is containing the starts. It just stays white (i.e. has no color)
If I just add a color in the css style sheet under jStar nothing happens and I tried changing some stuff in the .js file but that doesnt work either.


Just set a background on the containing div

same problem here, did you ever find a solution?

the white color is from the star icon, not in the coding.
folder: jquery/icons/
can change in photoshop

Hi, great plugin thanks for the job :)
But I have a question, how do you set the initial value for the stars ?
Let's say, the current average is 4/5, it's easy I just have to call my div id "4_1".
But what if my value is 3.75/5 for example ? I can't call an ID "3.75_1"...
Thanks :)

I have setup with 5 stars but would like to change the mouseover info from example 1/5 to say "awful" to 5 stars being "awesome" on the mouseover info! Great jQuery plugin btw!


Hi Robert.

Actuallty, it's not possible. You have to change it into the JS file ! Maybe we'll update the plugin to show something like that instead of the rate.


you can add this string var
type : 'big', // can be set to 'small' or 'big'
infoText: ['awful','not bad','ok!','wow','excelent'],

and on mousemove
change this line
.html(getNote(newWidth) +' / '+opts.rateMax+'');


is that possible to use jrating with a java server. So, there is a servlet instead of the php page.



You just have to return the answer as json

great plugin,
i have question
i try to output the value in alert in div
cause i have several item want to rate it
but i want every item has rate and the div under it show that
'Your rate has been saved '

great plugin, the stars are working fine :)
How about the json response from the PHP file?
I would like to use the message from the PHP file without to change your plugin. Something like:

onSuccess : function(response){

Hi Olaf,

Did you find a away to use the message received from php ?



How do?

So, I see this is PHP centric, but am I correct in my presumption that php_path can be set to any server side script? if so, can we get php_path renamed to more agnostic name?

Can I reselect the stars to rate again please help me in this for i m using it in my project

Unfortunately not :(
Maybe in a next revision !

Now you can in the new version jRating 3.0 !

Hey, the plugin is working great. However i was wondering why on my ipad I can still see the border slightly. Its no big deal, I am just curious what causes this and if it is easily fixable.


Hi, i try try and try but i dont know how to put the id and rank in mysql can someone post a exemple plz!!!!if dont know how post id plz only rank

This plugin seems great except for the fact that the author has decided to force you into using his own update implementation.

Putting the database row id delimited by an underscore as the id is really dumb. And this is exactly why I despise PHP and the people who praise it. Why don't you just stick to jQuery and let the real software developers take care of the rest.

What an epic a-hole!

Great work by the devs - this is the most beautiful rating system I have seen online. I use it on two sites and everyone loves it.

When you have haters - it means you are doing something special. I bet nobody even knows this ass-clown is alive.

nice plugin but i dont use PHP.

can anyone help me with ASP and saving it to a DB?


how come there is no option for a default value, if there is I donot know how to do it. I mean that when the page load let say I want to show 3 stars out of 5 in red color for some other 2 out of 5 stars. how can I can do that. Thank you


Thanks to read the documentation of the plugin.
If you want to fill 3 stars out of 5 when the page load, you have to do something like :

<!-- 3 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" data-average="3" data-id="1"></div>


   length : 5


Hi, this default Value option does not work in 3.0. What is here wrong? All my default Values are rated whith 0 stars.

I typed


length : 5


Hi Jan,
It works.. Just take a look to our demonstration page !

I think you have a JS error on your page.


great plugin but is have one question
how i can set rating on startup
for example if already give rating to any one then how to show his/her rating on next time.

Hi, I'd like to include this on a plain html file (No php, rails, etc..) can the user input be saved on a text file on the same directory? (For example, 01.html input will be saved on 01.rating, etc...)

thank you.

Could this plugin write its votes to a text file and then display them correctly? If not, Could it call a perl script, that would write the votes down the text file, and then read it?

Comment faire pour mettre une valeur par defaut.Par exemple 3 etoiles sur 5 checked

thnak you so much it's very good to use it in projects

i haev problem to using this plugin for rtl sites how can i fix this

how can i get star value at onclick?
I want to update rating innerhtml on succes
I have
star star star star star



onSuccess : function(){

thank you

Hi, is there any method to skip the jRating.php file?

I am doing this in pure HTML, so I dont need the php server workings.

Thank you

why its not possible rate a video by different users logins.?
Is it possible for this code to make the calculation on rating?

Great work ! Easy to use, thank you !

How to display each star with different size? Example: (star1) height: 10px; (star2) height: 15px, etc..

Thank you.

Hi Luidi,

Unfortunately, it's not possible. Each star must have the same size :(


how do you set the initial value for the stars based on my database value,suppose
for example.
select rating from tblrating;

i have set 4 stars out of 5 any solutions you have?

Hi Nags,

You just have to do something like :

<div class="basic" data-average="4" data-id="{ID of your row}"></div>


suppose my data base value gets changes dynamically how handle this situation?i.e,first time 3stars are enabled next time 4 stars etc...

based on my database value i have set the you will set the stars based on dynamic values?


I have copy all js & css files and script type between head section and put in my php file

and i im not getting stars...

that is what i im getting from debug:

so my div /div is empty why? i have set between head javascript that reffered to .basic

Hi Robert,

You certainly have a JS error.
Please check it into your Firebug console.


Hi, Maiki

This is what i im getting from debug from Chrome:

i have included jRatings.css and jRatings.js and have added between this code:

$(document).ready(function(){ $(".basic").jRating(); });

Where i im doing wrong?

Your image doesn't show your JS errors but only your hmlt code :)
Please post an image with the messages written into your Firebug console.


Thank you for helping me to fix this.

I don't know how to get firebug console here to attach....but when i run index.php and click on Console i im getting only this error:

TypeError: H is undefined
[Break On This Error],function(){,o)});o.readyList=null}o(document).triggerHandle...

if this is not enought information please write me here how to get informations from firebug console.

Many Thanks!


I don't think the problem comes from jRating, but from another js file inclued befire jRating...
TypeError : H id undefined.. Try to see in which file H is called. I don't think it's in jRating.jquery.js :)



I noticed that when you include this on a page which has the body and div tags reset to 0 in CSS (commonly used to reset all margins in your browser) there is a bit of flickering when you slowly hover the stars from top to bottom even causing the tooltip text to revert to the text of the previous star during the flickering.

Is there any way to avoid this? as Removing the body, div margin: 0 will make me recheck all the site again.

Anyway, great work done here...

Keep up :)

Hi Maiki, I have a problem with the stars not turning red on initial mouseover. The thing is I instead include another jquery js file (say jquery-1.8.3.js) since I think the jquery.js file included in this doesn't make accordion work. Could you point me to the right direction? Thanks in advance.

Hi mm168,

Please can you give me the link of your page ?



I tried to set up the basic example but i can't get any star or background show. I have follow every step. I have changed the path in the jrating.jquery.js file to match with my files. I have includes the css and the icons too.

It is really strange because when i add an alert('hello') in the jrating.jquerry.js file i get the popup 'hello' show. But when i add this to the $.fn.jRating = function(op) { I get nothing. It's like I don't call the plugin but i do it with : $(".basic").jRating();

I am using cakePHP do you think it could be the problem ?

Hi. This plugin seems really nice. I am trying to understand how to make this work.

To be sure : "data-id allow" you to retrieve which group of star it is ?

But what is the purpose of "data-average" ?

Last question : I guess it is possible to have a form with multiple groups of stars, am I right or not ? If yes, Can you give me a hint to do so.

Kind regards

In the below code,i am getting the stars for first div
second div i am not getting the stars.
"data-id" field should be unique?

<div class="a" data-average="3" data-id="1"></div>
<div class="a1" data-average="4" data-id="1"></div>


Not, data-id is not unique :), it's a classical data attribute.



I love this plugin. I see you use it in PHP. Can I use it with JSF + Richfaces?



Everything is working fine with this plugin but I have a problem with Chrome. The star don't look normal as yo ucan see :

Any idea why ?


I'm not able to set initial rating
It showing rate as 1(instead of 3)
Below is my code

$(document).ready(function () {
length: 7, isDisabled: true

What is the problem? any idea?


You have no problem with your JS code.
Can you give us your html code ?

Good plugin.
I have embedded it on my asp page but I have faced one problem. Actually, it will work fine when there is only one control on a page but when I added two rating controls on the same page then the red color of stars while setting rate is not display.
I don't get any idea how to resolve that. Please look into this matter.


Hey! Great plugin but i encountered one problem hoping you could help me with...
If there are more ratings on the page there are naturally more divs with rating and divs where success message is viewed but in the function :


The problem is that $(this) returns "Object object" and not the ".basic" div

So basically I cant do stg. like $(this).find(".message_div")
Thank you in advance

Hi progz,
Please can you give me a link to see your page ? I'll have a look to your code.

You are saying to set a default value we have to set a data-average attribute.

But for example if I set it to 7 out of 10 and vote for 3 I will get 3 red stars followed by 4 yellow and 3 white.

How to after voting less than average value make yellow stars white?

it is possible to get the value of the new rate without PHP? I am using SCALA with LIFT.

Maybe if one can access to an attribute of the (i.e. data-rate), would easier.

Thanks for the project!

Thanks for this plugin, it works great. I'm making a few adjustments to fit in with our implementation as we need to pass some extra values through json to the php script, but all seems ok with that.

Are you aware of the issue that your Demo has on Safari 5.0 (iPad iOS 6.1) at all where you need to click the stars twice before the rating is acknowledged? The first click is confirmed by the number of stars turning red, and the box shown below it, but it's not until the second click that the rating is registered (which could be different value to the first).

Thanks again for a great plugin.


i am using this plugin in a template,on mouse over stars are not turning to red? i am using all the scripts and css which u r mentioned.

I don't seem to be able to use it. I want to insert the data-average value into my db via php, and i still can't seem to get it right. Kinda not working for me. Can i get a response as soon as possible (in less than 24hrs) showing a full practical working example that actually inserts into a database. Need it fast cos am currently working on a project and want to get this part over with. Thank you...

I'm having this same issue like Stanley.
Everything is working except sending data to MySql via jRating.php.

Can you please write sample mysql that inserts data to table ?
(no need to rush like this guy higher but will be nice for response :) )

Hello, firstly i want to thank you for this great plugin. It's really fantastic. But i have encountered a problem. Or maybe it's not a problem but a deficiency. When someone has rated full points (for example 10) to something, the display of this rate and the unrated stars are exactly the same. I mean the rated one show full colored 10 stars and the unrated one also shows full colored 10 stars. They both using the jRatingColor class in css. I will be glad if you give information about this. Thanks in advance.

Can i send extra param? Like "rating-for" = "image" or video or gallery. Basically i have one function for rating, and with some extra param to switch between rated item types

How do I use the isDisabled incase I am fetching information from a database and I need to ensure that a person can only vote once for a certain person after he/she has logged in?

l complete a review project within a Jquery 5 star rating plugin, it works very well and You can visit demo here

Awesome plugin! But had a question. How can i use the default messages coming from the php script with jNotify. Something like
onSuccess : function(msg){
jSuccess(msg,{ HorizontalPosition:'center', VerticalPosition:'center' });

change line 177 of jRating.jquery.js to

if(opts.onSuccess) opts.onSuccess( element, rate,data );

and your onSuccess : function(element, rate,data){

will use like this. the data is the data response from

Great work! Thanks!

Can I set "rate-enabled = false" if user (ip) already voted? I save the votes in DB, but I couldn't find a way to implement this in $(div).jRating();
setting nbRates = 0 does not work. Please help me in this. Thanks!

Hi nekuto,

You can use the option isDisabled and set it to true if you to disabled the plugin :)


I find the way to show the msg from php.
just modify jRating.jquery.js line 177 .
if(opts.onSuccess) opts.onSuccess( element, rate );
if(opts.onSuccess) opts.onSuccess( element, rate,data );

then data is the response data from

Wish can help you.

Hello, this plugin is really amazing, and i've customized it enough to fit all the needs i wanted. However, testing it on iOS devices (iPhone and iPad), i've noticed that it requieres an extra click to work. I mean, first time I click on it, it does not send anything to server. Once i click it again, it does work as it should. This also happens on your demos. On example 8, it lets you rate 3 times, but i need 4 click, since first click does not send anything to server, and second click starts working right.

Any help to solve this? Thank you

This plugin can be used in MVC or light js and html page.How to use

Is there a way to set the background color to a color other than white?

Hi Leonardo,

the white color comes from the mask image. Create a new mask image (into the folder) with the color you want :)



Thank you for this great plugin.
I have a small issue.
When jRating is integrated in to my coding on my local server running WAMP it works super awesome.
But when I upload it to my live server (LAMP), all I get is a yellow rectangle.
Any help is greatly appreciated.



I think the src is wrong on your live server.. Check the url of the image and the php file path.


Nice Plugin Best i have found on internet...... Can you tell me is it possible to store data in Mysql database and if yes then how???


Hi! How do i connect this with a DB? Especially i need to know which are the variables where the vote is saved. Thank you.

can u explain me how i can get the rating value to store in db


I tried to insert rating into a database, in jRating.php there is a comment
// YOUR MYSQL REQUEST HERE or other thing :)

so I insert my sql query:

$query_rating="INSERT INTO rating (id_utente, rating, poi_type) VALUES ('$_SESSION[user_id]', '', '$rate', 'esterno')";
$result_rating=mysql_query($query_rating) or die ("Non riesco ad eseguire la query $query_rating");

but data aren't insert into database. Can someone help me? Thanks.

Greetings! This is my first visit to your blog! We are a collection of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a wonderful job!

Hello :-)

First of all, great work! Just fine!

My question is, is it possible to send the answer of the rating via a html-form.

Looking forward to hearing from you,
best regards from Germany!


in,how to show the return values in the DIV:"Server response "?
Anyone can help me?

I tried using this in a .ASCX page. Even the stars don't show up ! I have added the Includes using VS IDE, where I can pick the correct URL for src= & href=. So I don't think that is the problem.

I have done the steps as you have said shown below

INCLUDE - in the Master file

HTML - the 'data-average' is marked as an invalid attribute, but that is because the VS IDE is still not HTML5 compliant. But that shouldn't be causing an issue during run-time ?

Calling the JRating Plug-in. It is within the DIV which contains the HTML too.

$(document).ready(function () { $(".exemple").jRating({ length: 10, decimalLength: 0 }); });

How could I reinitialize an object? I use rating block on a page which loaded with ajax. So I need to reinitialize it with all the page. But it doesn't work - I have the result of the first initialization.

Would it be possible to provide us the psd of the stars? It would be nice. I need to change the background color.

Hi fer,

Unfortunately, i don't have the psd. This plugin is old and i can't find the psd.
But if you want, you can create your own psd to change the bg color. Just pay attention to keep the good width and height of each star :) (big and small stars)


On iOS devices (iPhone and iPad), i've noticed that it requieres an extra click to work. I mean, first time I click on it, it does not send anything to server. Once i click it again, it does work as it should. This also happens on your demos. On example 8, it lets you rate 3 times, but i need 4 click, since first click does not send anything to server, and second click starts working right.

Any help to solve this? Thank you


Great Plugins and easy to use thanks!

I have some Question?

how to make it vertical instead of horizontal rating? thanks..

It it's possible to make it Vertical Rating instead of Horizontal?


Actually, there is no way to make it vertically :(
But if you can update this plugin to make it as you want (js & css).


Hey, When you press the star it instantly sends a message. Can you create it in a way that if you select a star, it holds on to it until you press your send button (for a form)?


This plugin works in Ajax ! So, there is no way to send the message after a user action.


I love your script... but I have a little problem with mobile devices. If you use the script with for e.g. iPad or iPhone you have to double-tap the star for being checked. Usually it has to be checked after the first klick.

hope you can help.


Thank you for the great plugin!
Is it possible to set the names of the variables passed to the sever?
Currently these are "idBox" and "rate". I would like them to be
"id" and "rate".

This would easy the integration into my rails application a lot. :)

Thank you very much!

Just a question please. Do i create my own database table or is there a sql query to use? Where do i put my info about database?

Thank you for any help creig

Please tell how to change the color of star when rating?

Hi, I have developed a jQuery star rating plugin that uses SVG.
The following is the demo to change the color of star when rating.

Hello. This is a very great plugin. Good job!!

Because of other plugins I'm forced to use jQuery 1.5.2 instead of 1.8.2. My issue now: the rate info won't move down/up when moving the mouse (y-direction). Moving in x-direction works fine. The problem about this: if u "come from top" with the mouse, it will hover the rateinfo, and it disappears.

Do you have any idea what i could change/add/.. in jQuery 1.5.2 so that moving in y-direction works?

Thanks in advance


Congrats for your very useful and practical rating system. It is very easy to configure and use. But I have a little problem.

I've implemented your rating on my webpage but when I make mouse over the stars then coloring start from middle to left and right side together not from left to right, please see screenshot of that -


great plugin, can you help, looking to have 5 stars, with a rating 1 to 5 but only going up in 0.5 stars .

i.e 0 - 0.5 -1 -1.5 - 2 - 2.5 - 3.0 - 3.5 - 4.0 - 4.5 - 5

Hi, can I suggest you to change your getNote function with this?
function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100),dec=Math.pow(10,opts.decimalLength;,note = Math.round(noteBrut*dec)/dec;
return note;

Sorry but did anyone FINALLY get a version where you can save the input? Any sample data or code lines would be really great since its useless if there is no option to save the votes!

Hi Maiki,

J'ai deux png, une étoile grisée et une étoile en surbrillance. Comment tu ferais pour implémenter le remplacement de l'étoile grisée par l'étoile en surbrillance à la place du changement de background color actuel ? Une idée ?

Super travail en tout cas !


I'm a little bit confused on how to get the value in javascript ?
I mean for instance show in an alert the value selected after a click :

          onClick : function(){
            var value=$(this).getNote(); // <==== HOW ?
            alert('Success. Value selected : '+value);

Thanks a million

Hi daymo,

To get the rate, you have to do something like :

  onClick : function(element,rate){
    alert('Success. Value selected : '+rate);


Thanks Maiki !

Yust to say you "thank you" for this work.

Hello, can this be used on a blogger blog ? i don't realy understand programing and i am looking for a long while allready for something like this. I would like that users can rate my recipes but i don't find any way to do it without a widget from other sites. Actualy i find but i dont understand how to make myself the star rater; no ideea where to put the codes ... Anyone could give me an idee how else i could put the voting stars ? I also got some stars on one of my posts but they don't keep counting the votes. Thanks in advance

Uncaught TypeError: Object #

has no method 'jRating' how can i solve this problem? i didn't include jquery.js because i had alredy included

Is there a way to display the output in text form as well as the star display? :)

To receive a personalized response from the PHP script, you can change the lines 180 and 192 of the file jRating.jquery.js

old 180 / / if (opts.onSuccess) opts.onSuccess (element, rate) to
new 180 / / if (opts.onSuccess) opts.onSuccess (element, rate, data);

old 192 / / if (opts.onError) opts.onError (element, rate);
new 192 / / if (opts.onError) opts.onError (element, rate, data);

onSuccess and onError becomes

onSuccess: function (element, rate, personal_response) {}
onError: function (element, rate, personal_response) {}

Sorry for my english.

Hi folks,
Using jrating, can i show static stars? in comments list i want to show users star rate in static like in

Please help me

When I use this plugin along with my stylesheet, all the stars are rendered even though the value is 0. Looks like the left offset value is coming out as wrong in JRating and thus the starting value of the first start is measured as 15 or so.

If I remove my style sheet, these examples are working great.

Looks like the sorrounding dom elements are interfering with the assumptioins made in JRating algorithm. Any suggestions?

How can i get Transparent Background?

i've tried editing the icon file in photoshop. but then its just color the background yellow instead of the star?

Best regards

I've done this a longer time ago. It's an older version that's modifyied to have transparent background.

Instad of color like in the original css
I use transparent star images to fill (it's a vertical sprite):

.jRatingAverage {
background: transparent url('../pix/stars/starample.png') repeat;
/* background: transparent url('icons/stars_red.png') repeat;
background-color:#f62929; */
background-position:0 -40px;
.jRatingColor {
/* bgcolor of the stars*/
background: transparent url('icons/stars_yellow.png') repeat;
background: transparent url('../pix/stars/starample.png') repeat;
background-position:0 -21px;

Great Plugin, I want to clear some points. First of all based on php in jRating.php there is condition if($success) and inside it i can insert the rate and id to database. OK i did it but i tried to disable the jrating means to stop it execute further if the same user is trying to same product again but script does not stops at all after checking the condition.
Also kindly suggest me the initialization code with 5 stars and having value 1-10 with step (filling) true,
Also how i can send id data-id to onclick function $(".basic").jRating({
onClick : function(element,rate) {
so that i might check using Ajax that is same user is rating same product again.
I am using php

Hey nice widget.
But how can i insert the rating into my DB?
I found the comment line in jrating.php but dont know what to do...

Thank you for jRating. How can I change image for star? When try with other image, stars don't change color, only their background

Is it possible change the data-range dynamically? I'm using AngularJS and I want to do something like the next:



$scope.average = 4;

But this isn't working.

Thanks for your help.

I was trying the same thing, then I realized the you need to initiate the jRating ( $(".basic").jRating({ ... ) only after angular has populated the html, this can be done in a number of ways. One way is to place your jRating JS code inside a setTimeout function. Hope this helps!

Hi ,
I am trying to use this plugin but am stuck in between .
When i am trying to include. jquery.js i think it is conflicting with normal jquery library .

Currently i am using jquery-v1.6.2.min.js and due to the jquery.js which is included with this project . It is interfering with the jquery library i was using .

Can you tell how can i fix this problem ?


actually I develop a plugin for the woltlab burning board software and know I want to implement your rating plugin but I can't find the point(s) to add the right code to save the data in the database.

Also the saved data should be loaded and each rating should be saved as one entry for each ID (the object to rate is a Deck and the deckID is given in the URL as &deckID={$deckID} .

Can you help me to implement this?


For who ask to see a MySQL example look this...

$id = intval($_POST['idBox']);
$rate = floatval($_POST['rate']);
    $mysql_hostname = "localhost"; 
    $mysql_user     = "user";            
    $mysql_password = "password";           
    $mysql_database = "database"; 
    $db = new mysqli($mysql_hostname, $mysql_user, $mysql_password, $mysql_database);
    if($db->connect_errno > 0){
      die('Unable to connect to database [' . $db->connect_error . ']');
    $sql = "UPDATE table SET num_rate= num_rate + 1, rate = rate  + ".$rate." WHERE user = ".$id."";
    echo $sql; 
    if(!$success = $db->query($sql)){
      die('There was an error running the query [' . $db->error . ']');

Hope can help...

Thank you for such great plugin. It solved my problems. I'm some problem in displaying rates in seperate div. For checking purpose i created a div which id is generated through php for every item. Though i can see that every div id has different numbers but when i alert on click it gives me the first same number every time. for example if item id is 57 then if i click on other item which id is 62 the alert shows the same id 57. Following is the script and id details for message. Please help me i couldnt figure out how to get the current div id.


great job, but i have 2 problem:

-how to make the background transparent, my background is gray, but the mask is white, I don't understand.

-my rating begin by the right ??
ex: rating 4/5, my result is 1star yellow and 4stars gray ???

Is there a way to have an editable 5-star rating, but give it a default value before the user selects? (i.e.- 2 stars highlighted initially, but can still be changed)

Hi Brandon,

Please read the documentation, you can do what you want :)

How can I retrieve the value of the star from database and display to page ? Thanks You for your plugin.

I just used your plugin and its really nice and flexible. I have one concern, how can we reset the plugin if it is already initialized, then you want to reinitialize it?

Here is my code so far:

$.post(baseurl + 'admin/queue/get_rating', { entry_id: id }, function(data) { if( == 0) { modal_entry .attr('data-average', 0) .attr('data-id', id) .jRating({ bigStarsPath: baseurl + 'assets/images/ratings/stars.png', length: 5, rateMax: 10, decimalLength: 2, isDisabled : false }); } else { modal_entry .attr('data-average', .attr('data-id', id) .jRating({ bigStarsPath: baseurl + 'assets/images/ratings/stars.png', length: 5, rateMax: 10, decimalLength: 2, isDisabled : false }); }}, 'json');


Plugin works great, i easly implemented connection to db. I have problem with multiple votes, I've added:

canRateAgain : false,

But still i can vote as many times as i want, what have i done wrong?

isit posible the Exemple 4 (Rate is disabled) can using jquery to modify the data-average value and display immediately?

Hi, Thanks for the great plugin.
I have tried the demo index.php file that comes in the plugin folder on my Server. It is working and I am getting success messages whenever I try one of the star ratings displayed.
My question is where the rating data is saved? I can't see any database table created on my server!
Is it stored on a remote server? Or did I skip an installation step?

id be great to have a svg version which would be styleable in css by the fill and stroke attributes.

Great job, with nice features and useful options. Thanks for sharing!

how to buy the plugin?

i had Problems with iPad and iPhone (you have to click twice).

So i changed the source code adding an event for touchstart:

Line 199:
touchstart : function(e){
var element = this;
var realOffsetLeft = findRealLeft(this);
var xPos = e.originalEvent.touches[0].pageX;
var relativeX = xPos - realOffsetLeft;

... (rest similar to click)

It is working, but i'm wondering if i was thinking too far...

Below example show how you can reset the star values...

Reset Star

$(document).ready(function(){ $('.reset').click(function(){ setrating(); }); setrating(); }); function setrating(){ $(".exemple").html('').find('.basic').jRating(); }

I want to rate 3 people, attached in a single page.
How to do this? Am i clear?


I want to use JRating in a google maps infoWindow.
In FF and IE this works fine but when I do a mouseenter/mousemove in chrome after moving the map the indication of the new rating to be set is showing wrong values.


Click on a marker on the map.
Do a mouseenter to see the new rating indication.
Move the map to the left or right.
Do a mouseenter to see the new rating indication again.

I tried to find a solution to solve this and noticed that the function function findRealLeft(obj) returns a different value each time the map is moved in FF and IE but in Chrome it always returns the same initial offset value although the elements position is changed.

The console.log outputs the return value of findRealLeft.

Any help would be greatly appreciated.


I had problem with iPad and iPhone
I have to double tap to select a star
I tried the solution provided by OliverR, but its not working for me
Please help

Thanks for great plugin. Only having an issue that when i zoom in my page, it shows an extra star with quarter selected. Any idea why i am having such problem?

Hi, it is really a nice plugin. but i dont know how to post extra data to server. currenty i can see we post idbox, rate,action to server,so can i add extra data ?

Thanks very much for the nice plug-in. Works like a charm on desktop/laptop but I noticed the onClick event (which I use to set the rating in hidden input) requires two taps on touch devices to trigger.

To fix this I included Modernizr, which comes with a good test for touch devices, and added (copy pasted) this code on line 136 in the mousemove function:

if (Modernizr.touch) {
var element = this;
hasRated = true;
globalWidth = newWidth;

if (opts.showRateInfo)

var rate = getNote(newWidth);
if(opts.onClick) opts.onClick( element, rate );

i download and use it but bars is showing instead of Stars.
Please help.

How to show alert for You have already Voted?

How can I change the backgroud color (actually white) of the stars ? I tried to change the backgroud of the containing div and to change the color backgroud of the small.png with Photoshop, but nothing works ! And there are nowwhere something with white background... Please help me !

I want to post the of rating stars to jRating and put it into mysql

By default i want to keep select some number (eg.3) of star. i can't do that.How can i achieve that using this script?

Hi. For those who want to use this plugin on the iPad: This works for me - thanked to OliverR's comment.

1. Add one line to function $.fn.jRating = function(op) {[...] onTouchstart:null //Don't forget the comma after onClick on line 38!

2. Add this in line 195, after click: function(e)..,
touchstart : function(e){
var element = this;
var realOffsetLeft = findRealLeft(this);
var xPos = e.originalEvent.touches[0].pageX;
var relativeX = xPos - realOffsetLeft;

//Taken from mousemove
if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
else newWidth = relativeX;

/*set vars*/
hasRated = true;
globalWidth = newWidth;

if(!opts.canRateAgain || parseInt(nbOfRates) <= 0) $(this).unbind().css('cursor','default').addClass('jDisabled');

if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
var rate = getNote(newWidth);

if(opts.onTouchstart) opts.onTouchstart( element, rate );
//Add if(opts.sendRequest)... from function click

3. in your js-file add onTouchstart: function(element, rate){//Do something}

I did not tested this in detail yet, but the first tests were working. If you need to send the request to server or step=false, then you have to see if it's working. I only need the step=true and no send request. Should still works otherwise though.

Hope, it helps some desperate users here ;-)

I will have a booth setup with a laptop that reflects 100 HTML web pages for a single site. I would like multiple people to rate any of the pages whenever they come up to my booth. Can this plugin capture each rating made for a page, save that specific result to a JSON file and then reset itself so that the next person who comes up to my laptop has an opportunity to give a different rating for the page previously open?

Hi, This library seems quite good I just was hoping to get an example of how to override the defaults please?

As i have the images stored in a different directory, I have adjusted the css file but I don't want to change the source in the js file so I can keep updating it when new versions roll in

specifically bigStarsPath and smallStarsPath
Thanks :)

Please am new to php. The plugin is not working and it seem its from the installation. The installation process is not correct. it doesnt match the downloaded file, please can any one explain where to save individual files in this plugin before it can work.
Please what happens to the php file in the installation folder, where should it goe.

I have a How to reinitialize jRating.
My scenerio is :-
When I click on any item , its rating should be populated/reset on popup.
But it is not working.

Any help would be appreciated.

Thanks in Advance

i want to display the rated stars only.means i want to show rated stars only but not the empty(white) stars is it possible.?

I want to send to the database in a form more reviews a product simultaneously.
I'll give you an example:
My article:
Quality rating: 3 stars
Presi review: 4 stars

$('.data-1).jRating({length: 5, decimalLength: 1,canRateAgain: true, nbRates: 5}); $('.data-2).jRating({length: 5, decimalLength: 1,canRateAgain: true, nbRates: 5});

Unfortunately does not work. All guest reviews are only displayed once.

Please help... Thanks


Thanks a lot for this very usefull plugin ! I have a simple question, I can't do what I want in my page. I would like to center the 5 stars rating under a center text in a div, but the div containing the stars always stay on the left part of this div. I've tried many way, but can't find how I can do that. Do you have any idea ?

Thanks again !

It looks very nice. It would be very useful widget, but unfortunatelly i dont know how to install it on my page because i am the layman in this matters:( Could use the step by step instruction how to insert it on webpage.

Wonderfull stuff !
Options and methods are simply amazing :-)
Thanks !


Can i use this to create a thumbs up/ thumbs down rating?

any suggestions on how to make it support RTL ?
when i put the mouse over the first star, the first one from right get colored ! this is because i'm using RTL bootstrap, any suggestions ?

Hi, I want to ask about how to prevent simultaneous ratings so that it will be counted as two not as one?

This plugin has been implemented well within my website from reading through this forum. Check it out @

how to increase the size of star greater than big image..??


This is a good plugin. I'm using this in Visualforce (Salesforce CRM) pages.

Just a question, how can I change the default grey star image with a different image? I tried but the plugin stop working (hoover effect stops working). Please point me to image change documentation if there is any.


I am using this on mobile and the fade speed is too fast by the time your finger leaves the stars to see the numbers frequently and also they only display once if you don't leave the control's focus multiple clicks wont register for the text display

To fix this change the js plugin code like so

Add the default option argument one line after type : 'big', around line 18
fadeSpeed : 'fast',//this preserves the old plugin behavior if not overriden when we initialize our jRating object

Change the code if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
from line 150

to the following
if (opts.showRateInfo)
var rateInfoSel = $("p.jRatingInfos");
if(":visible") == false)

This will fix the text only visible once and will allow the fade speed to be passed in as an argument when initializing the jRating object

I use this like so

isDisabled : disabled,
length : ratingMaxStars,
fadeSpeed : "slow",//Send in the new argument
canRateAgain : !disabled,
nbRates : ratingReRatesIfEnabled,
sendRequest: false,
onClick : function(element,rating) {
logThis("activateRatingsSystem: onClick: Rating changed to "+rating);
if(typeof(m_callback) == "function")

I've committed this change to gitHub under the project as a proposed change/branch by duindain

Cheers hope it helps someone, or gets accepted by the author

Thx for the great plugin

Hello, i want to know how can i set the total number from 20 which is by default.
i want it to 5.

how to change the color of star based on rating


I want to display selected number of star that the rate has been given by the user. How can I give selected number of star effect based on value I have got from the table.


This is very good plugin for rating but some problem face that am store the rate value in easly but how can shoow the rate value on front side means like database value is 2 then two star are diffrent color.
plz help me.

It's very nice plugin with nice features and useful options.
Great job.

Thanks for sharing!.

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />


>= 1.4
Current version
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [192]