Realised that if there are multiple ratings on a page, and you are using start value of double eg 3.3 instead of integer, only the first rating component dsiplays. the remaining components are not displayed.

A little debugging showed this line to be the culprit

hint = (options.number <= options.hintList.length && options.hintList[start - 1] !== null) ? options.hintList[start - 1] : start;

Line number 198 in version 0.6 release.

Commenting out that and providing dummy hints fixed the issue but obviously, the hints on the displayed widget were wrong
Commenting out that and providing some dummy hints f

Add an option to only show the selected rating icon. Add a flag option to use the following fillStar function:

function fillStar(id, score, opt) {
    var qtyStar = $('img.' + id).length,
        item    = 0,
        range   = 0,
        star,
        starOn;

    for (var i = 1; i <= qtyStar; i++) {
        star = $('img#' + id + '-' + i);


        if(i != score)
        {
            star.attr('src', opt.path + opt.starOff);
        }

        if (i == score)
        {
            star.attr('src', opt.path + opt.iconRange[i-1][0]);
        }

    }
};

Browser: Chrome Version 24.0.1312.57 m
JQuery: Version 1.7.1
Raty: Version 0.5

$(function() {
    $('div#star').raty();
    $('div#star').raty("score", 2);
});

Produces

Hi,
I've added raty in bootstrap popover. It is not working in bootstrap popover windows but outside it works. Here is a js fiddle. Am I missing something?

EDIT: Here is a rating code. Inside popover I am not able to click on ratings.

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

Thanks

http://gist.github.com/628017 has a proposed fix for this.

Hi, when I do multiple instances of raty, it seems like Raty adds a half star even though it's a solid rating (4.0/3.0/2.0).

$(function(){
$('.star').each(function(el){
            $(this).raty({
                readOnly:true,
                path: 'media/template/js/raty/img',
                start: $(this).attr('data-rating'))
            });
});
});

<div class="detail_item star" data-rating='{{ r.rating }}'>
</div>
{{ r.rating }}

Here's an image: http://i.imgur.com/EXXlY.png (the score next to the stars is the string sent to Raty)

I've tried different things, like parseFloat(), Number(), String(), stripping the text, replacing the ".0" with "", ...but this problem still stays.

Any ideas? Thanks !

Great plugin!

I have 2 stars containers:

<div class="rating_block">
<span>Idea</span><div class="rating design"
    data-id="11"
    data-rating="4.8"
></div>

<span>Design</span><div class="rating idea" 
    data-id="12"
    data-rating="3.4"
></div>

I start raty with this code:
$('.rating').each(function(){
var id = $(this).data("id");
var rating = $(this).data("rating");
$(this).raty({
start: rating,
showHalf: true,
path: '/pics/',
onClick: function(score) {
alert('score: ' + id + ' ' + score);
$.fn.raty.start( Math.random()*5 );
}
});
});

And every time i click star in the first container stars are changed in last one.

May be additional argument can help? For example this function can be looking this:
$.fn.raty.start(2,'.idea'); - second argument is [optional] and will "filter" set of containers to required.

[email protected]

When you define the click function in the config parameters, "this" refers to the element and not to the raty instance.

If I try to use star images larger than 16px in width, all stars won't fit in one line.
I think problem occurs because width of 20px (img width 16px + margin of 2px or something similar) is hard-coded.

This line causes the problem (and similar line two rows before): $global.css('width', options.number * 20);

I think that width should be removed totally, user can set it if he needs it.

I wrote a setSource(icon) function in my fork which I used to set the icon sources to localStorage rather than url path in order to prevent raty from repeatedly fecthing stars from the server. However, I was not clever enough to set self.opt.XX in my function so my hack of using $.fn.raty.defaults.xx is inelegant and not changable through a settings JSON.

If someone would please look at this and advise how to init self.opt in setSource function: I think this change might be worthy of pull request.

note: I separately load icon images into localStorage with doomhz/jQuery-Image-Cache.

Round option will give flexibility to choose the exact point of rounding using half star.

The following values are inclusives:

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

Between 25 and 76 is half star, but if halfShow option is disabled, then full will adjust the star to next full star.

For now you can choose the active icons on each star, but you cannot choose the inactives icons.

It would be a good idea to add the parameter that indicates the inactive icon on the option iconRage.
And if this option does not be passed, then it will be the default starOff option value.

