Star Rating using jQuery

Star Rating using jQuery

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained about the implementation of favourite star ratings using jQuery. Here I am  displaying Star Rating by using li tags.  

HTML Code for Displaying Rating Stars

Implementation: This Rating Stars will be highlighted by using CSS and
 jQuery based on the given user’s favorite rating.
 This HTML code displays a list of Star Rating by using an HTML star entity and LI tags. 
On the HTML page I will place two controls one will be span with the id named
 lbl_star to show the Star Rating given by the in numeric. And other one will be <ui> <li>
 that are shown below:-
<ui onMouseOut="resetRating();">
  <li onmouseover="highlightStar(this);" 
onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"  
onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
</ul>
 
</ui>
On the HTML page i inherited jQuery file named jquery-2.1.1.min.js.
 On the onmouseOut event of ui tag I will call jQuery
 function named resetRating() function. On the onmouseover event of the
 li tag i will call the jQuery function named highlightStar(this).On the  
onmouseout event of the li tag i will call the jQuery function removeHighlight(). 
  And also On the onClick event of the li tag i will call the jQuery
 function named addRating(this).

Star Rating jQuery Functions

In these jQuery functions, we receive selected HTML element objects from the function call and change the star status based on the rating stars selected.

 
<script>
function highlightStar(obj) {
               removeHighlight();                            
               $('li').each(function(index) {
                               $(this).addClass('highlight');
                lbl_star.innerHTML = index;
                               if(index == $("li").index(obj)) 
                { 
 
                 lbl_star.innerHTML = index+1;
                      
  
 
                                              return false;         
                               }
               });
}
 
function removeHighlight() {
               $('li').removeClass('selected');
               $('li').removeClass('highlight');
}
 
function addRating(obj) {
               $('li').each(function(index) {
                               $(this).addClass('selected');
                               $('#rating').val((index+1));
                               if(index == $("li").index(obj)) {
                                              return false;         
                               }
               });
}
 
function resetRating() {
               if($("#rating").val()) {
                               $('li').each(function(index) {
                                              $(this).addClass('selected');
                                              if((index+1) == $("#rating").val()) {
                                                             return false;         
                                              }
                               });
               }
}
</script>
 

Star Rating CSS Styles

Here I am using these css styles options for li tag to showing star-rating given by the user.

li {
               display: inline-block;
               color: #F0F0F0;
               text-shadow: 0 0 1px #666666;
               font-size: 30px;
}
 
.highlight, .selected {
               color: #F4B30A;
               text-shadow: 0 0 1px #F48F0A;
}
 

Below I am giving the complete code for this program. You can copy and paste the whole code on your HTML page to enjoy the execution of this program.

<!DOCTYPE HTML>
<html>
        <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <title>Highcharts Example</title>
<style>
li{display: inline-block;color: #F0F0F0;
text-shadow: 0 0 1px #666666;font-size:30px;}
.highlight, .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript">
</script>
<script>
function highlightStar(obj) {
        removeHighlight();             
        $('li').each(function(index) {
               $(this).addClass('highlight');
                lbl_star.innerHTML = index;
               if(index == $("li").index(obj)) 
                { 
 
                 lbl_star.innerHTML = index+1;
                      
  
 
                       return false;  
               }
        });
}
 
function removeHighlight() {
        $('li').removeClass('selected');
        $('li').removeClass('highlight');
}
 
function addRating(obj) {
        $('li').each(function(index) {
               $(this).addClass('selected');
               $('#rating').val((index+1));
               if(index == $("li").index(obj)) {
                       return false;  
               }
        });
}
 
function resetRating() {
        if($("#rating").val()) {
               $('li').each(function(index) {
                       $(this).addClass('selected');
                       if((index+1) == $("#rating").val()) {
                               return false;  
                       }
               });
        }
}
</script>
 
               
        </head>
        <body>
<input type="hidden" name="rating" id="rating" />
 
 
<ul onMouseOut="resetRating();">
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
  <li onmouseover="highlightStar(this);"
 onmouseout="removeHighlight();" onClick="addRating(this);">&#9733;</li>
</ul>
 
<span id="lbl_star" class="error"></span>
        </body>
</html>
 

Conclusion: In above code, I have been explained about Star Rating using jQuery. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.

Thanks and Regards

Using ASP.Net

 

 
 
 

 

 

Comments

Popular posts from this blog

Sending reset password link for one time use only in asp.net

add delete update inside gridview using store procedure in ASP.NET

Change password using asp.net