LebGeeks

Kassem

Member

[jQuery] Star Based Rating System

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? :)

Ayman

Member

Re: [jQuery] Star Based Rating System

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 :)

rolf

Member

Re: [jQuery] Star Based Rating System

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)

Kassem

Member

Re: [jQuery] Star Based Rating System

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

rolf

Member

Re: [jQuery] Star Based Rating System

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)