Star Rating v2 - CSS

Star rating without images.

by erick

HTML

<div id="container">
  <div class="rating-header">
    <h1>A simple star rating</h1>
    <h2>Please rate this image-less gem accordingly</h2>
  </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>
  </div>
</div>
<div class="credit">
    <div>Javascript by&nbsp;<a href="https://plus.google.com/u/0/101904153270919294720/" target="_blank">+Michael Belardo</a></div>
    <div>Designed by&nbsp;<a href="https://plus.google.com/110389592457748523073" target="_blank">+Anthony Montemorano</a></div>
    <div style="margin-top:20px;"><b>Supported Browsers:</b><br>IE8+, Chrome, Safari, Opera, (Firefox soon)</div>
</div>

CSS

* {margin:0;padding:0;}
body {margin:10px;font-family: “Lucida Grande”, sans-serif;font-size:1em;}
.credit a {color:#09BA5E;text-decoration:none;border-bottom:1px dotted #ccc;}
.credit a:hover {color:#2C570F;border-bottom:1px solid #bbb;}

#container {
    position:relative;
    float:left;
}

.rating-header {
    background-color:#999;
    color:#fff;
    padding:8px 50px 8px 15px;
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
}
.rating-header h1 { 
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
}
.rating-header h2 {
    font-family: “Lucida Grande”, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
    line-height: 1.5em;
}
.rating {
    margin:0 0 20px 0;
    box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    padding:5px 15px;
    border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border:1px solid rgba(155,155,155,0.3)
}
.credit {float:right;margin:10px 0;font-size:0.7em;color:#888;text-align:right;}
.credit div {margin-bottom:5px;}

.str-off, .str-on, .str-hover {font-size:30px;text-decoration:none;}
a.str-off {color:rgba(150,150,150,0.5);}
a.str-hover {color:rgba(244,199,77,1);} 
a.str-on {color:rgba(244,199,77,0.7);}
.str-on:before {content:"\2605";}
.str-hover:before {content:"\2605";}
.str-off:before {content:"\2606";}

#number {position:relative;float:right;font-size:30px;color:rgba(150,150,150,0.5);}

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() {
   ...