Simple Javascript star rating thingey

UPDATE: Check out this script, its better and has more features:
http://themeforest.net/item/simple-javascript-php-star-rating-system/51239


I know there are heaps of these out there, but this is the one I end up using in most jobs:

This is the html code used to display the stars
(37px below means 1 and a half stars are highlighted, each star is 25px wide)

<ul class='star-rating'>
<li class='current-rating' id='current-rating' style="width: 37px"></li>
<li><a href="#" onclick="vote(1); return false;"
title='1 star out of 5' class='one-star'>1</a></li>
<li><a href="#" onclick="vote(2); return false;"
title='2 star out of 5' class='two-stars'>2</a></li>
<li><a href="#" onclick="vote(3); return false;"
title='3 star out of 5' class='three-stars'>3</a></li>
<li><a href="#" onclick="vote(4); return false;"
title='4 star out of 5' class='four-stars'>4</a></li>
<li><a href="#" onclick="vote(5); return false;"
title='5 star out of 5' class='five-stars'>5</a></li>
</ul>
<div id='current-rating-result'></div> <!-- used to show "success" message after vote -->

This is the CSS used to style the stars:

       .star-rating{
list-style:none;
margin-left:5px !important;
padding:0px;
width: 125px;
height: 25px;
position: relative;
background: url(/images/alt_star.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/**/
float: left;
/* */
}
.star-rating li a{
display:block;
width:25px;
height: 25px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(/images/alt_star.gif) left bottom;
z-index: 2;
left: 0px;
}
.star-rating a:focus,
.star-rating a:active{
border:0;
-moz-outline-style: none;
outline: none;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:25px;
}
.star-rating a.two-stars{
left:25px;
}
.star-rating a.two-stars:hover{
width: 50px;
}
.star-rating a.three-stars{
left: 50px;
}
.star-rating a.three-stars:hover{
width: 75px;
}
.star-rating a.four-stars{
left: 75px;
}
.star-rating a.four-stars:hover{
width: 100px;
}
.star-rating a.five-stars{
left: 100px;
}
.star-rating a.five-stars:hover{
width: 125px;
}
.star-rating li.current-rating{
background: url(/images/alt_star.gif) left center;
position: absolute;
height: 25px;
display: block;
text-indent: -9000px;
z-index: 1;
}

Here is the “alt_star.gif” image sprite: (right click save as)

And here is a bit of javascript that makes use of jQuery to process the vote, and update the user with her result:

<script language="javascript">
function vote(amnt){
$.ajax({
type: "POST",
url: "/path/to/vote/handler.php",
data: "item_id=12345&vote=" amnt,
dataType: "json",
success: function(res){
$('#current-rating').width(res.width);
$('#current-rating-result').html(res.status);
}
});
}
</script>

The above vote handler php script would return something like this:

$vote_amount = (int)$_POST['vote'];
$vote_amount = ($vote_amount<1) ? 1 : min($vote_amount, 5);

// some processing of vote against item_id here...

// each star is 25px wide, so to highlight 3 and a half stars you would return
// a width of 87

$return_json = array(
"width" => 87,
"status" => "Your vote of $vote_amount was successful!",
);

echo json_encode($return_json);

 

The result:

  • 1
  • 2
  • 3
  • 4
  • 5

  • ‘;

    ?>

     

    Leave a Reply

    Your email address will not be published. Required fields are marked *