Turn a number into star rating display using jQuery and CSS

Question

I have been looking at jquery plugin and was wondering how to adapt that plugin to turn a number  like 4 8618164  into a 4 8618164 stars filled out of 5  Basically interpreting a number  lt 5 into stars filled in a 5-star rating system using jQuery JS CSS    Note that this would only display show the stars rating from an already available number and not accept new ratings submissions

User · Answer

If you only have to support modern browsers, you can get away with:

No images;
Mostly static css;
Nearly no jQuery or Javascript;

You only need to convert the number to a class, e.g. class='stars-score-50'.

First a demo of "rendered" markup:

_x000D_

body { font-size: 18px; }_x000D_
_x000D_
.stars-container {_x000D_
  position: relative;_x000D_
  display: inline-block;_x000D_
  color: transparent;_x000D_
}_x000D_
_x000D_
.stars-container:before {_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  content: '?????';_x000D_
  color: lightgray;_x000D_
}_x000D_
_x000D_
.stars-container:after {_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  content: '?????';_x000D_
  color: gold;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
.stars-0:after { width: 0%; }_x000D_
.stars-10:after { width: 10%; }_x000D_
.stars-20:after { width: 20%; }_x000D_
.stars-30:after { width: 30%; }_x000D_
.stars-40:after { width: 40%; }_x000D_
.stars-50:after { width: 50%; }_x000D_
.stars-60:after { width: 60%; }_x000D_
.stars-70:after { width: 70%; }_x000D_
.stars-80:after { width: 80%; }_x000D_
.stars-90:after { width: 90%; }_x000D_
.stars-100:after { width: 100; }

_x000D_

Within block level elements:_x000D_
_x000D_
<div><span class="stars-container stars-0">?????</span></div>_x000D_
<div><span class="stars-container stars-10">?????</span></div>_x000D_
<div><span class="stars-container stars-20">?????</span></div>_x000D_
<div><span class="stars-container stars-30">?????</span></div>_x000D_
<div><span class="stars-container stars-40">?????</span></div>_x000D_
<div><span class="stars-container stars-50">?????</span></div>_x000D_
<div><span class="stars-container stars-60">?????</span></div>_x000D_
<div><span class="stars-container stars-70">?????</span></div>_x000D_
<div><span class="stars-container stars-80">?????</span></div>_x000D_
<div><span class="stars-container stars-90">?????</span></div>_x000D_
<div><span class="stars-container stars-100">?????</span></div>_x000D_
_x000D_
<p>Or use it in a sentence: <span class="stars-container stars-70">?????</span> (cool, huh?).</p>

_x000D_

Then a demo that uses a wee bit of code:

_x000D_

$(function() {_x000D_
  function addScore(score, $domElement) {_x000D_
    $("<span class='stars-container'>")_x000D_
      .addClass("stars-" + score.toString())_x000D_
      .text("?????")_x000D_
      .appendTo($domElement);_x000D_
  }_x000D_
_x000D_
  addScore(70, $("#fixture"));_x000D_
});

_x000D_

body { font-size: 18px; }_x000D_
_x000D_
.stars-container {_x000D_
  position: relative;_x000D_
  display: inline-block;_x000D_
  color: transparent;_x000D_
}_x000D_
_x000D_
.stars-container:before {_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  content: '?????';_x000D_
  color: lightgray;_x000D_
}_x000D_
_x000D_
.stars-container:after {_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  content: '?????';_x000D_
  color: gold;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
.stars-0:after { width: 0%; }_x000D_
.stars-10:after { width: 10%; }_x000D_
.stars-20:after { width: 20%; }_x000D_
.stars-30:after { width: 30%; }_x000D_
.stars-40:after { width: 40%; }_x000D_
.stars-50:after { width: 50%; }_x000D_
.stars-60:after { width: 60%; }_x000D_
.stars-70:after { width: 70%; }_x000D_
.stars-80:after { width: 80%; }_x000D_
.stars-90:after { width: 90%; }_x000D_
.stars-100:after { width: 100; }

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
Generated: <div id="fixture"></div>

_x000D_

The biggest downsides of this solution are:

You need the stars inside the element to generate correct width;
There's no semantic markup, e.g. you'd prefer the score as text inside the element;
It only allows for as many scores as you'll have classes (because we can't use Javascript to set a precise width on a pseudo-element).

To fix this the solution above can be easily tweaked. The :before and :after bits need to become actual elements in the DOM (so we need some JS for that).

The latter is left as an excercise for the reader.

User · Answer

I ended up going totally JS-free to avoid client-side render lag   To accomplish that  I generate HTML like this    lt span class  stars  title   value as decimal   gt       lt span style  width  value 5 100      gt   lt  span gt    To help with accessibility  I even add the raw rating value in the title attribute

User · Answer

Why not just have five separate images of a star  empty  quarter-full  half-full  three-quarter-full and full  then just inject the images into your DOM depending on the truncated or rouded value of rating multiplied by 4  to get a whole numner for the quarters    For example  4 8618164 multiplied by 4 and rounded is 19 which would be four and three quarter stars   Alternatively  if you re lazy like me   just have one image selected from 21  0 stars through 5 stars in one-quarter increments  and select the single image based on the aforementioned value  Then it s just one calculation followed by an image change in the DOM  rather than trying to change five different images

User · Answer

Try this jquery helper function file  jquery Rating js    ES5   fn stars   function         return   this  each function             var rating     this  data  rating            var fullStar   new Array Math floor rating   1   join   lt i class  fas fa-star  gt  lt  i gt             var halfStar     rating 1      0      lt i class  fas fa-star-half-alt  gt  lt  i gt                var noStar   new Array Math floor   this  data  numStars     1 - rating   join   lt i class  far fa-star  gt  lt  i gt               this  html fullStar   halfStar   noStar                ES6   fn stars   function         return   this  each function             const rating     this  data  rating            const numStars     this  data  numStars            const fullStar     lt i class  fas fa-star  gt  lt  i gt   repeat Math floor rating            const halfStar    rating 1    0      lt i class  fas fa-star-half-alt  gt  lt  i gt                const noStar     lt i class  far fa-star  gt  lt  i gt   repeat Math floor numStars-rating              this  html    fullStar   halfStar   noStar                 index html      lt  DOCTYPE html gt       lt html lang  en  gt       lt head gt           lt meta charset  UTF-8  gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt           lt meta http-equiv  X-UA-Compatible  content  ie edge  gt           lt title gt Star Rating lt  title gt           lt link href  https   cdnjs cloudflare com ajax libs font-awesome 5 9 0 css all min css  rel  stylesheet  gt           lt script src  https   cdnjs cloudflare com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt           lt script src  js jquery Rating js  gt  lt  script gt           lt script gt                function                        stars   stars                             lt  script gt       lt  head gt       lt body gt            lt span class  stars  data-rating  3 5  data-num-stars  5   gt  lt  span gt        lt  body gt       lt  html gt

User · Answer

Here s a solution for you  using only one very tiny and simple image and one automatically generated span element   CSS  span stars  span stars span       display  block      background  url stars png  0 -16px repeat-x      width  80px      height  16px     span stars span       background-position  0 0      Image         source  ulmanen fi      Note  do NOT hotlink to the above image  Copy the file to your own server and use it from there   jQuery    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       lt span   gt    width size              Replace the numerical value with stars           this  html  span               If you want to restrict the stars to only half or quarter star sizes  add one of these rows before the var size row   val   Math round val   4    4     To round to nearest quarter    val   Math round val   2    2     To round to nearest half      HTML   lt span class  stars  gt 4 8618164 lt  span gt   lt span class  stars  gt 2 6545344 lt  span gt   lt span class  stars  gt 0 5355 lt  span gt   lt span class  stars  gt 8 lt  span gt    Usage    function            span stars   stars          Output         source  ulmanen fi      Demo     http   www ulmanen fi stuff stars php   This will probably suit your needs  With this method you don t have to calculate any three quarter or whatnot star widths  just give it a float and it ll give you your stars     A small explanation on how the stars are presented might be in order   The script creates two block level span elements  Both of the spans initally get a size of 80px   16px and a background image stars png  The spans are nested  so that the structure of the spans looks like this    lt span class  stars  gt       lt span gt  lt  span gt   lt  span gt    The outer span gets a background-position of 0 -16px  That makes the gray stars in the outer span visible  As the outer span has height of 16px and repeat-x  it will only show 5 gray stars   The inner span on the other hand has a background-position of 0 0 which makes only the yellow stars visible   This would of course work with two separate imagefiles  star yellow png and star gray png  But as the stars have a fixed height  we can easily combine them into one image  This utilizes the CSS sprite technique   Now  as the spans are nested  they are automatically overlayed over each other  In the default case  when the width of both spans is 80px  the yellow stars completely obscure the grey stars   But when we adjust the width of the inner span  the width of the yellow stars decreases  revealing the gray stars   Accessibility-wise  it would have been wiser to leave the float number inside the inner span and hide it with text-indent  -9999px  so that people with CSS turned off would at least see the floating point number instead of the stars   Hopefully that made some sense     Updated 2010 10 22  Now even more compact and harder to understand  Can also be squeezed down to a one liner     fn stars   function         return   this  each function               this  html     lt span   gt    width Math max 0   Math min 5  parseFloat   this  html         16

User · Answer

DEMO  You can do it with 2 images only  1 blank stars  1 filled stars   Overlay filled image on the top of the other one  and convert rating number into percentage and use it as width of fillter image      containerdiv     border  0    float  left    position  relative    width  300px      cornerimage     border  0    position  absolute    top  0    left  0    overflow  hidden       img     max-width  300px

User · Answer

using jquery without prototype  update the js code to        stars    each function             Get the value     var val     this  data  rating           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       lt span   gt    width size          Replace the numerical value with stars       this  html  span         I also added a data attribute by the name of data-rating in the span    lt span class  stars  data-rating  4   gt  lt  span gt

User · Answer

Here s my take using JSX and font awesome  limited on only  5 accuracy  though           lt span gt             Array Math floor rating   fill  lt i className  fa fa-star  gt  lt  i gt                rating  - Math floor rating   0            lt i className  fa fa-star-half  gt  lt  i gt            lt  span gt    First row is for whole star and second row is for half star  if any

[javascript] Turn a number into star rating display using jQuery and CSS

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to rating