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

Miscellaneous·Jan, 17

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:

<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:

#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:

<?php
	for($i=1;$i<=5;$i++)
	{
		if($i <= $_POST[&#039;rate&#039;])
			$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:

<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 (){
	$(&#039;#ratingdiv .undone&#039;).click(function(){
		var div = &#039;#ratingdiv&#039;;	
		$(div).html(&#039;<img src="load.gif" />&#039;);
		var postdata = "rate=" + $(this).attr(&#039;rel&#039;);
		$.ajax({type: "POST",url: "rate.php",data: postdata,success: function(msg){$(div).html(msg)}});
	});	
	$(&#039;#ratingdiv .voted&#039;).live(&#039;click&#039; , function(){
		alert(&#039;Already Done!&#039;);
	});
});
</script>

.

All Done!!

Check out the DEMO

Cheers!

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

.

.

.

.

Recently Published

4 flawless WordPress Plugins for Employee Management

Kubernetes: Why Today’s Programmers Need to Understand

Do I Need Endpoint detection and response tools ?

How to Build a Killer Marketing Strategy for your WordPress Blog?

5 Signs You Need a New Hosting Company

5 Things to Consider When Designing A Logo For Your Startup

What Is Access Control?

Process Management Solution For a Business

5 Metrics You Should Track on Every Blog Post