How To: Create Star rating using CSS Sprite and Jquery – With Demo


On 01.17.10, In Ajax, How to, jQuery

As we all know CSS sprite and jquery are in trend. I have seen many star rating tricks but none of them are using css-sprite. I tried to make one , hope you all will love it. Moreover i have used ajax call to store the voting value.

DEMO

So lets start with HTML. Simply paste following HTML just inside your body tag:

1
2
3
4
5
6
7

<div id="ratingdiv">
		<a href="#" class="undone" rel="1">star one</a>
		<a href="#" class="undone" rel="2">star two</a>
		<a href="#" class="undone" rel="3">star three</a>
		<a href="#" class="undone" rel="4">star four</a>
		<a href="#" class="undone" rel="5">star five</a>
</div>

.

Here comes the tricky CSS. Paste it in your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#ratingdiv{overflow:hidden}
#ratingdiv .undone, #ratingdiv .fade{
background:url("star.gif") -30px 0 no-repeat;
width:28px;
display:block;
height:30px;
float:left;
margin-right:4px;
text-indent:-99999px
}
#ratingdiv .done{
background:url("star.gif") no-repeat;
width:28px;
display:block;
height:30px;
float:left;
margin-right:4px;
text-indent:-99999px
}
#ratingdiv .undone:hover{background-position:0}

.

Make a new php file and name it as “rate.php”. Paste the following code in it:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
	for($i=1;$i<=5;$i++)
	{
		if($i <= $_POST['rate'])
			$class="done";
		else
			$class="fade";
	?>
		<a href="#" class="<?php echo $class ?> voted">star rated</span>
	<?php
	}
?>

.

And in last paste the following Jquery code inside your head tag of your document:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
	$('#ratingdiv .undone').click(function(){
		var div = '#ratingdiv';	
		$(div).html('<img src="load.gif" />');
		var postdata = "rate=" + $(this).attr('rel');
		$.ajax({type: "POST",url: "rate.php",data: postdata,success: function(msg){$(div).html(msg)}});
	});	
	$('#ratingdiv .voted').live('click' , function(){
		alert('Already Done!');
	});
});
</script>

.

All Done!!

Check out the DEMO

Cheers!

email

You may also like

How To : Make Vertical Rating Meter Easy Way Using jQueryHow To : Make Vertical Rating Meter Easy Way Using jQuery7 jquery and css demos created by web developer juice7 jquery and css demos created by web developer juiceLightest jquery content slider ever - 380 bytesLightest jquery content slider ever - 380 bytesHow To: Create auto-complete using jquery and cssHow To: Create auto-complete using jquery and css


Steve

Steve is the Founder and Editor-in-chief of Web Developer Juice. He's web developer with 4 years of experience in CSS, HTML, PHP and javascript. If you’d like to connect with him, point to the contact page and follow him on Twitter: @wdjuice.

Visit Website

Sponsors

Logo Maker
JavaScript Menu