Default

You need just to have a div to build the Raty.

<div></div>
$('div').raty();

Score

Used when we want starts with a saved rating.

$('div').raty({ score: 3 });

Score callback

If you need to start you score depending of a dynamic value, you can to use callback for it.
You can pass any value for it, not necessarily a data- value. You can use a field value for example.

<div data-score="1"></div>
$('div').raty({
  score: function() {
    return $(this).attr('data-score');
  }
});

Score Name

Changes the name of the hidden score field.

$('div').raty({ scoreName: 'entity[score]' });

Number

Changes the number of stars.

$('div').raty({ number: 10 });

Number callback

You can receive the number of stars dynamic using callback to set it.

<div data-number="3"></div>
$('div').raty({
  number: function() {
    return $(this).attr('data-number');
  }
});

Number Max

Change the maximum of start that can be created.

$('div').raty({
  numberMax : 5,
  number    : 100
});

Read Only

You can prevent users to vote. It can be applied with or without score and all stars will receives the hint corresponding of the selected star.
Stop the mouse over the stars to see:

$('div').raty({ readOnly: true, score: 3 });

Read Only callback

You can decide if the rating will be readOnly dynamically returning true of false on callback.

$('div').raty({
  readOnly: function() {
    return 'true becomes readOnly' == 'true becomes readOnly';
  }
});

No Rated Message

If readOnly is enabled and there is no score, the hint "Not rated yet!" will be shown for all stars. But you can change it.
Stop the mouse over the star to see:

$('div').raty({
  readOnly   : true,
  noRatedMsg : "I'am readOnly and I haven't rated yet!"
});

Half Show

You can represent a float score as a half star icon.
This options is just to show the half star. If you want enable the vote with half star on mouseover, please check the option half.
The round options showed belows is just for the icon, the score keeps as float always.

Enabled

The round rules are:

  • Down: score <= x.25 the star will be rounded down;
  • Half: score >= x.26 and <= x.75 the star will be a half star;
  • Up: score >= x.76 the star will be rounded up.
$('div').raty({ score: 3.26 });

Disabled

The rules becomes:

  • Down: score < x.6 the star will be rounded down;
  • Up: score >= x.6 the star will be rounded up;
$('div').raty({
  halfShow : false,
  score    : 3.26
});

Round

You can customize the round values of the halfShow option.
We changed the default interval [x.25 .. x.76], now x.26 will round down instead of to be a half star.
Remember that the full attribute is used only when halfShow is disabled.
You can specify just the attribute you want to change and keeps the others as default.

$('div').raty({
  round : { down: .26, full: .6, up: .76 },
  score : 3.26
});

Half

Enables the half star mouseover to be possible vote with half values.
If you want to vote with more precison than half value, please check the option precision.

$('#star').raty({ half: true });

Star Half

Changes the name of the half star.
Pay attention, when you want specify a different icon with a different directory, you must to set the path option to null to avoid it to be prepended on your path and, consequently, specify all other icons with explicit original path.

$('div').raty({
  half     : true,
  starHalf : 'star-half-mono.png'
});

You can to use the size of icon you want.

$('div').raty({
  cancel  : true,
  starOff : 'star-off-big.png',
  starOn  : 'star-on-big.png'
});

Click

Callback to handle the score and the click event on click action.
You can mension the Raty element (DOM) itself using this.

$('div').raty({
  click: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
  }
});

Click Prevent

If you return false into callback, the click action will be prevented.

$('div').raty({
  click: function(score, evt) {
    alert('Score will not change.')
    return false;
  }
});

Hints

Changes the hint for each star by it position on array.
If you pass null, the score value of this star will be the hint.
If you pass undefined, this position will be ignored and receive the default hint.

$('div').raty({ hints: ['a', null, '', undefined, '*_*']});

Path

Changes the path where your icons are located.
Set it only if you want the same path for all icons.
Don't mind about the last slash of the path, if you don't put it, it will be setted for you.

$('div').raty({ path: 'assets/images' });

Now we have the following full paths: assets/images/star-on.png, assets/images/star-off.png and so.

