Create a jQuery Star Comment Rating System
The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase.
Download the ZIP FILE.
HTML (star_rating.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery-Star Comment Rating</title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/star_rating.js"></script>
<style type="text/css">
#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}
#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
#rated div { display: block; float: left; }
#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
#rate_edit:hover { text-decoration: underline; }
#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
#rating_btns ul, #rating_btns li { padding: 0; margin: 0; }
#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;
}
</style>
</head>
<body>
<div id="rating_cont">
<div id="rating_btns">
<ul>
<li>0.5</li>
<li>1.0</li>
<li>1.5</li>
<li>2.0</li>
<li>2.5</li>
<li>3.0</li>
<li>3.5</li>
<li>4.0</li>
<li>4.5</li>
<li>5.0</li>
</ul>
</div>
<div id="rating_on" > </div>
<div id="rated">
<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
<div> - </div>
<div id="small_stars"> </div>
<div id="rate_edit">edit</div>
</div>
</div>
<input type="hidden" id="rating_output" name="rating_output" />
</body>
</html>
jQuery/Jvascript (star_rating.js)
/*
* Written by eligeske
* downloaded from eligeske.com
* have fun. nerd.
*/
$(document).ready(function(){
// hover
$('#rating_btns li').hover(function(){
$rating = $(this).text();
$('#rating_on').css('width', rateWidth($rating));
});
// mouseout
$('#rating_btns li').mouseout(function(){
$rating = $('#rating').text();
if($rating == "not rated"){
$('#rating_on').css('width', "0px");
}
else{
$('#rating_on').css('width', rateWidth($rating));
}
});
//click
$('#rating_btns li').click(function(){
$rating = $(this).text();
$('#rating').text($rating);
$('#rating_output').val($rating);
$pos = starSprite($rating);
$('#small_stars').css('background-position', "0px " + $pos );
$('#rating_btns').hide();
$('#rating_on').hide();
$('#rated').fadeIn();
});
//edit
$('#rate_edit').click(function(){
$('#rated').hide();
$('#rating_btns').fadeIn();
$('#rating_on').fadeIn();
});
function rateWidth($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $width = "14px"; break;
case 1.0: $width = "28px"; break;
case 1.5: $width = "42px"; break;
case 2.0: $width = "56px"; break;
case 2.5: $width = "70px"; break;
case 3.0: $width = "84px"; break;
case 3.5: $width = "98px"; break;
case 4.0: $width = "112px"; break;
case 4.5: $width = "126px"; break;
case 5.0: $width = "140px"; break;
default: $width = "84px";
}
return $width;
}
function starSprite($rating){
$rating = parseFloat($rating);
switch ($rating){
case 0.5: $pos = "-11px"; break;
case 1.0: $pos = "-22px"; break;
case 1.5: $pos = "-33px"; break;
case 2.0: $pos = "-44px"; break;
case 2.5: $pos = "-55px"; break;
case 3.0: $pos = "-66px"; break;
case 3.5: $pos = "-77px"; break;
case 4.0: $pos = "-88px"; break;
case 4.5: $pos = "-99px"; break;
case 5.0: $pos = "-110px"; break;
default: $pos = "-77px";
}
return $pos;
}
});
0
510
No comments
Tweet-Parade (no.5 Jan-Feb 2012) | gonzoblog.nl
02.06.2012
[...] Create a jQuery Star Comment Rating System - The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase. [...]
Tweet Heat - The hottest Tweets of the Month [Feb 2012] | Inspired Magazine
02.29.2012
[...] Create a jQuery Star Comment Rating System - The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase. [...]
Tweet Heat – The hottest Tweets of the Month [Feb 2012] | CS5 Design
03.02.2012
[...] Create a jQuery Star Comment Rating System - The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase. [...]
There are no trackbacks to display at this time.