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

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!

Recently Published

»

5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...

»

What Is Access Control?

Access Control, When running a business, there are dozens of things ...

»

Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...

»

5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...

»

3 of the Most Dynamic LMS Plugins for WordPress

The possibilities are limitless when you want to put a course online ...

»

Do You Really Need Access to Advanced Scripting Capabilities?

One of the features you’ll find most commonly advertised when ...

»

Obvious UX Trends that will Rule 2018

For web design industry, we see new UX trends in the way we build ...

»

Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...

»

Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...