Please, check the Tutorial on Github.

  1. Babar 29 Sep 2022 11:37

    Wow Great, thank you that's what i was looking. glad to know that it works perfectly for dynamic data.

  2. sobiab 14 Feb 2022 09:47

    I have detect my error that wan in my website by reading your article,

  3. haseeb 21 Dec 2021 01:53

    when i write the html code with jquery, a click function doesn't work $("#div1").html("


  4. init one 1 Dec 2021 10:58

    Hi guys, i have implemented this js in phprunner. The stars show up good on view page, but if i export it to pdf the stars doesnt show up.
    Any ides whatas goin on?

    Thanks in advance

  5. Webbie 2 Jan 2021 14:10

    Works fine but i have an issue with nested_attributes in a form.

    How dow you set "scoreName: ''" for nested_attributes in Rails?

    1. José Silvestre 2 Mar 2021 15:35

      Hi There! How can i set the raty to readonly after click?

  6. Gonz 26 Mar 2018 14:32

    Great plugin! Thanks! I'm getting a JS error when mousing over the first star then mousing out to the left. I'm using the font icons. I noticed the error only shows up if I have "half" set to true. Any help would be appreciated.

    jquery.raty.js:510 Uncaught TypeError: Cannot set property 'className' of undefined
    at HTMLDivElement._setIcon (jquery.raty.js:510)
    at HTMLDivElement._roundStars (jquery.raty.js:505)
    at HTMLElement. (jquery.raty.js:247)
    at HTMLElement.dispatch (jquery-1.11.1.min.js:3)
    at HTMLElement.r.handle (jquery-1.11.1.min.js:3)

  7. AB 15 Mar 2018 12:18


    great plugin! I Have a question about hints. How can you set a hints to display as tooltip and not in some container?


  8. desheng 7 Nov 2017 20:15


    First thanks for this great codes.

    One question is, if half is on, then click score is not the value customer clicked.
    For instance if we use
    click: function(score, evt) {
    alert('ID: ' + + "\nscore: " + score + "\nevent: " + evt);
    and set
    half: true

    then if people click 3 start, it shows 2.677777..

    Thanks for your reply.

  9. Onesix 7 Nov 2015 06:04

    The default raty rating it can be possible to make it dropdown? because i need is dropdown rating. There's a possibility that the default raty rating make dropdown? Thank you! Anyway. This tutorial is very useful. Keep it up. :)

  10. Mark 4 Nov 2015 07:11

    What is the minimum jquery version to use 2.7.0 of raty.
    I used 1.10.4 but raty is not working.
    Getting Below Error:
    Uncaught TypeError: Cannot read property 'fn' of undefined

  11. Scot Nery 2 Nov 2015 05:44

    Love it. thanks. Here's a sample of using $.post() because it took me a while.

        score: function() {
                  return $(this).data('score');
          click: function(score,data){
            var id = $(this).data('id');
            $.post('rate-it.php',{rating:score,id:id},function(data){ alert(data); ));
    <div class="solid-stars" data-id="432" data-score="3"></div>
  12. Paden 26 Oct 2015 13:48

    We are trying to use the score method to pull the score using AJAX but it appears that the script doesn't wait on the result and instead shows 0 stars. Any ideas on fixing this? In the meantime we are just using another on load call to change it after the fact.

    click: function(score, evt) {
    var options = {
    'action' : 'addRatingForArticle',
    'volNum' : volNum,
    'employeeID' : employeeID,
    'section' : section,
    'rating' : score
    $.get( "ajax.php", options, function( data ) {
    updateNumOfRatingsForArticle( volNum, section );
    path: 'img',
    readOnly: function() {
    var options = {
    'action' : 'employeeHasRatedArticle',
    'volNum' : volNum,
    'employeeID' : employeeID,
    'section' : section
    $.get( "ajax.php", options, function( data ) {
    return Boolean(data);
    score: function() {
    var options = {
    'action' : 'getRatingOfArticle',
    'volNum' : volNum,
    'section' : section
    $.get( "ajax.php", options, function( data ) {
    return data;

  13. zan 2 Oct 2015 01:25

    Thank you for great plugin.
    I have a problem.
    I want to make start bigger.
    You can help me?

  14. javier enciso 20 Aug 2015 14:13

    Hi Washington!
    thank you for your plugin...
    Had some trouble to use fonticon option in old android 2.3.3 browser, but I solved it changing some stuff in the css...
    Have a look if you want to:

  15. Prem 22 Jul 2015 13:50

    Does it work with angularjs?

  16. deepak sharma 22 Jul 2015 07:45


    Could you help me to remove title attribute from IMG tag

  17. Adil Saeed 4 Jul 2015 07:49

    I am trying to use the raty plugin with handlebars

    Here is my code

    Handlebars Helper

    Handlebars.registerHelper('ratingMark', function (id) {

    $rating = $('#id').raty({
        half: true
    return 1;

    $output = new Handlebars.SafeString($rating);
    return $output;



    The OutPut is Like:

    [object Object]

  18. HasanG 23 Jun 2015 02:17


    I'm making an ajax request on click event and get new calculated score after rate. I wanted to set the new score inside click event but I was unable to do it. What is the right way to do it?

  19. Hoang 15 Jun 2015 01:38


    I wonder if we can run raty with rendered stars div like this. In my case, I already rendered html and just want to make raty work with this html. Hope you can help! Many thanks!

    <div id="numberMax" style="cursor: pointer;"><img alt="1" src="" title="bad">&nbsp;<img alt="2" src="" title="poor">&nbsp;<img alt="3" src="" title="regular">&nbsp;<img alt="4" src="" title="good">&nbsp;<img alt="5" src="" title="gorgeous"><input name="score" type="hidden"></div>
  20. Bruce Wayne 11 Jun 2015 11:30

    How to return the Hint on click?

    I'm already returning the score this way:

        click: function(score) {
        alert('ID: ' + + "\n" + "\nRATE: " + score);


  21. Phil 5 Jun 2015 13:23

    I'm having a problem changing scores. Setting the score initially works fine, but on sebsequent score changes, I get opts == null on the following line:

    _bindOver: function () {
    var that = this,
    action = that.opt.half ? 'mousemove.raty' : 'mouseover.raty'; // opt is undefined here

    I'm calling $('ctrlName'),raty('score', value);

  22. Manikant 5 Jun 2015 02:53

    What js and css files we need to add for raty.

    What i done, is giving error - unable to load images at input tag

  23. jay 28 Apr 2015 03:50


    Is there any option to get hint and value both at a same time. as currently one disable the other.

  24. Times city park hill 12 Apr 2015 05:44

    i want to use more icon in wordpress as icon-check, icon star

  25. Waskadagama 4 Apr 2015 18:17
    • add "height" and "width" attributes to img tags
  26. Waskadagama 4 Apr 2015 18:11


    Is it possible to add "height" and "width" attributes to tags:

    <img alt="1" src="raty/lib/images/star-off.png" title="bad">


    <img alt="5" src="raty/lib/images/star-off.png" title="gorgeous">

    to make it PageSpeed friendly?

  27. Sam 23 Mar 2015 11:16

    I am using new version of raty v2.7.0. But unable to find touch support to raty. When i press the star using iPod respective click event doesn't get trigger. Do you guys have any solution for this.

  28. gaara 23 Mar 2015 07:41

    Iam a newbie my code look so how i could integrate your code in my page

     <style type="text/css">
            .rating {
              overflow: hidden;
              display: inline-block;
          .rating-input {
              position: absolute;
              left: 0;
              top: -50px;
          .rating-star {        
              display: block;
              float: right;        
              width: 16px;
              height: 16px;
              background: url('Blastar.png') 0 -16px;
          .rating-star:hover ~ .rating-star {
              background-position: 0 0;
    /* Just for the demo */
    body {
        margin: 20px;
    <input type="radio" class="rating-input"
                id="rating-input-1-5" name="rating-input-1">
            <label for="rating-input-1-5" class="rating-star"></label>
            <input type="radio" class="rating-input"
                id="rating-input-1-4" name="rating-input-1">
            <label for="rating-input-1-4" class="rating-star"></label>
            <input type="radio" class="rating-input"
                id="rating-input-1-3" name="rating-input-1">
            <label for="rating-input-1-3" class="rating-star"></label>
            <input type="radio" class="rating-input"
                id="rating-input-1-2" name="rating-input-1">
            <label for="rating-input-1-2" class="rating-star"></label>
            <input type="radio" class="rating-input"
                id="rating-input-1-1" name="rating-input-1">
            <label for="rating-input-1-1" class="rating-star"></label>
  29. Nauman 17 Feb 2015 13:47

    Hi Washington Botelho,

    Its good to see you are helping other and doing good job.

    Normally we are using $('div').raty({ number: 3 }) where we can get score of this rating from 1 to 3. In my scenario I have to set values of rating for example I want score in term of 12, 18 or 85. Can you confirm me is it possible to set score value instead of 1 to 3.


  30. kaito 11 Feb 2015 06:22

    for my question #807 a little workaround...

    $( document ).ready(function() {
        // fix for hidden input field inner raty element
        $( '.raty' ).find( 'input[name="score"]' ).remove();
  31. kaito 10 Feb 2015 13:58


    at first: very nice plugin! thanks for it!

    how i can disable the hidden input field which will be created on loading ?


  32. Srikant 16 Jan 2015 11:28

    How to rate the star right to left wise for arabic language.

    1. Ben Maxfield 16 Feb 2015 09:56

      Srikant, just set this CSS against the container

              unicode-bidi: bidi-override;
              direction: rtl;

      Double check the ratings come through in reverse, if they don't just change the values in your code.

  33. Robert 29 Nov 2014 07:49

    Thanks, mate Nice plugin, works fine.

  34. luis 28 Oct 2014 11:51

    The file version v2.7.0 is wrong, there is a website in Chinese

  35. dcy 6 Oct 2014 09:14
                 score: function() {
                   return $(this).data('score')/2;
                 score: function() {
                   //score = $(this).data('score');
                   //console.log("38 score", score);
                   return $(this).data('score')/2;
                 space: false,
                 starType: 'img',
                 readOnly: true,
                 target: '#hint',
                 precision: true,
                 targetKeep: true,
                 targetType: 'score',
                 targetFormat: '{score}'

    Because my total value is 10, each star is 2, How can i show score * 2 for the targetFormat, I tried targetFormat: '{score}'*2, It is not work.

  36. Tec 1 Oct 2014 12:19

    I'm trying to to use the Star Type one but when I add another option, in my case the targetScore option since I want to populate a hidden field, the cancel stops working.

    My final options look something like this:

            cancel: true,
            half: true,
            starType: "i",
            targetScore: "#target-score"
  37. Soldier 26 Sep 2014 13:03

    Is there a way to use a custom icon for each value? i.e. red icon for 1st star, yellow icon for the 2nd star....

  38. blackhawk 11 Sep 2014 18:29

    Is there way with this plugin, to keep the value with "target score" AND ALSO provide a unique value for target score as well? So that each target score can be sent to my localstorage and not overwritten from a previous click?


  39. Soldier 11 Sep 2014 00:47

    Awesome plugin, thanks :)

  40. Leonardo Ganzerli 12 Aug 2014 12:11

    With some phones, if you scroll down the page and tap on the star rating changes unintentionally, you can set only one vote and then voting for change is required before the command "cancel"?

  41. thE_iNviNciblE 10 Aug 2014 18:05


    really cool Jquery Plugin, easy to use fast to implement.
    Done for this Website in approx 2 hours, with db save, email ...

  42. Keem 9 Aug 2014 12:40

    how would i set the score callback for a json data? my json data has more than one index so I just need to access the score index on my json.

  43. toc dep 7 Aug 2014 22:39

    hi men. I want to install this js site but now I do not know where to start. I need support

  44. Habict 7 Aug 2014 01:54

    Hello,Tell me how to get the name of the stars "hints" under the stars at once, when the page loads, not when you move.

  45. Ahmed Ibrahim 6 Aug 2014 05:27

    Fantastic plugin, However I have aproblem setting it to from right to left. Everything is working fine but when using half option and the mouse hover the stars only it display the half start if the mouse is over the left side of the star and it should be when the mouse over the right side of the star, any help???

    1. Washington Botelho author 7 Aug 2014 00:00

      Ahmed Ibrahim,

      My this comment can help you:

  46. Troy 22 Jul 2014 15:42

    Great library! I am using the Font (i) option, and I want to use the iconRange to have a different color star for each star (1=Blue, 2=Light Blue, 3=Yellow, 4=Orange, 5=Red).

    Furthermore, I would love it if I could make all the stars leading up to the selected star that same color. For example, if 3 was selected, Stars 1, 2, and 3 would now be yellow and 4 & 5 would be empty. If 5 was selected, all stars would be red.

    Any guidance on how best to do this would be GREATLY appreciated!

    1. Washington Botelho author 6 Aug 2014 23:57


      Do like Vinicius J L said or wait for next version soon.

    2. Vinicius J L 6 Aug 2014 21:24


      You could apply in raty code the diff patch in

      This patch adds the new feature iconRangeSame that should be used together with iconRange.

      The iconRangeSame is a boolean feature (default is false), when it is set to true, all icons before the current one (icons at left of current icon) are shown as the current one.

      It has the same effect as

  47. Vinicius J L 19 Jul 2014 23:51

    Very nice plugin. :)

    Just a doubt, how does it get the readOnly value?

    Does $('.rating').raty('readOnly') return the readOnly value?

    1. Washington Botelho author 6 Aug 2014 23:53

      Vinicius J L,

      Does not matter if star is readonly or not, the way to get the score is the same:

  48. Bill 18 Jul 2014 14:10

    Hi Washington,

    Trying to use Star Type in 2.7 I set it to 'i' and have your fonts referenced, but getting blank boxes. What else do I need to do?

    1. Washington Botelho author 6 Aug 2014 23:52


      Nothing, since your fonts is been fetched right.
      Somethings is good a command + shift + R to clean the browser cache.

  49. Persi 17 Jul 2014 16:55

    Nice work dude... \m/

  50. Ashfaq 17 Jul 2014 04:21

    Hello Washington Botelho,

    i need to show the ranking within 100 score currently there is max score only 5 if i show 5 stars i can have only max 5 score but i want to show 5 stars with max score of 100

    is it possible within the options ?

    1. Washington Botelho author 6 Aug 2014 23:49


      Each star has +1 value, then do 100/5 = 20, so each value will be 20 for you.
      Do this change before save on database.

  51. James 29 Jun 2014 10:15


    I have created a very simple page. But it doesn't work with score attribute. I cannot find where the problem is. It will show 5 grey stars, but it should show 3 yellow stars.

    $.fn.raty.defaults.path = 'js/images';
    $(function() {
        $('#score').raty({ score: 3 });
    1. Washington Botelho author 3 Jul 2014 21:09


      The options score just do the rating.
      If you want to change the numbe of stars, use the option number.

  52. Muhammad Saleh 25 Jun 2014 09:41

    Quick tip for anyone who will use Raty in RTL application
    you will find that the half star icon will work properly in LTR as it will be flipped in RTL

    To fix that don't create a new image just use this snippet:

      -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
        -ms-filter: fliph; /*IE*/
        filter: fliph; /*IE*/

    The previous snippet will flip the image horizontally and it's cross browser.

    Happy Coding!

    1. Washington Botelho author 3 Jul 2014 21:06

      Muhammad Saleh,

      Thanks! (:

  53. Naseer 25 Jun 2014 03:38

    The click callback is not working with other options. My code is...

    $(document).ready(function() {
      $('#star-<?php echo $result['ItemId']; ?>').raty({
        readOnly  : true,
        score     : <?php echo $result['StarRating']; ?>,
        hints     : ['<?php echo $result['StarRating']; ?> out of 5 stars', '<?php echo $result['StarRating']; ?> out of 5 stars', '<?php echo $result['StarRating']; ?> out of 5 stars', '<?php echo $result['StarRating']; ?> out of 5 stars', '<?php echo $result['StarRating']; ?> out of 5 stars'],
        precision : true,
        click     : function() {
          alert('score: ');
    1. Washington Botelho author 3 Jul 2014 21:04


      First, when you have a doubt try to do a simpler example as possible.
      I don't know if some of your dynamic PHP variable is breaking something.
      Put some code on a live example on web then pass us the link.

  54. Websun 24 Jun 2014 22:49

    How can I start using this Raty? What else do I need other than jquery.js and jquery.raty.js?
    Sorry if this question looks silly.

    1. Washington Botelho author 3 Jul 2014 20:59


      The best way to know how to use Raty is check this demo page. But basically is this:

      <script src="jquery.js"></script>
      <script src="jquery.raty.js"></script>
      1. José Silvsetre 2 Mar 2021 15:33

        Hi all! How can i set the raty to readonly after click it?

    2. Muhammad Saleh 25 Jun 2014 09:32


      You will also need the images for the
      star on
      star off
      star half

      and you may skip the fonts ;) I did that

  55. Tom 19 Jun 2014 10:53

    Is it possible to turn off the hints all together?
    When I pass null and it shows the 'score', it's not showing the fraction amount. I.e. a score of 3.5 for the hint is showing as 3. As such, I'd like to turn it off.

    1. Washington Botelho author 3 Jul 2014 20:57


      The version 2.7.0 will suport fraction hint.
      You can use the code from master to test it before the official release.

  56. anon 15 Jun 2014 06:41

    Wow, I'm impressed. This is very nice

  57. Waleed 10 Jun 2014 09:19


    Is it possible to have a different image on hovering and different for a set rating. For example normally if i have a 3 star out of 5 star rating already set as the average user rating, so the 3 stars are yellow. What if while hovering over the stars i want to have orange stars showing your hover selection and when you select it say 4 star you set 4 stars yellow


    1. Washington Botelho author 15 Jun 2014 23:58


      The same request of Alex.
      Please, open an issue.

  58. alex 2 Jun 2014 22:31

    Feature Request:

    It would be nice if there were 4 states with 4 images. Currently this is used only for ON or OFF, so you can show only what the user has voted for before or what they are voting for now. Many sites have a need to show the average vote across all users as well. In that case you would need 4 states (OFF, ON-USER, ON-COMMUNITY, ON-BOTH). That way you can show both how this particular user voted as well as the average community vote.

    1. Washington Botelho author 15 Jun 2014 23:56


      It is a lot more code and I don't know if is a good idea.
      The plugins is big enough. But open an issue and lats watch the +1's.

  59. Shawn 31 May 2014 23:36


    First, thank you for writing and sharing this. It has saved me a lot of time and works great!

    Second, I do have one small issue with cancel. It seems to work great in non-IE browsers (figures). In IE, it clears the rating when I mouseover the cancel image but as soon as I move my mouse off of the cancel image, my rating is reset to the original. Any ideas?

    Thanks again,

    1. Washington Botelho author 15 Jun 2014 23:51


      Could you open an issue?

  60. Elad 29 May 2014 14:52


    I am trying to change the to readonly onclick but it is not working.

    Here is my code (my div's ID is starRating):

        click: function(score, evt) {
          $('#starRating').raty('readOnly', true);

    What am I doing wrong?

    1. Washington Botelho author 15 Jun 2014 23:48


      I run you code and it works.

  61. Teo Dragovic 23 May 2014 09:41


    is it possible to extend plugin so it outputs <span> element with starOn and starOff as classes? I'm thinking of using icon font instead of images.


    1. Washington Botelho author 15 Jun 2014 23:44

      Teo Dragovic,

      Yes, use the version 2.6.0 with option starType.

  62. Tatiana Perere 16 May 2014 13:22


    I want only the star selected get marked. How can I do that?

    Thank you!

    1. Washington Botelho author 20 May 2014 02:54

      Tatiana Perere,

      Use the options single.

    2. Tatiana Perere 16 May 2014 16:28

      Did it changing the js lib.

      I suggest to add this feature as an option. Very easy to do it.


      1. Washington Botelho author 20 May 2014 02:55

        Tatiana Perere,

        Good job, but it is a option called single.
        But the next time a pull request is a polite thanks.

        1. Tatiana Perere 21 May 2014 18:58

          Washington Botelho,

          Hey man, I'm sorry.

          I undo those changes and I use the single=true option now.

          But the mouseOver behavior was bothering me, so I added the code on

          _bindOver: function() { :
          else {
    , score);

          and to have the mark action onclick I added the same mouseOut bind to onClick bind:

            $(this).on('click.raty', function(evt) {
              var score = parseFloat(self.score.val()) || undefined;
      , score);
      , score, evt);
                if (self.opt.mouseout) {
        , score, evt);

          Now I have a very different behavior when using SINGLE.


  63. Hussaim 15 May 2014 02:56

    Can i change name of <input type="hidden">?
    i want to assign parent div name to hidden element name

    <div class='star' name=n>
      <input type='hidden' name=parentName>
    1. Washington Botelho author 20 May 2014 02:53


      Yes, use the option scoreName.

  64. florin 14 May 2014 08:22

    Same question as Jing bellow :)

    1. Washington Botelho author 20 May 2014 02:51


      Same answer! :)

  65. Jing 13 May 2014 00:12

    I hope after clicking the star become read-only.
    How should do?
    Thanks in advance!

    1. Washington Botelho author 20 May 2014 02:50


      Inside click callback, calls the readOnly function.

  66. Joey 7 May 2014 16:49

    First, thanks for the plugin!

    I deployed the plugin, but was having trouble with the validation of the rating. I wanted to use my own element to house the score. I used the scoreName & targetScore, but the plugin always creates an element with the same name as the one I created. Is there a way to tell the plugin to no generate an element?


    1. Washington Botelho author 20 May 2014 02:49


      The score element is create only if you don't provide a valid (existent) target score:

  67. cesar 5 May 2014 16:00

    when i write the html code with jquery, a click function doesn't work

    $("#div1").html("<div id='star' data-score='1'></div>");

    help me please and excusa me, a dont speak english :D

    1. Washington Botelho author 20 May 2014 02:47


      It should be work, since you bind the Raty after the HTML is on body.

      var star = $('<div id="star" data-score="1"></div>').appendTo('#div1');
    1. Washington Botelho author 20 May 2014 02:45


      Good to hear that.
      Great job and thanks! (:

  68. John Paul 1 May 2014 07:11

    Is there any way to stop the user from submitting another rating after they have already sent one? I am recording these to database and want it to be a one time thing per user. Could I set it to read only after my POST?

    1. Washington Botelho author 20 May 2014 02:43

      John Paul,

      You can, but it is just JS, Raty can't do it for you.
      You can set it to read-only the time you want, but the time and how you want to do this, is up to you.

  69. José Leite 30 Apr 2014 15:10

    Washington Botelho,

    I wrote the following code:

    {{if comments:}}
      {{for idx, comment in enumerate(comments):}}
        <div class="badge badge-warning" id="star{{idx}}">{{=comment.rating}}</div>
            numberMax : 10,
            readOnly: true, 
            score: {{=comment.rating}} 
    1. Washington Botelho author 20 May 2014 02:27

      José Leite,

      Build your HTML elements first, then after apply Raty using class and getting the rating from data attribute, like so:

      <div data-rating="{{= comment.rating}}" class="badge badge-warning">{{= comment.rating}}</div>
        score: function() {
          return this.getAttribute('data-rating');
  70. Swagata 30 Apr 2014 04:40

    I tried the mouse over but it did not work. on mouse over call back , I was setting the score in a hidden variable , to get it's value on form post.

    1. Washington Botelho author 20 May 2014 02:41


      Raty already has a hidden field called score by default the you can change.
      Your you can use the new option scoreTarget and decide to where send the score.
      Your you can use your ideia and copy the score for wherever you want.

  71. Marc Stein 21 Apr 2014 13:39

    Hi Washington,

    I'm having a styling issue with Raty that I've been unable to solve.

    If you take a look at you can see that the stars stack vertically rather than displaying inline. I'v tried overriding the img tag formatting in style.css but this doesn't seem to do the trick. Any thoughts as to how to resolve this?

    Many thanks in advance,


    Great plugin, BTW!

    1. Washington Botelho author 20 May 2014 02:39

      Marc Stein,

      I could not to see the problem.
      But you can set space: off to avoid empty space and then manipulate the images.

  72. Surjit Sidhu 11 Apr 2014 08:00

    I want to display "based on x reviews" after stars. how can do this ?
    i tried to modify js function, but does not find exact line to change

    1. Washington Botelho author 20 May 2014 02:30

      Surjit Sidhu,

      You need to use the target options.
      But if you want to display the number of reviews, you should keep it on database and display it for your own.

  73. sudarshan 7 Apr 2014 05:18

    Hello sir, nice work.
    I have one doubt I am not getting img of stars when I used it in Codeigniter project. Can you tell me where can I provide Base url for img folder??

    1. Washington Botelho author 20 May 2014 02:12


      The base URL is up to you and your framework.
      Raty can't provide it for you, sorry.

    2. Vlad 10 Apr 2014 15:31


      Had the same issue,

        path: 'img/',

      if that doesnt work try,

      jQuery(function($) {
            path: 'img/',
      1. Washington Botelho author 20 May 2014 02:13


        It could work, but the case is not the whole Raty, just the images.

      2. Malek 28 Apr 2014 19:18

        the slash is added programmatically I noticed.
        So just 'img' and the stars assets should be loaded correctly. Vlad,

        1. Washington Botelho author 20 May 2014 02:18


          It was fixed on version 2.5.1: "The path always was prepend avoiding absolute or different path for each icon."

  74. Cabel 21 Mar 2014 12:56

    Any easy way to make the stars smaller? Other than that, what a great plugin, keep up the great work.

    $.fn.raty.defaults.path = '/images';
    $(function() {
      $('.stars').raty({ readOnly: true, score: 1, size: 12 });
    1. Washington Botelho author 20 May 2014 02:20


      You can set a default size for all intances.
      But the only way is set the size to be possible calculate the right width.

  75. ISEE 21 Mar 2014 05:50

    Now, we can get the score from the callbcak function when the raty was initialized, suck as:

      click: function(score, evt) {
        alert('score: ' + score);

    but can we get the score in the other function?

    1. Washington Botelho author 20 May 2014 02:10


      Get the score when it is initialized is on score option via function() { return 1; }, not on click.
      On click you get the score choosed, like on mouseoverand mouseout

  76. Darren Teng 19 Mar 2014 04:20

    Hi Washington, can I set my own title for each star, such as 'good' => 'Strongly agree', 'bad' => 'Strongly disagree'?

    Thanks for your great work!

    1. Washington Botelho author 20 May 2014 02:05

      Darren Teng,

      Yes, you have the options hints to do that.

    2. Jirka Kyncl 2 May 2014 11:15

      I found it now :)
      you can set parameter hints.


        number: 5,
        score: $(this).data('rate'),
          path: 'js/raty/img',
          readOnly: true,
          noRatedMsg : "Very very bad woman!",
          hints: ["somthing", "bless", "Monitor", 4, "evaluation"]
    3. Jirka Kyncl 2 May 2014 11:10

      Hi, you can change it in source code. In hints array. I didn't found better solution.

      1. Washington Botelho author 20 May 2014 02:07

        Jirka Kyncl,

        The better solution is just override the parameter hints.

  77. Guilherme Duailibe 17 Mar 2014 14:50

    Excelente plugin! Estou usando. Obrigado!

    1. Washington Botelho author 18 Mar 2014 09:50

      Guilherme Duailibe,

      Thank you! (:

  78. Daniel Better 17 Mar 2014 10:23

    Hi Washington, first of all, great plugin, gj!
    Secondly, is there a way to enlarge the stars even more then 24px as seen here?

    Regards, Daniel.

    1. Washington Botelho author 18 Mar 2014 09:49

      Daniel Better,

      Yes, just use your new icon and set the value of it as px on size property.

  79. Nishit 27 Feb 2014 17:08

    Hi Washington,

    I would like to thank you for this plugin. It works flawlessly. Great work.


    1. Washington Botelho author 5 Mar 2014 13:22


      Thanks man! (:

  80. Brian 14 Feb 2014 14:25

    I have a need for multiple ratings on a page. For example, individual ratings for things such as "Price," "Value" and "Quality." Is there a way to specify scoreName for each instance of a rating? Excellent plugin, btw.

    1. Brian 14 Feb 2014 14:45

      In the init function, I have changed:

      this.opt = $.extend(true, {}, $.fn.raty.defaults, settings);


      this.opt = $.extend(true, {}, $.fn.raty.defaults, settings, $(this).data());

      This allows me to pass instance variables via the div. Example:

      <div class="my-rating" data-score-name="rating[quality]"></div>

      Perhaps a consideration to add to the master?

      1. Washington Botelho author 5 Mar 2014 13:38


        Could you open a issue to create a scoreName callback?
        This way we can pass a function to scoreName and receive it via data or whatever.


  81. Istvan Szollosi 24 Jan 2014 18:36

    I tried to use your plugin in my blog/web-shop but I got these errors:

    Uncaught TypeError: Object #<Object> has no method 'on' jquery.raty.min.js:12
    a._bindClick jquery.raty.min.js:12
    a._binds jquery.raty.min.js:12
    (anonymous function) jquery.raty.min.js:12
    E.extend.each VM4322:1
    E.fn.E.each VM4322:1
    a.init jquery.raty.min.js:12
    b.fn.raty jquery.raty.min.js:12
    (anonymous function) produs.php?produsid=21:245
    (anonymous function) VM4322:1
    (anonymous function) VM4322:1
    E.extend.each VM4322:1
    E.extend.ready VM4322:1
    event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
    1. Washington Botelho author 5 Mar 2014 13:34

      Istvan Szollosi,

      Check if your jQuery was imported before the Raty call.
      Check if you jQuery version has the new method on.

      This problem is about import, about jQuery, not about Raty.

  82. Mark 22 Jan 2014 14:46


    Is there a way of easily posting the data to a rails application? I have added the call to my application to get the images and the java but every time I post my form my defined attribute doesn't save the the rating to the DB. Heres my code :

    <div id="star" data-score="1">
      <%= :review_rating %>
      score: function() {
        return $(this).attr(':review_rating')

    Forgive me if it seems basic but I know very little about J query and am at beginner level. The :review_rating is my rails attribute that Im trying to commit the score to.

    Please let me know.

    Many Thanks

    1. Washington Botelho author 5 Mar 2014 13:30


      The value send by jQuery Raty is a hidden field, not what you put inside the div.
      This content inside the div is ignored, because Raty will override it, then you <%= :review_rating %> is useless.
      By default the hidden field that holds the score is called score, but you can change it if you need.

  83. Brandon 21 Jan 2014 02:58

    Awesome plugin! Super easy to use and dropped right into my rails app for a reviews rating system. Thanks!

    1. Washington Botelho author 5 Mar 2014 13:23


      Great! (:

  84. Daniel Weller 15 Jan 2014 04:24

    Here is a link to a tutorial for ruby on rails. If anyone can get it to fully work let me know! I've been able to only get the update stars to work. (Average rating isn't working)

    1. Washington Botelho author 15 Jan 2014 14:57

      Daniel Weller,

      Thanks for the contribution.

  85. Max 13 Jan 2014 09:22

    @Roosevelt: luckily you find the download on his github page as well:

    1. Washington Botelho author 15 Jan 2014 14:57


      Thanks for the help. (:

  86. Roosevelt P 11 Jan 2014 14:39

    Your download link to the plugin is throwing a 404 error.

    1. Washington Botelho author 15 Jan 2014 14:56

      Roosevelt P,

      I fixed it. Thanks!

  87. Bill 10 Jan 2014 22:43


    Is there a way to check and see if a visitor has already voted & if so, then set it to read only?

    Also, I would like to store the rating & number of votes in a mySQL database, how could I do that?

    1. Washington Botelho author 15 Jan 2014 14:41


      You can save it into database.
      When the user click on star, it actives the click callback, inside it you can get the score and save it via ajax.

      Or you can just let the user to vote and create a submit button that will send the value keeped into hidden field named score by default.

  88. Tj 10 Jan 2014 20:52

    Hi, How to save previous ratings ?? How to download and install this plugin ?

    please help

    1. Washington Botelho author 15 Jan 2014 14:39


      To save the last rating, you need to keep it on your database.
      To instal, just import the files e use the code showed on this page.

  89. Lanamaja 8 Jan 2014 10:11

    how can i add this on a wordpress page? and/or include into a contact form?
    If i want the plugin to open up different links or display messages depending on the number of stars the user clicked, how could i manage this
    with your plugin?

    Thanks in advance

    1. Washington Botelho author 9 Jan 2014 14:31


      You will use the same code. But where put it, I can't help you, because I don't know about wordpress coding.

      To open whatever you want, use the callback click, inside it you can get the score and do your logic.

  90. Amarpreet 31 Dec 2013 16:44


    Could you help me with how i can post the rating using ajax.

    1. Washington Botelho author 3 Jan 2014 02:01


      You can do it from inside the click callback.
      Get the score value and manipulate it with jQuery.

      Ajax POST reference:

    1. Tim Forrer 9 Nov 2015 12:42

      Washington Botelho,



Format your code using Markdown.