Path Callback

You can set the path dinamically using callback.

<div data-path="assets/images"></div>
$('div').raty({
  path: function() {
    return this.getAttribute('data-path');
  }
});

Star Off and Star On

Changes the name of the star on and star off.

$('div').raty({
  starOff : 'off.png',
  starOn  : 'on.png'
});

Cancel

Add a cancel button on the left side of the stars to cacel the score.
Inside the click callback the argument code receives the value null when we click on cancel button.

$('div').raty({ cancel: true });

Cancel Hint

Like the stars, the cancel button have a hint too, and you can change it.
Stop the mouse over the cancel button to see:

$('div').raty({
  cancel     : true,
  cancelHint : 'My cancel hint!'
});

Cancel Place

Changes the cancel button to the right side.

$('div').raty({
  cancel      : true,
  cancelPlace : 'right'
});

Cancel off and Cancel On

Changes the on and off icon of the cancel button.

$('div').raty({
  cancel    : true,
  cancelOff : 'cancel-off.png',
  cancelOn  : 'cancel-on.png'
});

Icon Range

It's an array of objects where each one represents a custom icon.
The range attribute is until wich position the icon will be displayed.
The on attribute is the active icon.
The off attribute is the inactive icon.

$('div').raty({
  iconRange: [
    { range: 1, on: '1.png', off: '0.png' },
    { range: 2, on: '2.png', off: '0.png' },
    { range: 3, on: '3.png', off: '0.png' },
    { range: 4, on: '4.png', off: '0.png' },
    { range: 5, on: '5.png', off: '0.png' }
  ]
});

You can use an interval of the same icon jumping some number.
The range attribute must be in an ascending order.
If the value on or off is omitted then the attribute starOn and starOff will be used.

$('div').raty({
  starOff   : '0.png',
  iconRange : [
    { range : 1, on: '1.png' },
    { range : 3, on: '3.png' },
    { range : 5, on: '5.png' }
  ]
});

Now we have all off icons as 0.png, icons 1 and 2 as 1.png, icon 3 as 3.png and icons 4 and 5 as 5.png.

Target

Some place to display the hints or the cancelHint.

$('div').raty({
  cancel : true,
  target : '#hint'
});

Your target can be a div.

<div id="hint"></div>

Your target can be a text field.

<input id="hint" type="text" />

Your target can be a textarea.

<textarea id="hint"></textarea>

Your target can be a select.

<select id="hint">
  <option value="">--</option>
  <option value="bad">bad</option>
  <option value="poor">poor</option>
  <option value="regular">regular</option>
  <option value="good">good</option>
  <option value="gorgeous">gorgeous</option>
</select>

Target Type

You have the option hint or score to chosse.
You can choose to see the score instead the hints using the value score.
For the cancel button the value is empty.

$('div').raty({
  cancel     : true,
  target     : '#hint',
  targetType : 'score'
});

Target Keep

If you want to keep the score into the hint box after you do the rating, turn on this option.

$('div').raty({
  cancel     : true,
  target     : '#hint',
  targetKeep : true
});

Target Text

Normally all target is keeped blank if you don't use the targetKeep option.
If you want a default content you can use this option.

$('div').raty({
  target     : '#hint',
  targetText : '--'
});

Target Format

You can choose a template to be merged with your hints and displayed on target.

$('div').raty({
  target       : '#hint',
  targetFormat : 'Rating: {score}'
});

Target Score

You can keep the score value inside the binded element by default or choose where to put it.
If you change the score target, the default score field won't be created.
It is not like target option for display purpose, it is the real current score data.

$('div').raty({
  targetScore: '#target'
});

Mouseover

You can handle the action on mouseover.
The arguments is the same of the click callback.
The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback. You can do it by yourself.

$('div').raty({
  mouseover: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
  }
});

Mouseout

You can handle the action on mouseout.
The arguments is the same of the mouseover callback.

$('div').raty({
  mouseout: function(score, evt) {
    alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
  }
});

Precision

