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