You are not logged in.
Pages: 1
Do you guys know of an easy to use star-based rating system? It has to be able to take half-star ratings as well as full stars (ok I know it sounds weird but you know what I mean...). So, any suggestions? :)
Here is one it seems good http://www.learningjquery.com/2007/05/h … ing-plugin
Here is also a list of 11 more http://www.enfew.com/5-best-jquery-star … tutorials/
Good luck :)
Just do it yourself. Here's some code for a very simple star rating system GUI... not tested... took me 10 minutes...
.starrating .star {
cursor: pointer;
width...
...
}
.starrating .star[state=off] {
background-image=url(img/star-off.png);
}
.starrating .star[state=on] {
background-image=url(img/star-on.png);
}
----------------------
(Inside the jQuery function / jQuery document.ready):
$(".starrating > .star").click(function(){
starNum = parseInt($(this).attr("star"));
// set parent to the selected star rating... we might need that later
$(this).parent().attr("rating", starNum);
// redraw stars
$(this).siblings().each(function(){
if (parseInt(($this).attr("star")) <= starNum) {
$(this).attr("state", "on");
} else {
$(this).attr("state", "off");
}
});
// save data into form... we can submit it later
$("#hiddenform input[name=rating]").val(starNum);
// you might also/instead have ajax code here
});
------------------
<form id="hiddenform">
<input type="hidden" name="rating">
...
</form>
------------------
<div class="starrating" rating="3">
<div class="star" state="off" star="1"></div>
<div class="star" state="off" star="2"></div>
<div class="star" state="off" star="3"></div>
<div class="star" state="off" star="4"></div>
<div class="star" state="off" star="5"></div>
</div>
Last edited by rolf (March 28 2011)
I like rolf's answer, but it doesn't take "half stars" into consideration... or does it? 8-) oh and by the way, if there's anything I'm not good at, it's definitely jQuery... probably because I never actually dedicated enough time to it...
@Ayman: thanks for the links, haven't checked them out yet, but will certainly do.
For now, I found this link to be useful: http://orkans-tmp.22web.net/star_rating … ain-menu=2
For the half stars a quick solution might be to multiply everything by two. That is in that code you'll have 10 'stars', each star representing a half star to the user. That means in the HTML you'll have 10 divs, which will be aternating between 2 css classes, say "lefthalf" and "righthalf". It should look like 5 stars to the user. I hope This is a good idea. I thought about it before but was too lazy to think it through and add it to the solution which I had already writen. Depending on your needs, there might be better solution. this fractional star stuff can probly be automated, with a bit of thinking, so that you can decide to have 1/4 stars, 1/2 stars or any other fraction instead wihtout having to rewrite any code.
Anyways! Thanks for liking my idea, I take that as a compliment and it is appreciated.
Last edited by rolf (March 30 2011)
Pages: 1