You can get the right position of the cursor to get a precision score.
The star is represented just as half and full star, but the score is saved with precision.
When you enable this option the half options is automatically enabled and targetType is changed to score.

$('#precision').raty({
  cancel     : true,
  cancelOff  : 'cancel-off.png',
  cancelOn   : 'cancel-on.png',
  path       : 'raty/demo/images',
  starHalf   : 'star-half.png',
  starOff    : 'star-off.png',
  starOn     : 'star-on.png',
  target     : '#precision-hint',
  targetKeep : true,

  precision  : true
});

Space

You can take off the space between the star.

$('#space').raty({ space: false });

Single

You can turn on just the mouseovered star instead all from the first until that one.

$('#single').raty({ single: true });

Star Type

It lets you to change the star element type. Changing it from img to i, for example, gives you the change to use font instead image. There is a sample CSS (demo/stylesheets/jquery.raty.css) using a sample fonts (demo/fonts/jquery.raty.[eot|svg|ttf|woff]).

To be easier to use, we replace the dot (.) extension to hyphen (-), so you do not need to change the original names, just set the names to your fonts. We recommend you use the Ico Moon app to be possible to download only the icons you need and rename it.

$('div').raty({
  cancel   : true,
  half     : true,
  starType : 'i'  
});

Changing the settings globally

You can change any option mentioning the scope $.fn.raty.defaults.OPTION = VALUE;. It must be called before you bind the plugin.

$.fn.raty.defaults.path = assets;
$.fn.raty.defaults.cancel = true;

Options

cancel: false

Creates a cancel button to cancel the rating.

cancelClass: 'raty-cancel'

Name of cancel's class.

cancelHint: 'Cancel this rating!'

The cancel's button hint.

cancelOff: 'cancel-off.png'

Icon used on active cancel.

cancelOn: 'cancel-on.png'

Icon used inactive cancel.

cancelPlace: 'left'

Cancel's button position.

click: undefined

Callback executed on rating click.

half: false

Enables half star selection.

halfShow: true

Enables half star display.

hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']

Hints used on each star.

iconRange: undefined

Object list with position and icon on and off to do a mixed icons.

mouseout: undefined

Callback executed on mouseout.

mouseover: undefined

Callback executed on mouseover.

noRatedMsg: 'Not rated yet!'

Hint for no rated elements when it's readOnly.

number: 5

Number of stars that will be presented.

numberMax: 20

Max of star the option number can creates.

path: undefined

A global locate where the icon will be looked.

precision: false

Enables the selection of a precision score.

readOnly: false

Turns the rating read-only.

round: { down: .25, full: .6, up: .76 }

Included values attributes to do the score round math.

score: undefined

Initial rating.

scoreName: 'score'

Name of the hidden field that holds the score value.

single: false

Enables just a single star selection.

space: true

Puts space between the icons.

starHalf: 'star-half.png'

The name of the half star image.

starOff: 'star-off.png'

Name of the star image off.

starOn: 'star-on.png'

Name of the star image on.

target: undefined

Element selector where the score will be displayed.

targetFormat: '{score}'

Template to interpolate the score in.

targetKeep: false

If the last rating value will be keeped after mouseout.

targetText: ''

Default text setted on target.

targetType: 'hint'

Option to choose if target will receive hint or the score number.

Functions

$('#star').raty('score');

Get the current score. If there is no score then undefined will be returned.

$('#star').raty('score', number);

Set a score.

$('#star').raty('click', number);

Click on some star. It always call the click callback if it exists.

$('.star').raty('readOnly', boolean);

Change the read-only state.

$('#star').raty('cancel', boolean);

Cancel the rating. The boolean parameter tells if the click will be called or not. If you ommit it, false it will be.

$('#star').raty('reload');

Reload the rating with the same configuration it was binded.

$('#star').raty('set', { option: value });

Reset the rating with new configurations. Only options especified will be overrided.

$('#star').raty('destroy');

Destroy the bind and gives you the raw element before the bind.

$('#star').raty('move', number);

Move the mouse to the given score point position.

Functions demo

run
run
run
run
run
run
run
run
run
run

Tests

This plugin is tested to work better. Check it out!