iconRange: [ [1, 'first-on.png', 'first-off.png'] ]

Or something more verbose like:

iconRange: [ { value: 1, on: 'first-on.png', off: 'first-off.png' } ]

Existe previsão de usar o plugin, sem empregar a tag IMG? Pois é interessante poder alterar a aparencia do plugin atraves de CSS, ao invés de o plugin usar tags IMG que obrigam o endereço ser mapeado a cada página e cada subnivel de pastas.

Hi,

I need to be able to get/set ratings on a scale of 1-10 using only 5 Stars. So if 2 1/2 stars are selected that would = 5. If 4 full stars are selected that would = 8, etc...

I couldnt find anywhere in the documentation if this is allowed.

Is this possible?

Hi, and thank you so much for this nice plugin!
I have please 2 questions if you don't mind:
1- is it possible to set a score directly in the div of stars?? for example

2- I'll have to use the rating with a small text area, how can i check if a rating has been set before submitting the form??

thank you so much for your help
Regards

Sometimes, Raty will put multiple images on the page with the same id attribute. One can "trick" it into showing the wrong number of stars like so:

<!DOCTYPE html>
<html><head>
<title>Raty test</title>
</head>
<body>
<div class="container">
  <div class="stars">2</div>
</div>
<div class="container">
  <div class="stars">5</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.raty.js"></script>
<script>
$(function() {
  $(".container .stars").each(function() {
    $(this).raty({
      start: $(this).text(),
      readOnly: true,
      path: "http://www.wbotelhos.com/raty/img/"
    });
  });
});
</script>
</body></html>

The first container is supposed to have only 2 stars, but all 5 are filled in. I would come up with a jsFiddle for this issue but I don't have a copy of Raty to link to. The copy on your demo page (http://www.wbotelhos.com/raty/js/jquery.raty.js), despite having the same version number, is different, and does not have this bug.

The link in README.md leads to 404 page:

jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty

The page shown is:

404
Página não encontrada.
É uma cilada Bino!
Tente voltar para o blog

I don't see it but is there an option to have the hover star different than the starOn option? I guess you would need a hoverOn, hoverHalf option. Thoughts?

If you pass in a single class as your selector, when mouseover the stars, jquery throws an error. It seems from a quick view of the code that in this instance, the code doesn't successfully auto-assign the element an id.

This is the code I tried to make a simple animation with stars. What it does is to select only one star in a row.

var x = 1;
var i = setInterval(function() {
    $('.starRating').raty({
        single: true,
        score: x
    });
    x++;
    if ( x > 5 )
        clearInterval(i);
}, 200);

but it doesn't select only one star, but all the start before and including x. Any ideas?

the size option is not working properly. Example:

$('#rating').raty({size:30});

I'm using target for "Your score: ".
Problem is onmouseOut - it deletes everything.
Using targetKeep make no sense because it displays start value - not user's score.
Can You make other variable? target's onmouseout default value, please ??:)

choosing a group of with class selector causing exception. For example $('.group').raty(); doesn't work just on jquery 1.5.1 version

Hi,

I am using a $.ajax function to add new "comments" including raty divs on my page . But I can't apply the plugins on these new divs. Even if I run a "setRaty" function that executes something like $('.raty').raty({...}); the stars don't appear. Although, if I do $('.raty').html('test'); this runs correctly.
NB : the raty plugin works well with existing divs when the page is loaded.

Thank you for your help !

Jeremy

Would be nice if there was an easy way to get the value of the raty object.

$('#big').raty() // creates 1-5

$('#big').val() // returns 1-5

Looked at other issues but did not help. I've got the images and min.js file in my project.

great work，do you have plan to support IE6??

I'm having a really frustrating issue with the display of the rating. When I add the div statically it work just fine, but when it is inserted dynamically with ajax stars become oversized at around 100px in size. Setting width or height of the div doesn't resize the star itself. The stars also display vertically thought that might be because there is not enough space for oversized images.

It doesn't matter if I add "$('.rating').raty();" in .ready function or in the ajax success callback function.

I am also using jquery isotope plugin (layout animation) which might be delaying the availability of html elements in the dom but this is just guesswork and I've really no idea where to start looking.

Could you please take a look at the example here:

http://77.95.160.145/temp-test/movies.php (local server so might be slow)

