Half-Star Rating Plugin

read 59 comments

There was a request recently on the jQuery discussion list for an enhancement to Ritesh Agrawal’s Simple Star Rating System to allow for 1/2 star ratings. So I took it upon myself to add the feature.

Update

I’m not supporting my version of this plugin at this time. I meant it more as a proof of concept, an attempt to help an individual on the jQuery discussion list.

Keep in mind that this plugin does not “degrade” when the browser doesn’t have JavaScript or when JavaScript is disabled. The the elements for the stars are created by the jQuery code, so when JavaScript isn’t available, the elements don’t appear. Therefore, if you are not absolutely certain that visitors to your site will have JavaScript available, this plugin probably isn’t the best solution for you. (See Wil Stuckey’s jQuery Star Rating Plugin for a degradable option.)

My addition to the plugin is pretty simple. It just adds another option to the settings, called increment, so you can do something like this now:

$('#rate1').rating('example.php', {maxvalue: 5, increment: .5});. If no increment value is set, or if it’s greater than or equal to .75, the plugin will use whole-star increments. If the value is less than .75, it’ll use half-star increments. Here you can see it in action:

 

I also updated Ritesh’s demo page to include the new example: Simple (Half) Star Rating System. If you like it, you can download the files from there.

comment feed

59 comments

  1. The following seem to not work with jQuery 1.3.1:

    var event = {
    fill: function(el){ // fill to the current mouse position.
    var index = stars.index(el) + 1;
    stars
    .children(‘a’).css(‘width’, ’100%’).end()
    .lt(index).addClass(‘hover’).end();
    },
    drain: function() { // drain all the stars.
    stars
    .filter(‘.on’).removeClass(‘on’).end()
    .filter(‘.hover’).removeClass(‘hover’).end();
    },
    reset: function(){ // Reset the stars to the default index.
    stars.lt(settings.curvalue / settings.increment).addClass(‘on’).end();
    }
    }
    event.reset();

    return(this);

    Is there a fix for this?

  2. Unsure if you got my comment or not…
    I’ve been going nuts for about 30 mins now about the space above the rating. How do you get that extra space to go away. I’ve screwed with the CSS, even looked in the js file.

    Let me know if you have a fix.

    Thanks!

  3. Hi Joshua,

    Didn’t get the other comment. Sorry about that.

    I’m getting that extra space above the rating because (I think) WordPress is adding an empty paragraph element inside the rating div. Since that paragraph is obviously unnecessary, we can at least suppress its display by setting it to display: none in the stylesheet:

    div.rating p {display: none; }

    If that doesn’t remove enough of the space, try modifying rating.css. Change the margin inside the .rating rule to margin: 0 1em;

    Hope that helps.

  4. Yostar

    Hi I’m having the same spacing issue. I’ve tried the above mentioned solution but to no avail.
    I’ve also tried setting margin to 0 for just about every element in the css file. No luck.
    Thanks,
    y.

  5. Yostar

    I think i know what the problem is.
    If you place an alert at the end of js to show the html content of the container,

    event.reset();
    alert($(container).html());

    you’ll see that before the first , there is a space (& nbsp;) – i can’t find where the code instructs to put a space there but that ultimately i believe is causing the space above the stars. Any ideas on how to get rid of it? Is this caused by jQuery code?

  6. Thanks, Yostar, for the good lead. The code doesn’t actually put the space in there. It’s part of the HTML. So, we really just want to remove it (or whatever else might be inside that div) before we append the stars. It’s a simple fix really. Just change line 51 from this:

    container.append(div);

    to this:

    container.empty().append(div);

    I’ve already done it in the script that this page uses (I haven’t updated the zip download yet, though).

  7. I want to use it for rating my article with id. What should I do? Please help me.
    Thanks in advance.

  8. Bart

    Not too shabby:)

    I suggest you mangle the class name that is currently star to something that people won’t accidentally hit. I just did, and it gives a strange™ error.

    You could allow the rating submission to be a little easier by POSTing not only the rated value but also the element’s id (probably, it seems the best candidate), which would make it possible to call rating() on a $()-selected list of items instead having to use .each() (…though you’ld also want to read the current rating from something, which is iffier if you want to stay xhtml-valid.. use title, maybe?).

    I also suggest allowing people to set cancel:false. Frankly, I think the thing’s misunderstandable clutter in various real-world contexts, and right now it’s there based only on maxvalue being >1.

  9. Tim

    Can someone help package this as a regular wordpress plugin? I notice this blog is WordPress as well.

    I am starting a restaurant review site and I’d like users to be able to rate the restaurants along with the reviewer. I am currently using WP-POSTINGRATINGS but that doesnt have support for half-star increments and I’d have no idea how to mod the code to do it.

    Also, are the star graphics able to be interchanged with other similar-sized graphics?

    Thanks for any response!

  10. Ryan

    Nice job! Taking Ritesh’s completely nonfunctional rating system (at least for me) and making it functional. Thanks.

  11. daweb

    Hi everybody, excuse me for my bad english.

    I try this plugin and it works fine for me. Many Thanks. But…

    I would want to allow just one rate per person/user and I would want to allow rating just to login users.

    The server side check works fine (PHP) but I don’t know the way to redirect the user to a page or to alert the user about the error occured.

    Please, anyone can help me? I am a very niewbie js and JQuery programmer7user.

    Regards to all.

    Daweb

  12. Paul Lindner

    If you want to get the id value sent as a post parameter modify the code to read as follows:

    jQuery.post(container.url, {
    “rating”: jQuery(this).children(‘a’)[0].href.split(‘#’)[1],
    “id”: jQuery(this).parent().attr(‘id’)
    });

    quite simple, really, and very useful. I’m putting optional params in the ID to identify the resource we want to rate.

  13. Justin Hernandez

    I just have one suggestion. You should change line 90 from saying

    stars.click(function(){

    to:

    stars.one('click', function(){

    At least that way it only monitors one click and you can’t bomb the ratings with multiple clicks. You can also use this to disable clicks.

    $('#my-id').children().unbind('click').unbind('blur')

  14. Psilos

    Hello, great plugin!

    Is it possible to use this in other server-side languages?

    Like jsp? Does anyone know how to integrate it?

    Thanks in advance.

  15. korbn

    Hello,

    I’ve put the star rating in thickbox image view, and I’ve some problem.
    On tle thickbox load I can view stars and I can click on them to launch the ajax event.
    But the OnMouseOver etc… don’t works.

    It could be a “fill” and “drain” event problem, but I can’t figure out.

    Thks for this plugin, whiwh work fine anywhere else.

  16. It would be better to have a star rating that has a transparent background and will look pretty on a dark page. Also there should be one available that is easier to install on a HTML website.

  17. You are more than welcome to use your own images with this plugin. Also, keep in mind that I’m not the author of this plugin; I merely modified it to work with 1/2-star increments. You might find one of the many other star rating plugins more to your liking. For more information, visit the jQuery Plugin Repository.

  18. There is no way to rate something as 0 stars with this.. the cancel, which does send a 0 rating, is misleading since you’d think it just removes your rating altogether. So you can either tell users the Cancel is for 0 stars, or that the minimum rating is 0.5 – perhaps a second image before the stars that you can click on for 0 stars would be useful?

  19. I went ahead and modified the plugin to have a Give 0 Stars button to the right of the Cancel Rating button (and modified that button to send an ‘X’ to the AJAX call for Rating, as opposed to 0).

    If you want to check it out I’ll be putting it up on my website soon or shoot me an email and I’d be glad to send you the update files and images.

    I’m not sure how it will work with the max 1 star option, since I have no plans on using that, but it should be pretty easy to make it not affect anything in that case.

  20. Sorry to bombard you with comments but I’m hooking this plugin into my site right now. :) How would I go about adding a function call that occurs AFTER one of the buttons is clicked?

    I have a div underneath the star system that displays Overall Rating, and I’d like to update that div when the user changes their rating. I’m going to mess around and see if I can figure it out on my own, but if someone with more jQuery knowledge could drop some on me I’d appreciate it.

    At least for the next day you can see my version of this plugin on my homepage (click my name). It’s got the added “0 star” button since I need to allow the user the option for 0 star rating OR no rating at all (cancel rating).

  21. I figured it out.. I’ve got 2 new optional parameters I can pass, onrating and oncancel, functions that get called either when you click to rate 0-max, or when you cancel your rating.

  22. Hi
    Thanks for this Plugin!

    What my querry is that I want the stars to be present next to the post thread that is listed on the page as well as when you click on the post and read the whole lot. I could use it twice but I want the same voting score to be presented.

    Does that make sense?
    Anyway if you have any ideas, please let me know.
    Thanks again.

  23. richi

    How do I use the plugin if I have say 10 or more things to rate on the same page for example
    $(‘#rate0′).rating(‘example.php’, {maxvalue:5,increment:.5});
    $(‘#rate1′).rating(‘example.php’, {maxvalue:5,increment:.5});
    $(‘#rate2′).rating(‘example.php’, {maxvalue:5,increment:.5
    .
    .
    .
    $(‘#rate10′).rating(‘example.php’, {maxvalue:5,increment:.5});
    Or
    is there a better way, I am new to jQuery.

  24. Hi Richi,

    Try giving all of those elements the same class and just have the single line. For example:

    $('div.rateme').rating('example.php', {maxvalue:5,increment:.5});

  25. Richi

    Thanks for your suggestion Karl, but I tried it before It displays all 10 Stars instead of 5 and the hover doesn’t work either.

    here’s my code

    $(document).ready(function() {
    $(‘div.rateme’).rating(‘example.php’, {maxvalue:5,increment:.5});
    });

    .
    .
    .

  26. If anyone needs to use a callback instead of passing server script as an argument check this out:
    http://n.efario.us/2008/03/12/modified-the-jquery-half-star-rating-plugin-to-use-a-callback

    richi, I use this in a resultset as well. go here for an example; you’ll need to login to see the rating plugin:
    http://meiko.novatunes.com

  27. Vivek

    HI!

    The current implementation does not let me put some text before the stars. I want to use star rating for specifying condition of mobile phones. So i want that ther should be a text “Condition:” before the stars. Somehow, the stars always appear in the new line, whereas I want text and stars to be in same line.

    How can I do this.

    regards
    VK

  28. Hi Vivek,

    You could probably do this by setting a width on .rating and floating it left.

    That said, I’d recommend you take a look at this much-improved version of the plugin:

    http://www.fyneworks.com/jquery/star-rating/

  29. I am wondering how to pass the star value into a hidden field in the form. eg. I want to save the value into database.

  30. Shelane

    When called with a class tag, rollovers and the remaining images are having strange effects.

    $(‘.rating’).rating(‘/jquery/rating.lasso’, {maxvalue:5})
    });

    Rollover second or third one.

    http://education.llnl.gov/jquery/rating.lasso

    My end product will me a list of items to rate. The list is built dynamically with an unknown number in the list. I need to pass the id or the item to the server. There is also the issue that the currently set value can’t be done on a single call via class tag.

    I did a work around where I have a script tag in each row where I pass in the additional information.

    If you were to update this plugin some more, here are some wish list items:
    option to not have the cancel button
    option for the name of the parameter to be passed to the server
    option for callback function
    read and pass id or other attribute value
    pull current value from attribute

  31. Shelane

    Follow up: Additional Wish list item.

    A target option for where to display results from server.

  32. Hi Shelane,

    Thanks a lot for the suggestions. I think you’ll have much more success using Diego A.’s star-rating plugin since he has continued to refine it and added some nice touches. I wish I could devote some time to this plugin, but I don’t think it’s going to happen for a long time. It was just a personal challenge to begin with anyway.

  33. Shelane

    I went ahead and added the two things I needed most.

    Diego’s plugin is the one that uses forms. I can do that because I already have a form surrounding my whole table to submit other data. Since you can’t nest forms, it’s impractical for me. If I get around to flushing out those other options, I’ll send you the results.

    The only thing I’m not sure about is how to allow a callback function. And how I would allow the user to retrieve the results (besides my target method).

  34. Hi all!
    Have a look at this new Star rating widget

  35. Isaac

    I don’t like the use of non-transparent gifs, and I had problems with the background-position trick for the mouse-over effect. To fix this, I have simply specified every possibility separately and made PNGs for each possibility (eg. yellow-star, grey-star, red-star, and then one of those each for left and right!). This is susceptible to the IE6 PNG alpha bug, unless you use the IE PNG fix (google it!).

    I don’t know if anyone else needed transparent icons, or is it just me being fussy?

    Isaac

  36. Thanks for plugin.

  37. Laurenzio

    Hi,
    is it possible to have the result displayed part of stars and to restrict the vote only to 100% filled stars.
    For example you have 5 stars, 1,…,5 and the current result is 2.25 (2 stars filled and one quarter filled also) and on mouse over to make only entire stars to be filled since the user doesnt have to vote 3/4 of a star for example and only 1,…,5.

  38. may i’ll try it on my web, not sure

  39. P.S.

    I’m having problem with this plug-in: when it loads FF gives the following error:

    stars.lt. is not a function

    when I do mouseover, two more errors appear:

    stars.children("a").css("width","100%").end().lt is not a function
    stars.lt is not a function

    JQuery 1.2.6

  40. Hi P.S.,

    I’ not sure which version of the plugin you downloaded, but that error occurs when using a really old version of the plugin with a newer version of the jQuery core file. I’d recommend you ditch whatever plugin you’re attempting to use and grab a copy of Diego A’s Star Rating Plugin instead.

  41. Hi I’m having the same spacing issue. I’ve tried the above mentioned solution but to no avail.
    I’ve also tried setting margin to 0 for just about every element in the css file

  42. jQuery Star Rater. Content rater with asp.net

  43. ilaçlar,
    Please see the update above.

  44. Thanks. I use this plugin on my site for set rating in online shop for any products. Thanks!
    Sorry englih not my primary language.
    Спасибо одним словом.

    • Hm. I am sorry, i novice in jquery… how i can make only once voting for one voting?
      On page i have many products. For every product i use star rating. But i cant lock rating when user aready send info… :( sory. may be my php script mast return some JavaScript to lock used rating… ?

      • Mark

        Hello Syyat,

        Just took a look at your website and saw that you succeeded to let users only vote once. How did you do this?

        Thanks!

        • I dont do something to do vote only once. But simple way on server side store hash of user info md5(IP+browser+productid) and when new vote send to server check if this hash already exist.

  45. Can this white background be removed easily ?

  46. Great job! At last the solution which i was looking for.
    For a long time i was looking for a good rating solution for my website. This half-star plugin answered all my question. Definitily going to implent this on my own website.

    Thanks Karl!

  47. 9ale7

    last link ( for the half system) is not working.

  48. Mits

    i want to disable cancel button den what to do…
    i mean i juzz want to show rating in my page rated by sme users..
    so i tried this

    $('#star1').rating({maxvalue:1, curvalue:3, cancel: 'Cancel', cancelValue: '0'});

    but anyhow it didn’t help me out..what to do ..me wuld b helpful if u resolve dis out 4 me

  49. thanks for sharing this plugin, Is this working in ie6?

  50. Zanny

    Thanks Karl, this is amazing script. But how would you submit the value including the decimal? (4.5, 3.5, 1.5…etc)

7 Pings

  1. [...] unknown wrote an interesting post today!.Here’s a quick excerptHi Joshua,. Didn’t get the other comment. Sorry about that. I’m getting that extra space above the rating because (I think) WordPress is adding an empty paragraph element inside the rating div. Since that paragraph is obviously … [...]

  2. [...] jQuery Star Rating Plugin. jQuery Star Rater. Content rater with asp.net, ajax and jQuery. Half-Star Rating Plugin. [...]

  3. [...] jQuery Star Rating Plugin. jQuery Star Rater. Content rater with asp.net, ajax and jQuery. Half-Star Rating Plugin. [...]

  4. [...] 投票插件(Rating Plugins) jQuery Star Rating Plugin. jQuery Star Rater. Content rater with asp.net, ajax and jQuery. Half-Star Rating Plugin. [...]

  5. [...] jQuery Star Rating Plugin. jQuery Star Rater. Content rater with asp.net, ajax and jQuery. Half-Star Rating Plugin. [...]

  6. [...] jQuery Star Rating Plugin. jQuery Star Rater. Content rater with asp.net, ajax and jQuery. Half-Star Rating Plugin. [...]

Sorry, but comments for this entry are now closed.