Half-Star Rating Plugin
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.
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.
August 2nd, 2007 at 11:13 pm
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?
September 25th, 2007 at 8:29 pm
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!
September 26th, 2007 at 12:59 pm
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: nonein 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.
September 26th, 2007 at 1:36 pm
[…] 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 … […]
September 26th, 2007 at 4:16 pm
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.
September 26th, 2007 at 5:12 pm
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?
September 26th, 2007 at 10:47 pm
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).
October 18th, 2007 at 2:59 pm
I want to use it for rating my article with id. What should I do? Please help me.
Thanks in advance.
October 29th, 2007 at 12:40 pm
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.
October 31st, 2007 at 12:08 pm
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!
November 26th, 2007 at 9:33 pm
Nice job! Taking Ritesh’s completely nonfunctional rating system (at least for me) and making it functional. Thanks.
December 7th, 2007 at 6:39 am
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
December 16th, 2007 at 11:39 am
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.
December 22nd, 2007 at 4:49 pm
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')
January 18th, 2008 at 8:59 pm
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.
January 24th, 2008 at 5:57 am
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.
January 31st, 2008 at 2:00 pm
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.
January 31st, 2008 at 3:43 pm
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.
February 6th, 2008 at 3:47 pm
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?
February 6th, 2008 at 5:03 pm
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.
February 6th, 2008 at 11:00 pm
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).
February 6th, 2008 at 11:22 pm
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.
February 22nd, 2008 at 10:32 pm
hey thks..
February 29th, 2008 at 3:01 am
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.
February 29th, 2008 at 10:56 pm
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.
March 3rd, 2008 at 10:31 pm
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});March 4th, 2008 at 10:15 am
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});
});
.
.
.
March 12th, 2008 at 8:47 pm
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
March 17th, 2008 at 2:48 pm
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
March 17th, 2008 at 3:02 pm
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/
April 8th, 2008 at 3:13 pm
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.
April 30th, 2008 at 6:59 pm
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
April 30th, 2008 at 7:17 pm
Follow up: Additional Wish list item.
A target option for where to display results from server.
April 30th, 2008 at 11:27 pm
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.
May 1st, 2008 at 4:06 pm
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).