Share it!

  1. Troy 2 days ago

    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!

  2. Vinicius J L 5 days ago

    Very nice plugin. :)

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

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

  3. Bill 6 days ago

    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?

  4. Persi 7 days ago

    Nice work dude... \m/

  5. Ashfaq 8 days ago

    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 ?

  6. James 25 days ago

    Hello,

    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 21 days ago

      James,

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

  7. Muhammad Saleh 29 days ago

    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:

    img[src$="star-half.png"]{
      -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 21 days ago

      Muhammad Saleh,

      Thanks! (:

  8. Naseer 30 days ago

    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 21 days ago

      Naseer,

      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.

  9. Websun 30 days ago

    Hi,
    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 21 days ago

      Websun,

      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>
      
      <div></div>
      
      $('div').raty();
      
    2. Muhammad Saleh 29 days ago

      Websun,

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

      and you may skip the fonts ;) I did that

  10. Tom 1 month ago

    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 21 days ago

      Tom,

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

  11. anon 1 month ago

    Wow, I'm impressed. This is very nice

  12. Waleed 1 month ago

    Hi,

    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

    thanks

    1. Washington Botelho author 1 month ago

      Waleed,

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

  13. alex 1 month ago

    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 1 month ago

      alex,

      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.

  14. Shawn 1 month ago

    Washington,

    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,
    Shawn

    1. Washington Botelho author 1 month ago

      Shawn,

      Could you open an issue?

  15. Elad 1 month ago

    Hi,

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

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

    <script>
      $('#starRating').raty({
        click: function(score, evt) {
          $('#starRating').raty('readOnly', true);
        }
      });
    </script>
    

    What am I doing wrong?

    1. Washington Botelho author 1 month ago

      Elad,

      I run you code and it works.

  16. Teo Dragovic 2 months ago

    Hi,

    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.

    Thanks.

    1. Washington Botelho author 1 month ago

      Teo Dragovic,

      Yes, use the version 2.6.0 with option starType.

  17. Tatiana Perere 2 months ago

    Hi!

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

    Thank you!

    1. Washington Botelho author 2 months ago

      Tatiana Perere,

      Use the options single.

    2. Tatiana Perere 2 months ago

      Did it changing the js lib.

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

      Valeu!

      1. Washington Botelho author 2 months ago

        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 2 months ago

          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 {
            if(!self.opt.single){
              methods._fill.call(self, score);
            }
          }
          

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

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

          Now I have a very different behavior when using SINGLE.

          Cheers!

  18. Hussaim 2 months ago

    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>
    <div/> 
    
    1. Washington Botelho author 2 months ago

      Hussaim,

      Yes, use the option scoreName.

  19. florin 2 months ago

    Same question as Jing bellow :)

    1. Washington Botelho author 2 months ago

      florin,

      Same answer! :)

  20. Jing 2 months ago

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

    1. Washington Botelho author 2 months ago

      Jing,

      Inside click callback, calls the readOnly function.

  21. Joey 3 months ago

    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?

    Thanks!

    1. Washington Botelho author 2 months ago

      Joey,

      The score element is create only if you don't provide a valid (existent) target score: https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js#L215

  22. cesar 3 months ago

    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 2 months ago

      cesar,

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

      var star = $('<div id="star" data-score="1"></div>').appendTo('#div1');
      
      star.raty();
      
  23. rent-aroom 3 months ago

    Thank you for the script. Looking great :-)

    http://www.rent-aroom.com/rate-our-service

    1. Washington Botelho author 2 months ago

      rent-aroom,

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

  24. John Paul 3 months ago

    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 2 months ago

      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.

  25. José Leite 3 months ago

    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>
    
        <script>
          $('#star{{idx}}').raty({ 
            numberMax : 10,
            readOnly: true, 
            score: {{=comment.rating}} 
          });
        </script>
      {{pass}}
    {{pass}}
    
    1. Washington Botelho author 2 months ago

      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>
      
      $('.badge').raty({
        score: function() {
          return this.getAttribute('data-rating');
        }
      });
      
  26. Swagata 3 months ago

    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 2 months ago

      Swagata,

      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.

  27. Marc Stein 3 months ago

    Hi Washington,

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

    If you take a look at http://recippia.herokuapp.com/test.html 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,

    Marc

    Great plugin, BTW!

    1. Washington Botelho author 2 months ago

      Marc Stein,

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

  28. Surjit Sidhu 3 months ago

    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 2 months ago

      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.

  29. sudarshan 4 months ago

    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??
    Thanks.

    1. Washington Botelho author 2 months ago

      sudarshan,

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

    2. Vlad 4 months ago

      sudarshan,

      Had the same issue,

      $('#star').raty({
        path: 'img/',
      });
      

      if that doesnt work try,

      jQuery(function($) {
        $('#star').raty({
            path: 'img/',
        });
      });
      
      1. Washington Botelho author 2 months ago

        Vlad,

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

      2. Malek 3 months ago

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

        1. Washington Botelho author 2 months ago

          Malek,

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

  30. Cabel 4 months ago

    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() {
      $('#default').raty(); 
    
      $('.stars').raty({ readOnly: true, score: 1, size: 12 });
    });
    
    1. Washington Botelho author 2 months ago

      Cabel,

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

  31. ISEE 4 months ago

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

    $('div').raty({
      click: function(score, evt) {
        alert('score: ' + score);
      }
    });
    

    but can we get the score in the other function?

    1. Washington Botelho author 2 months ago

      ISEE,

      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

  32. Darren Teng 4 months ago

    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 2 months ago

      Darren Teng,

      Yes, you have the options hints to do that.

    2. Jirka Kyncl 3 months ago

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

      Ex:

      $(this).raty({
        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 3 months ago

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

      1. Washington Botelho author 2 months ago

        Jirka Kyncl,

        The better solution is just override the parameter hints.

  33. Guilherme Duailibe 4 months ago

    Excelente plugin! Estou usando. Obrigado!

    1. Washington Botelho author 4 months ago

      Guilherme Duailibe,

      Thank you! (:

  34. Daniel Better 4 months ago

    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 4 months ago

      Daniel Better,

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

  35. Nishit 5 months ago

    Hi Washington,

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

    Regards.

    1. Washington Botelho author 5 months ago

      Nishit,

      Thanks man! (:

  36. Brian 5 months ago

    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 5 months ago

      In the init function, I have changed:

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

      to

      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 months ago

        Brian,

        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.

        Thanks.

  37. Istvan Szollosi 6 months ago

    Hi,
    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 months ago

      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.

  38. Mark 6 months ago

    Hi

    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 %>
    </div>
    
    $('#star').raty({
      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 months ago

      Mark,

      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.

  39. Brandon 6 months ago

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

    1. Washington Botelho author 5 months ago

      Brandon,

      Great! (:

  40. Daniel Weller 6 months ago

    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)

    http://paweljaniak.co.za/2013/07/25/5-star-ratings-with-rails/

    1. Washington Botelho author 6 months ago

      Daniel Weller,

      Thanks for the contribution.

  41. Max 6 months ago

    @Roosevelt: luckily you find the download on his github page as well: https://github.com/wbotelhos/raty

    1. Washington Botelho author 6 months ago

      Max,

      Thanks for the help. (:

  42. Roosevelt P 6 months ago

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

    1. Washington Botelho author 6 months ago

      Roosevelt P,

      I fixed it. Thanks!

  43. Bill 6 months ago

    Hi,

    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 6 months ago

      Bill,

      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.

  44. Tj 6 months ago

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

    please help

    1. Washington Botelho author 6 months ago

      Tj,

      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.

  45. Lanamaja 7 months ago

    Hi,
    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 7 months ago

      Lanamaja,

      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.

  46. Amarpreet 7 months ago

    Hi,

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

    1. Washington Botelho author 7 months ago

      Amarpreet,

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

      Ajax POST reference: http://api.jquery.com/jquery.post

  47. Washington Botelho 7 months ago

    first

*
*
*
Answering:
(cancel)
Format your code using Markdown.