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!

Answer 1

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>