Creating a star rating from an image based on a float number?

Question

recently I have wanted to turn a number into a star rating and I stumbled upon this post here: https://stackoverflow.com/a/1987545/1871869 which is exactly what I wanted to do. I have followed this explanation but I can't seem to get it to work on my local environment, and I was wondering if someone could help me out. Here is my attempt:

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

$(function() {
    console.log("Calling stars()");
    $('.results-contents span.stars').stars();
});

.results {
    font-size: 0;
    padding-bottom: 16px;
}

.results-content {
    font-size: 13px;
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}

.results .results-content span.stars span.stars span {
    background: url('/resources/graphics/stars-icons.png') 0 -36px repeat-x;
    width: 175px;
    height: 80px;
}

.results .results-content span.stars {
    max-width: 80px;
    background-position: 0 0;
}

<script type="text/template" id="results-template">
  <div class="results">
    <div class="results-content">
      <span class="stars">4.0</span> 
    </div>
  </div>
</script>

Image of stars:

What I wanted to do was to simply have the empty stars show, and then based on the rating, show the orange stars on top of the empty stars so that I can show full and half star ratings. However, all I get is a number to show up. My console.log above seems to be called but it seems like the actual rendering of the image and calculation of the star rating is not working. Any help would be appreciated. Thanks!

well a span does not have a width since it is an inline element. — epascarello, Nov 28 '16 at 18:06
@epascarello but didn't I declare one in this CSS class: `.results .results-content span.stars span.stars span`? — user1871869, Nov 28 '16 at 18:08

score 0 · Answer 1 · answered Nov 28 '16 at 18:32

You had multiple issues from CSS styles being wrong to your selector being wrong. Below is not perfect, but it is rendering.

$.fn.stars = function() { 
  return this.each(function() {
    // Get the value
    var val = parseFloat($(this).html()); 
    // Make sure that the value is in 0 - 5 range, multiply to get width
    var size = Math.max(0, (Math.min(5, val))) * 36.5; 
    // Create stars holder
    var $span = $('<span> </span>').width(size); 
    // Replace the numerical value with stars
    $(this).empty().append($span);
  });
}

$(function() {
  console.log("Calling stars()");
  $('.results-content span.stars').stars();
});

.results {
  font-size: 0;
  padding-bottom: 16px;
}
.results-content {
  font-size: 13px;
  display: inline-block;
  margin-left: 20px;
  vertical-align: top;
  background: url('https://i.stack.imgur.com/rwkqF.png') 0 0 repeat-x;
  width: 185px;
  height: 35px;
}
.results .results-content span.stars span {
  background: url('https://i.stack.imgur.com/rwkqF.png') 0 -36px repeat-x;
  display: inline-block;
  height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">
  <div class="results-content">
    <span class="stars">0.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">0.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">1.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">1.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">2.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">3.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">3.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">4.0</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">4.5</span> 
  </div>
</div>
<div class="results">
  <div class="results-content">
    <span class="stars">5.0</span> 
  </div>
</div>

Hey this is awesome! Thank you so much! I am just wondering, is there a way to do this with raw javascript and not jQuery? I am having some issues using jQuery and maybe want to stray away from using it. — user1871869, Nov 28 '16 at 20:22
yes, anything is possible with raw JavaScript when done with jQuery... jQuery is built on it... — epascarello, Nov 28 '16 at 20:23
It's just that I am using some sort of mandatory template mechanism that for whatever reason, is preventing me from being able to call the `$.fn.stars` function. It seems like when I take out the templating mechanism, your answer above works perfectly. Is there any way you could change the `$.fn.stars` function to be raw JavaScript? — user1871869, Nov 28 '16 at 20:28
I also have been playing around with something like this: ` ` So that I don't even need to use JQuery or JavaScript in my code, But I can't seem to get it so that the width auto-calculates the pixels needed to set the width of the stars correctly... — user1871869, Nov 28 '16 at 20:31

Creating a star rating from an image based on a float number?

1 Answers1