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

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

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

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

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

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

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)

Hi,

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

Thx!

Washington,

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
$('div').raty({
click: function(score, evt) {
alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
}
});
and set
half: true

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

Thanks for your reply.

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. :)

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

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

$('.solid-stars').raty({ 
    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>

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.

$('.rateMe').raty({
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;
});
}
});

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

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: http://stackoverflow.com/questions/32124326/font-icon-as-squares-in-android-2-3-3-browser/32124327#32124327
/best
/javier

Does it work with angularjs?

Hi,

Could you help me to remove title attribute from IMG tag

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;
});

HTML

                       {{#ratingMark Data.info.poiId}}
                        {{/ratingMark}}

                    </div>

Hello,

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?

Hi!

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="https://1332517042.rsc.cdn77.org/raty/images/star-off.png" title="bad">&nbsp;<img alt="2" src="https://1332517042.rsc.cdn77.org/raty/images/star-off.png" title="poor">&nbsp;<img alt="3" src="https://1332517042.rsc.cdn77.org/raty/images/star-off.png" title="regular">&nbsp;<img alt="4" src="https://1332517042.rsc.cdn77.org/raty/images/star-off.png" title="good">&nbsp;<img alt="5" src="https://1332517042.rsc.cdn77.org/raty/images/star-off.png" title="gorgeous"><input name="score" type="hidden"></div>

How to return the Hint on click?

I'm already returning the score this way:

$('#star').raty({
    click: function(score) {
    alert('ID: ' + this.id + "\n" + "\nRATE: " + score);

}
});

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);

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

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

Hey,

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

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

• add "height" and "width" attributes to img tags

Hello!

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?

爱的色放

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.

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:hover ~ .rating-star {
          background-position: 0 0;
      }

/* Just for the demo */
body {
    margin: 20px;
}
   </style>
<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>
                 </span>

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.

Thanks,
Nauman

for my question #807 a little workaround...

$( document ).ready(function() {
    // fix for hidden input field inner raty element
    $( '.raty' ).find( 'input[name="score"]' ).remove();
});

hey,

at first: very nice plugin! thanks for it!

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

thanks!

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

Thanks, mate Nice plugin, works fine.

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

           $('span.raty-stars').raty({
             score: function() {
               return $(this).data('score')/2;
             },
           $('span.raty-stars').raty({
             score: function() {
               //score = $(this).data('score');
               //console.log("38 score", score);
               return $(this).data('score')/2;
             },
             space: false,
             half:true,
             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.

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:

    $(".star-rating").raty({
        cancel: true,
        half: true,
        starType: "i",
        targetScore: "#target-score"
    });

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

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?

thanks

Awesome plugin, thanks :)

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"?

Hello,

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

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.

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

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.

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

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!

Very nice plugin. :)

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

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

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?

Nice work dude... \m/

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 ?

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 });
});

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!

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: ');
    }
  });
});

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.

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.

Wow, I'm impressed. This is very nice

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

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.

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

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?

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.

Hi!

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

Thank you!

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/> 

Same question as Jing bellow :)

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

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!

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

Thank you for the script. Looking great :-)

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

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?

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}}

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.

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!

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

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.

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 });
});

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?

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

Thanks for your great work!

Excelente plugin! Estou usando. Obrigado!

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.

Hi Washington,

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

Regards.

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.

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.

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

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

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/

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

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

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?

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

please help

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

Hi,

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

first