22

Can anyone suggest a simple JQuery five star rating script that is easy to setup. I just need a single instance on a single page. I don't care if it writes to a file or mysql database to calculate rating average.

It should display the number of votes and the calculated average. It should also check if the person has already rated or should not allow more than 2 ratings at a time. Should have cookies or sessions to prevent multiple ratings or some other mechanism.

I don't care if its free or cost money but the licensing should allow me to use it in commercial applications.

Appreciate all suggestions! Thank you!

P.S. I spent a couple of day trying different scripts online but have not found anything that was actually complete.

David Mulder
  • 26,123
  • 9
  • 51
  • 114
  • 1
    @Andrew: did you really have nothing better to do than unilaterally close a question with 20 upvotes, and 40+ upvotes for the #1 answer? How about using your moderator powers more constructively, such as to change the accepted answer to be the #1 answer? – Dan Dascalescu Aug 05 '14 at 10:44
  • 3
    @dan Your timing and your tone are certainly appreciated. – Andrew Barber Aug 05 '14 at 10:51
  • 1
    @AndrewBarber: given your track record of closing and deleting questions, all I can hope for from the nicest request I could possibly come up with (after having voted to reopen long ago), is to let off some steam. But anyway - would you kindly consider reopening this question, in the light of the interest it has generated in the programming community during the last year and a half? – Dan Dascalescu Aug 05 '14 at 12:02
  • 3
    @dan this isn't really the place for this discussion. The community can reverse my decision if they wish. I see no reason to do so. "Interest" is not one. – Andrew Barber Aug 05 '14 at 12:07
  • 5
    @Dan Dascalescu: Changing the accepted answer is not one of a powers a moderator has, so even if we wanted to, we couldn't. Questions that ask for product suggestions are explicitly off-topic for our site. No amount of views or votes will change that. Anyway, feel free to post on meta if you feel you have a case to make for reopening this. – BoltClock Aug 05 '14 at 12:34
  • I have to say that I don't appreciate @AndrewBarber's tone. – tadasajon Jun 12 '15 at 16:09

2 Answers2

50

I've packaged a star rating plugin for meteor, so I've evaluated all the 11 jQuery rating plugins listed here, and the winner is, by far, RateIt.

Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you'd like, and also any step size.

Minified size: 4.35KB (1.55KB when gzipped).

Tested on: IE6-10, Chrome 7-22, Firefox 3.6-16, Opera 10.63-12 - using jQuery 1.6.2 - 1.8.2. Touch support test on iPad iOS 4.2.1-5

RateIt can optionally use the HTML5 range input element - perfect for this purpose. No lame <li> elements or radio buttons.

The others are clearly lesser solutions:

Star Rating, the first answer

  • 78 open issues
  • on Google Code, not on GitHub, which means little to no pull requests
  • latest update 7 months ago

Raty, the second answer

  • somewhat slow development check the issues tab)
  • no mention of browser compatibility or touch support
  • has test suite

https://github.com/ripter/jquery.rating

  • only 22 commits
  • no touch support, browser compatibility listing or anything
  • raty is clearly better

Anyway, none of these mentions browser compatibility or touch support. RateIt does, and it also explains clearly why it's better and different from the others:

Why is RateIt different

Although it does the same job as the rest of the jQuery star rating plugins, the main difference is its simplicity. Most plugins create an element for each (partial) star, be it a div with a star background, or an img tag. Each of these tags gets a hover event, and a click event. And on these hover/click events it has to go and talk to the other stars, telling them to change their state.

So each star plugin does a lot of DOM alterations (adding the number of stars as elements), and adds lots of events (again the number of stars times 2).

RateIt uses basically three divs.

Oh, and the last update? Yesterday.

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
  • 15
    You, sir, did a fine job here – Alexander Nov 19 '12 at 10:54
  • changing the star image fails, I mean dimensions not enough documentation - I had situation when I needed to load html dynamically and there was no any word about initialising rateit manually /after script load again – Michal - wereda-net Jan 16 '14 at 13:11
  • Looks like Raty is much cleaner and better documented. – mahatmanich Mar 21 '14 at 08:56
  • @mahatmanich: Looks like you need to be a little more specific. What does "cleaner" mean? [RateIt has 100 SLOC less](https://github.com/dandv/meteor-jquery-rateit/blob/master/jquery.rateit.js) than [Raty](https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js). How is Raty "better documented" when it [doesn't even list any features](https://github.com/wbotelhos/raty)? – Dan Dascalescu Mar 21 '14 at 10:02
  • See my comment the answer on raty! – mahatmanich Mar 21 '14 at 14:29
4

This looks nice:
http://www.fyneworks.com/jquery/star-rating/

But you will need more of a backend to make sure people can't vote twice and to get an average of number of votes. The votes need to be stored somewhere (or at leas the current average) and whether or not a user voted already should be stored on the server too.

This link can tell you about some of the server-side stuff that needs to be done: http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/

zsalzbank
  • 9,685
  • 1
  • 26
  • 39
  • 2
    Star-Rating is a little rusty (no touch support, for instance). Have a look at [RateIt](http://stackoverflow.com/a/13176213/1269037): touch support, clear browser compatibility, very frequently updated, and much easier on the DOM than other plugins. – Dan Dascalescu Nov 01 '12 at 11:42
  • Also, star-rating hasn't been updated since Feb 2013. [RateIt](http://stackoverflow.com/questions/4542883/jquery-star-rating/13176213#13176213) was updated last week. – Dan Dascalescu Apr 12 '16 at 22:50