Star Rating with simple css and less javascript

I was searching for Star Rating for one of my client. But when I did search for it, I found many plugins with heavy js files. So I tried to build my own plugin with less javascript and more css used in it. And more compatible with asp or other coding languages.

So first of all get star image which is transparent through middle, so we can see background through star shape. like this:

We will use this image in our css.

	Then add below html structure in your html page. I am using radio inputrs here. you can use asp radio buttons also as per your requirement. <div class="StarBtns" title="Rate this Recipe"> <div class="defltRate" id="defltRate2" style="width:0%">
	</div>
	<div class="Starcon" title="Rate this Recipe">
	<div class="Rateradiodiv">
	<span class="grRate"><input id="ctl00_ContentPlaceHolder1_rdoRate1" type="radio" name="ctl00$ContentPlaceHolder1$grRate" value="rdoRate1" onclick="getRateshow(1);" /></span>
	</div>
	<div class="colordiv" style="width: 20%">
	</div>
	</div>
	<div class="Starcon" title="Rate this Recipe">
	<div class="Rateradiodiv">
	<span class="grRate"><input id="ctl00_ContentPlaceHolder1_rdoRate2" type="radio" name="ctl00$ContentPlaceHolder1$grRate" value="rdoRate2" onclick="getRateshow(2);" /></span>
	</div>
	<div class="colordiv" style="width: 40%">
	</div>
	</div>
	<div class="Starcon" title="Rate this Recipe">
	<div class="Rateradiodiv">
	<span class="grRate"><input id="ctl00_ContentPlaceHolder1_rdoRate3" type="radio" name="ctl00$ContentPlaceHolder1$grRate" value="rdoRate3" onclick="getRateshow(3);" /></span>
	</div>
	<div class="colordiv" style="width: 60%">
	</div>
	</div>
	<div class="Starcon" title="Rate this Recipe">
	<div class="Rateradiodiv">
	<span class="grRate"><input id="ctl00_ContentPlaceHolder1_rdoRate4" type="radio" name="ctl00$ContentPlaceHolder1$grRate" value="rdoRate4" onclick="getRateshow(4);" /></span>
	</div>
	<div class="colordiv" style="width: 80%">
	</div>
	</div>
	<div class="Starcon" title="Rate this Recipe">
	<div class="Rateradiodiv">
	<span class="grRate"><input id="ctl00_ContentPlaceHolder1_rdoRate5" type="radio" name="ctl00$ContentPlaceHolder1$grRate" value="rdoRate5" onclick="getRateshow(5);" /></span>
	</div>
	<div class="colordiv" style="width: 100%">
	</div>
	</div>
	</div>

Now copy and add this css in your page.
/*****************rating css*******************/


.StarBtns
       {
           /*background-color: #333333;*/
           float: left;
           padding: 0px;
           width: 115px;
           position: relative;
           padding: 0;
       }
       
       
       .Ratebtn1, .Ratebtn2, .Ratebtn3, .Ratebtn4, .Ratebtn5
       {
           position: relative;
           z-index: 1000;
       }
       
       .Starcon
       {
           float: left;
           padding: 0px;
       }
       .defltRate
       {
           background-color: #DAA705;
           float: left;
           height: 20px;
           position: absolute;
           top: 0px;
           width: 89%;
           z-index: 500;
           left: 0px;
           padding: 0;
       }
       
       
       .colordiv
       {
           background-color: #B70606;
           float: left;
           height: 20px;
           position: absolute;
           top: 0px;
           width: 89%;
           z-index: 500;
           display: none;
           left: 0px;
           padding: 0;
       }
       
       .Starcon:hover .colordiv
       {
           /*display: block;*/
       }
       
       
       .Rateradiodiv
{
   background-image: url('../../images/stars.png');
   height: 20px;
   position: relative;
   z-index: 1000;
   width: 23px;
   background-repeat: no-repeat;
   padding: 0;
}
.Rateradiodiv  input {
   height: 100%;
   opacity: 0;
   width: 100%;
}
/*************End of css***************/


You can now check this in browser and you will find that, on hover star rating is increasing. It will give you feel like star rating that you see on other websites and it is without any javascript.



Selecting star:

In webpage we have to select the rating. This can not be possible without javascript.
So we are going to add small javascript code in our page.

Copy below script and add it in your page. 

<script type="text/javascript">             var f = 3;             var radiobtn1 = document.getElementById('ctl00_ContentPlaceHolder1_rdoRate1');             var radiobtn2 = document.getElementById('ctl00_ContentPlaceHolder1_rdoRate2');             var radiobtn3 = document.getElementById('ctl00_ContentPlaceHolder1_rdoRate3');             var radiobtn4 = document.getElementById('ctl00_ContentPlaceHolder1_rdoRate4');             var radiobtn5 = document.getElementById('ctl00_ContentPlaceHolder1_rdoRate5');             if (radiobtn1.checked) {                 document.getElementById("defltRate2").style.width = "20%";             }             if (radiobtn2.checked) {                 document.getElementById("defltRate2").style.width = "40%";             }             if (radiobtn3.checked) {                 document.getElementById("defltRate2").style.width = "60%";             }             if (radiobtn4.checked) {                 document.getElementById("defltRate2").style.width = "80%";             }             if (radiobtn5.checked) {                 document.getElementById("defltRate2").style.width = "100%";             }         function getRateshow(g) {             document.getElementById("defltRate2").style.width = g * 20 + "%";         }     </script> Thats it, We don't need any javascript library for this.Make sure you'r id's are same as in javascript. Do commenting on this post if you find it useful or not.