You will see the rating display properly at the top of the page but when you click on the movie poster you will see the oversized stars.

Example "Displaying and keeping the score in a target element" is not working in Chrome.
If you try to select value from drop-down list it will not update stars.
Chrome version is 17.0.963.
Must say I didn't check other browsers.

Hi,

First of nice plugin.

I've only found one little problem. When half-stars are enabled the hint looks a bit messy. What do I mean?

For example, if we have 5 stars, and the score is 2.5 (Average) the hint will show "Poor" as it considers it to be a 2 point rating. IMHO the tip should go in relation to the number of stars, therefore, 2.5 will fill partially the third star and therefore should read "Average".

Any option to get this to work?

I missed the possibility to handle a mouseover event to more more or something different than just showing a hint.

So i added it to the code. Would be great if you take it over to the base code:

1. adding mouseover to $.fn.raty.defaults between iconRange and noRatedMsg so that it is still alphabetical ordered (around line 450):
   iconRange: undefined,
   mouseover: undefined,
   noRatedMsg: 'not rated yet',
2. adding the call to opt.mouseover if it is defined (around line 185):
   adding following lines to the end of $stars.bind(action, function(evt) { starting in line 163
   if(opt.mouseover) {
   opt.mouseover.call(self[0], value, evt);
   }
3. reset the call when the mouse leaves (around line 135):
   adding following lines to the end of self.mouseleave(function() {
   if(opt.mouseover) {
   opt.mouseover.call(self, $score.val());
   }

After doing the 3 changes above you can configure your raty a function like:
mouseover : function(score, evt) {
$("div[data-somthing='foo']").hide();
if(score) {
$("#text_" + score).show();
}
}

Note that you have to handle the case that score is undefined. That is the case when no star was selected.

Hi,

great piece of code, but one thing prevents me from using it: I need to rate with full stars, but I want to current rating to be displayed in stars with decimal. That means that 2.25 should show a quarter of star in its start value, no rounding. The only star rating code I saw capable of this is RateIt, however it can only display these partial stars in readonly mode. I need to combine both.

Thanks for considering my issue. Nice work so far!
Quentin

Mouse over on image is too slow. how can i increase its hover functionality

Hi everyone,

This morning I tried to use the raty plugin, with complete URLs for the images (http://.../myimage.png") . Even if you specify an empty value to the path parameter, you prefix the path with "/". So, if my URL is "http://localhost:80/myimage.png", in the generated HTML, we have "/http://localhost:80/myimage.png", and URL return a 404 error.

Maybe we can throw away the path parameter, if the url start with http:// ? or something else.

Manu

Hi. I'm using raty in an AJAX application, and I've stumbled upon the following issue: when the rating's value is assigned during the raty's initialization, the half-stars are displayed correctly. But if we set the rating via $('blah').raty('start', rating) call, it doesn't recognize the fractional values, e.g. 4.56 and so on, and will just display 4 full stars until the next page reload.

When I enable half and disable precision the score contains correct values like 1.5, 3, 4.5 etc., but the target only receives integer values.

How can I enable it the way to have half stars and values?
I want to have half stars and values on the target of 0.5 increments.

Hi,

Two problems:

1. The download link https://nodeload.github.com/wbotelhos/raty/zip/2.5.1 doesn't exist

2. The minified version jquery.raty.min.js is broken. Try it and watch in the firebug console. I had to use the uncompressed one and compress it myself.

Thanks
Hooman

Hello,

I have a issue with raty.

I have two instances of the plugin applied to 2 divs.
One is for the global rating (average rating from all users that submitted a rating) and the other one is for the user rating of the displayed article.

I´m using ajax to store the rating of the user and then using the success function i want to update on the fly the global rating.
It´s all going ok except for one thing.
The target displays the average correctly, but the stars of the global ratings are not updated. They maintain the last value before the user submitted the vote). They correctly appear only if i refresh the page.

What am i doing wrong ?

I´m using the following code:

$('#artigo_rate_global').raty({
start: ,
target:'#target'
});
$('#artigo_rate_user').raty({
start: ,
target:'#target_user',
click: function(score){
var idr = $(this).attr("name");
var ida = ;
.ajax({
type: "post",
url: "rate.php",
dataType: "html",
data: {ida:ida, idr:idr, score:score},
//data: dataString,
success: function(data){
$('#target').html(data);
$('#artigo_rate_global').raty('start', data);
$('#artigo_rate_global').raty('readOnly', true);
$('#artigo_rate_user').raty('start', score);
$('#artigo_rate_user').raty('readOnly', true);
}
});
}
});

It make possible to choose a template format to the target like:

targetFormat: 'your score is: {score}'

Don't confuse it with targetText that is a value setted on target when there is no score or targetKeep is false.

Seems that all hidden inputs that raty() initializes start at 3 by default. Not sure if this is desired behavior. I expect it to start at 0 since that is default.

After I initialized it the element with raty, I should be able to reset the value to 0.

I tried:

$("#rating_selector").raty('set', {'score' : 0});

$("#rating_selector").raty('score', 0);

Both creates new rating.

If raty is being applied to multiple elements that do not have distinct 'id' attributes, the half stars show up all over the place. The quick fix is to simply assign arbitrary id's to the elements, but would be great if this weren't necessary. Thanks!

The old URL no longer works (http://www.wbotelhos.com/raty/)

Looks like the source is using String.endsWith which those browsers don't support.

I love this plugin and I’m using 1.2.1 version, but I meet a problem when I need to refresh the start and score dynamically.

In my page, I have one readonly raty (says: Raty1, half=true) plugin and a non-readonly raty (says: Raty2, half=false).

When I click the Raty2 to vote, I will invoke a ajax action to do vote, after that, I will get average rating score from database and then update Raty1.

But when I use $.fn.raty.start(score, ‘#Raty1′) to refresh the Raty1. NOTE here, score is a float numeric, and half attribute is true for Raty1.

For example:
After executed $.fn.raty.start(2.66, ‘#Raty1′), the Raty1 will be reset to 2 stars!! Not 2 and half stars, and the hint will be reset to DEFAULT hint???

I don’t know whether it’s a bug?? Is it possible to fix?

BTW: I used following codes to create Raty1:
view source
print?
1 $('#Raty1").raty({
2 readOnly: true,
3 half: true,
4 hintList: [null],,
5 noRatedMsg: 'Not voted this idea yet!',
6 start: 2
7 });

5 noRatedMsg: 'Not voted this idea yet!',
6 start: 2
7 });

HI there,

thanks for this sweet thingy - we really like it :)

We are currently setting up a new multilingual project which requires us to localise the hintlist. When we were doing so, we realised that there is no chance to 'hintlist halfstar-ratings'. Are we right?!

We have an item which has a 0.5 rating but as soon as we move the cursor over raty the tooltip says: "not yet rated" or something like that. So question is, wether it's possible to 'hintlist halfstar-ratings also' or not?

Are we having the brainworms or is this 'feature' really missing?! Any hint or help is appreaciated.

Cheerio!

Setting 'target' should disable pop-up hints, this is the target is used for. May be optionally if you disagree.

Sometimes it's necessary to unbind a plugin to avoid overwriting functionality (to avoid duplicating them). This happens to me in an ajax based application. I just can't test if the divs already has raty attached. This, because the html actually is erased ib the app, but is generated once again via ajax. This conduces to a duplicated raty plugin (i just can't test if the plugin is active by searching for start images, see?).

So, maybe an unbind method, or maybe a refresh method like suggested in here: http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin/#comment-2288 would help.

I encounter this error event though i have included the raty jquery file .

This does not happen everytime but sometimes it happens .

For a project, I'm wanting to use .raty to show the rating set by a member for particluar object (event, restaurant, etc). I have four different methods: getReviewsByNameAscending, getReviewsByNameDescending, etc . . .

However, it seems as though I can only get raty to work correctly when I'm working with a SINGLE dom element (e.g. an ID or a CLASS that doesn't any siblings in the same class). What occurs when I use a class (and am applying .raty during an $each loop), is that all of the values for the for the rating are displayed (so, if there are four reviews, then you see four sets of stars for each review when there should (ideally) be only the set of stars related to that particular review.

Thoughts or ideas?

.raty is the CLEANEST solution out there for jquery rating. Period. Anyone reading this shouldn't be dissuaded by my issues from using it. I am trying to do something I dont think .raty was build for or can handle without some augmentation. Again, if you're looking for a easy, flexible jquery rating solution, .raty is it.