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
		<a href="#" class="fade voted">star rated</span>
			<a href="#" class="fade voted">star rated</span>
			<a href="#" class="fade voted">star rated</span>
			<a href="#" class="fade voted">star rated</span>
			<a href="#" class="fade voted">star rated</span>

.

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

»

Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...

»

Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...

»

Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...

»

What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...

»

5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...