Star Rating

A star rating demo using SVG, Javascript, and CSS

by irwan dwiyanto

HTML

<div id="container">
  <div class="rating-header">
    <h1>A simple star rating</h1>
    <h5>Please rate this image-less gem accordingly</h5>
  </div>
  <div id="stars" class="rating">
    <a id="one" class="str-off" title='1/5' href="#"></a>
    <a id="two" class="str-off" title='2/5' href="#"></a>
    <a id="three" class="str-off" title='3/5' href="#"></a>
    <a id="four" class="str-off" title='4/5' href="#"></a>
    <a id="five" class="str-off" title='5/5' href="#"></a>
    <div id="number"></div>
    <br class="clear">
  </div>
</div>
<div class="status">
      <div>
        <span>Last Modified:&nbsp;</span>02/16/2012
      </div>
      <div>
        <span>Design:&nbsp;</span>
        <a href="http://gplus.to/allusis" target="_blank">+Anthony Montemorano</a>
      </div>
      <div>
        <span>Development:&nbsp;</span>
        <a href="https://gplus.to/TerrordactylDesigns" target="_blank">+Mike Belardo</a>
      </div>
    </div>

CSS

@media screen {
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff') format('woff');
}
}
html,body {margin:0;padding:0}
.clear {clear:both}
h1 {
  margin:30px 10px 0 10px;
  padding:0;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:1.8em;
  font-weight:normal;
}
h5 {
  margin:0 10px 10px 10px;
  padding:0;
  font-family: 'Open Sans', sans-serif;
  font-size:0.9em;
  color:#999;
  font-weight:normal;
  font-style:italic;
}
.rating {
  padding:1.5em;
  padding-left:10px;
  margin-top:2px;
  display:block;
  
  box-shadow:0 0 20px rgba(150,150,150,0.2);
}
.rating a {
  display:block;
  width:50px; 
  height:50px;
  float:left; 
  background:url('../img/star.svg');
  background-repeat:no-repeat; 
}

a.str-off,a.str-on,a.str-hover {float:left;display:block;}
a.str-off {
   margin: 50px 20px 50px 0;
   position: relative;
   display: block;
   color: #ccc;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid #ccc;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}

a.str-off:before {
   border-bottom: 80px solid #ccc;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
  ...

JavaScript

//initialize clicked to false and initializes selected and arrays
var clicked = false;
var selected;
var idArray = [one, two, three, four, five];
//sets the rating stars
function f_setRating(x) {
    var i;
    switch (x) {
    case 'one':
        i = 1;
        break;
    case 'two':
        i = 2;
        break;
    case 'three':
        i = 3;
        break;
    case 'four':
        i = 4;
        break;
    case 'five':
        i = 5;
        break;
    }
    //sets the rating number
    number.innerHTML = i;
    //sets the hovered or clicked star to hover class
    idArray[i - 1].className = 'str-hover';
    //sets class of all stars below the selected or hovered to str-on 
    for (pos = 0; pos < (i - 1); pos++) {
        idArray[pos].className = 'str-on';
    }
    //sets class of all stars above the selected or hovered to str-off 
    for (endPos = 5; endPos > i; endPos--) {
        idArray[endPos - 1].className = 'str-off';
    }
}
//sets the selected rating
function f_setSelected(x) {
    switch (x) {
    case 'one':
        selected = 0;
        break;
    case 'two':
        selected = 1;
        break;
    case 'three':
        selected = 2;
        break;
    case 'four':
        selected = 3;
        break;
    case 'five':
        selected = 4;
        break;
    }
}
//sets class of all stars to str-off
function f_clearRating() {
    number.innerHTML = '';
    for (pos = 4; pos >= 0; pos--) {
        idArray[pos].className = 'str-off';
    }
}
//resets the rating to the clicked value
function f_resetRating() {
    var idArray = ['one', 'two', 'three', 'four', 'five'];
    f_setRating(idArray[selected]);
}
//handles onClick event 
function f_onClick(x) {
    clicked = true;
    f_setRating(x);
    f_setSelected(x);
}
//handles onMouseOut event
function f_onMouseOut() {
    if (clicked) {
        f_resetRating();
    }
    else {
        f_clearRating();
    }
}
//mouseOut event listener
$(".rating a").mouseout(function() {
   ...