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:

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!

Recently Published

»

Importance and actions of cloud computing in e-commerce business

The e-commerce industry is growing in leaps and bounds, and, ...

»

How to remove Options from One Select Box and retain One Option?

One can easily remove  options of a select box from HTML and append ...

»

How to Ensure that Users Do Not Deactivate The Critical WordPress Plugins

It’s no secret that among all the remarkably useful features of ...

»

How to scroll to the top of a webpage using jQuery ?

If you are looking for an extraordinary method of smoothly scrolling ...

»

11 sources to gain perfect knowledge of html5 semantic tags

1. Html5tuts Html5tuts is a site dedicated to HTML5. Feel free to ...

»

How to move an element into another parent element using jQuery?

An important piece to the puzzle when coding with jQuery is that how ...

»

10 optionally Good WordPress Typography Plugins You could Opt For

It is not necessary that the person will follow the standard guide ...

»

8 creative 3d slider wordpress themes to keep your blog active

1. Display Display is a WordPress Theme best used for Portfolio and ...

»

11 quick remote screen sharing apps worth trying

1. Join Me Easy to start, easy to join, easy to manage, join.me takes ...