Star rating using CSS Sprite and Jquery – With Demo

Star rating using CSS Sprite and Jquery – With Demo

In Ajax, CSS, PHP, jquery, by Steve

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:

^?View Code HTML

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

^?View Code CSS

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

^?View Code PHP

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

^?View Code JAVASCRIPT

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

Bookmark

Comments

msmarystrikens

01.17.10

Hi! I really liked your forum, especially this section. I just signed up and immediately decided to introduce myself, if I’m wrong section, ask the moderators to move the topic to the right place, hopefully it will take me well… My name is Mary, me 29 years, humourist and serious woman in one person. I apologize for my English

msmarystrikens

01.17.10

All-Nighters: Mind Games
Jonah Lehrer explores how the nature of the human mind can make it an enemy of sleep.