0

I am using this template to display a rating next to a user.

{insert name=get_percent value=a assign=mpercent userid=$p.USERID}

  {if $mpercent ne ""}
    <div class='user-rate'>
      rate<span class='green'>{$mpercent}&#37;</span>
    </div>

  {else}
    <div class='user-rate'>not rated yet</div>
  {/if}

I'd like to change the rating from a percentage value to a star rating (0-5).

I tried the answer in this link

this is the code as I added the following CSS:

span.stars, span.stars span {
  display: block;
  background:url(../images/stars.png) 0 -16px repeat-x;
  width: 80px;
  height: 16px;
}

span.stars span {
  background-position: 0 0;
}

And JavaScript:

$(function() {
  $("span.stars").stars();
});

$.fn.stars = function() {
  return $(this).each(function() {
    $(this).html($('<span />')
      .width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
  });
}

And have used this for each of the ratings:

<p> <span class="stars">{$mpercent}</span>    </p>

i used {$mpercent} to get the rating of the member, but the result is that I get 5 stars all the time.

If I change the value of span class to a fixed number (let us say 1,2 or 3) I also get the same result.

Community
  • 1
  • 1
everestbux
  • 27
  • 1
  • 8
  • I've reformatted your question - if you put the time in to make the question legible, then you'll be much more likely to get an answer. – Ed_ Oct 26 '13 at 22:40

1 Answers1

0

Two points:

  1. The code you have linked explicitly says that you need to make sure the value is between 0 and 5. Using 0-100 therefore will show 5 for 5-100. You need to use ($mpercent/100)*5 to convert to the 0-5 range.
  2. You have made the code unnecessarily hard to read by condensing that jQuery plugin to one line.

However, the code looks correct. I suggest you change the value to be between 0 and 5, then double check it's still always showing 5*. Note that this code only runs when the DOM loads, so if you alter the contents of the span using the chrome developer tools or similar you cannot expect the star rating to update automatically.

Ed_
  • 18,798
  • 8
  • 45
  • 71
  • thanks for your answer i tried it but it didn't work the problem is the even if i changed the code {$mpercent} between the to a fixed number like 1, 2 ...etc , i get the same result – everestbux Oct 28 '13 at 01:13
  • Ok, well - as I said - the code looks right to me. What debugging efforts have you made? You should start by checking the function actually gets called by adding `console.log('stars')` beneath the stars function call. – Ed_ Oct 28 '13 at 10:01