Rate Yo!

RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.

just create a <div/>, throw some styles, initialize and thats it!.

Hover to change the rating and Click to set.

              <-- HTML -->

              <head>
                <-- Basic styles of the plugin -->
                <link rel="stylesheet" href="jquery.rateyo.css"/>
              </head>

              <body>
                <div id="rateYo"></div>

                <script src="jquery.js"></script>
                <script src="jquery.rateyo.js"></script>
              </body>
            
              /* Javascript */

              //Make sure that the dom is ready
              $(function () {

                $("#rateYo").rateYo({
                  rating: 3.6
                });

              });
            

Using CDNjs

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

Using Bower

bower install rateyo

Using npm

npm install rateyo

Options

starWidth:string, default: 18px

The width of each star, the width of a star is always equal to its height.You can set this option using data-rateyo-star-width attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        starWidth: "40px"
                      });

                    });
                  

Get or set the 'starWidth' option after initialization

                  // Getter
                  var starWidth = $("#rateYo").rateYo("option", "starWidth"); //returns 40px

                  // Setter
                  $("#rateYo").rateYo("option", "starWidth", "40px"); //returns a jQuery Element
                  

normalFill: string, default: #808080

The background color for the un-rated part of a star.You can set this option using data-rateyo-normal-fill attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        normalFill: "#A0A0A0"
                      });

                    });
                  

Get or set the 'normalFill' option after initialization

                  // Getter
                  var normalFill = $("#rateYo").rateYo("option", "normalFill"); //returns "#A0A0A0"

                  // Setter
                  $("#rateYo").rateYo("option", "normalFill", "#B0B0B0"); //returns a jQuery Element
                  

ratedFill: string, default: #F39C12

The color for the rated part of a star.You can set this option using data-rateyo-rated-fill attribute

NOTE: This option will not work when multiColor option is set.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        ratedFill: "#E74C3C"
                      });

                    });
                  

Get or set the 'ratedFill' option after initialization

                  // Getter
                  var ratedFill = $("#rateYo").rateYo("option", "ratedFill"); //returns "#E74C3C"

                  // Setter
                  $("#rateYo").rateYo("option", "ratedFill", "#E74C3C"); //returns a jQuery Element
                  

multiColor: Boolean or Object, default: false , you can set this option using data-rateyo-multi-color="true" attribute, only boolean value is accepted in the data-* attribute

This option helps in changeing the color of the rating, as the rating value changes( Multi Color ).

For the trasition of color with the rating, we need two colors, the color when rating is lowest (startColor) and the color when rating is highest (endColor)

If you specify true as the value, the startColor would be #c0392b and the endColor would be #f1c40f ( Default colors )

You can override the default start and end colors by specifying an Object as follows

{"multiColor": {"startColor": "#FF0000", "endColor": "#00FF00"}}

NOTE: The `startColor` and `endColor` should be only hex values like "#FF0000" not like "red"

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
		/* Javascript */

		$(function () {

		  $("#rateYo").rateYo({

		    rating    : 1.6,
		    spacing   : "5px",
		    multiColor: {

		      "startColor": "#FF0000", //RED
		      "endColor"  : "#00FF00"  //GREEN
		    }
		  });

		});
                  

Get or set the 'multiColor' option after initialization

                  // Getter
                  var ratedFill = $("#rateYo").rateYo("option", "multiColor"); //returns `Object`

                  // Setter
                  $("#rateYo").rateYo("option", "multiColor", false); // disables multi color rating and returns a jQuery Element
                  

numStars: number, default: 5

Number of stars to use, to display the rating.You can set this option using data-rateyo-num-stars attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        numStars: 10
                      });

                    });
                  

Get or set the 'numStars' option after initialization

                  // Getter
                  var numStars = $("#rateYo").rateYo("option", "numStars"); //returns 10

                  // Setter
                  $("#rateYo").rateYo("option", "numStars", 10); //returns a jQuery Element
                  

maxValue: number, default: 5

The Maximum value, you want the rating to end with. You can set this option using data-rateyo-max-value attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        maxValue: 1,
                        numStars: 1,
                        starWidth: "40px"
                      });
                    });
                  

Get or set the 'maxValue' option after initialization

                  // Getter
                  var maxValue = $("#rateYo").rateYo("option", "maxValue"); //returns 1

                  // Setter
                  $("#rateYo").rateYo("option", "maxValue", 1); //returns a jQuery Element
                  

Precision: number, default: 1

The precision of rating.You can set this option using data-rateyo-precision attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        precision: 2,
                      });
                    });
                  

Get or set the 'precision' option after initialization

                  // Getter
                  var normalFill = $("#rateYo").rateYo("option", "precision"); //returns 2

                  // Setter
                  $("#rateYo").rateYo("option", "precision", 3); //returns a jQuery Element
                  

rating: number/string, default: 0

The rating can be given in either percentage or number,
it should be given in a string, if it is a percentage. You can set this option using data-rateyo-rating attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: "50%",
                        precision: 0
                      });
                    });
                  

Get or set the 'rating' option after initialization

                  // Getter
                  var normalFill = $("#rateYo").rateYo("option", "rating"); //returns 50

                  // Setter
                  $("#rateYo").rateYo("option", "rating", 5); //returns a jQuery Element
                  

halfStar: boolean, default: false

When set to true, rating will be displayed in the steps of 0.5. You can set this option using data-rateyo-half-star="true" attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: 1.5,
                        halfStar: true
                      });
                    });
                  

Get or set the 'halfStar' option after initialization

                  // Getter
                  var normalFill = $("#rateYo").rateYo("option", "halfStar"); //returns true

                  // Setter
                  $("#rateYo").rateYo("option", "halfStar", true); //returns a jQuery Element
                  

fullStar: boolean, default: false

When set to true, rating will be displayed in the steps of 1 .You can set this option using data-rateyo-full-star="true" attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: 2,
                        fullStar: true
                      });
                    });
                  

Get or set the 'fullStar' option after initialization

                  // Getter
                  var normalFill = $("#rateYo").rateYo("option", "fullStar"); //returns true

                  // Setter
                  $("#rateYo").rateYo("option", "fullStar", true); //returns a jQuery Element
                  

readOnly: boolean, default: false

Set readOnly: true, if you want the rating to be non-editable.You can set this option using data-rateyo-read-only="true" attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: 3.2,
                        readOnly: true
                      });
                    });
                  

Get or set the 'readOnly' option after initialization

                  // Getter
                  var readOnly = $("#rateYo").rateYo("option", "readOnly"); //returns true

                  // Setter
                  $("#rateYo").rateYo("option", "readOnly", false); //returns a jQuery Element
                  

spacing: string, default: "0px"

The amount of space between stars in pixels.

You can set this option using data-rateyo-spacing attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: 3.2,
                        spacing: "10px"
                      });
                    });
                  

Get or set the 'spacing' option after initialization

                  // Getter
                  var readOnly = $("#rateYo").rateYo("option", "spacing"); //returns 10px

                  // Setter
                  $("#rateYo").rateYo("option", "spacing", "5px"); //returns a jQuery Element
                  

rtl ( Right to Left ) : Boolean, default: false

Render the rating Right to Left.

You can set this option using data-rateyo-rtl attribute

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: 3.2,
                        rtl: true
                      });
                    });
                  

Get or set the 'rtl' option after initialization

                  // Getter
                  var currentRTL = $("#rateYo").rateYo("option", "rtl"); //returns false by default

                  // Setter
                  $("#rateYo").rateYo("option", "rtl", true); //returns a jQuery Element
                  

onInit: function, default: null

This function is called when the rating is rendered in the UI for the first time

Params:
This function will be called with two parameters,
1)rating: the number representing rating,
2)rateYoInstance: an instance of the plugin containing some public functions

Context:
The context( this ) of the function will be set to the HTML element on which the plugin is initialized.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        onInit: function (rating, rateYoInstance) {

                          console.log("RateYo initialized! with " + rating);
                        }
                      });
                    });
                  

onSet: function, default: null

This function is called whenever the rating is set.

Params:
This function will be called with two parameters,
1)rating: the number representing rating,
2)rateYoInstance: an instance of the plugin containing some public functions

Context:
The context( this ) of the function will be set to the HTML element on which the plugin is initialized.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        onSet: function (rating, rateYoInstance) {

                          alert("Rating is set to: " + rating);
                        }
                      });
                    });
                  

Get or set the 'onSet' option after initialization

                  // Getter
                  var onSet = $("#rateYo").rateYo("option", "onSet"); //returns the function

                  // Setter
                  $("#rateYo").rateYo("option", "onSet", function () {

                      console.log("This is a new function");
                         }); //returns a jQuery Element
                  

onChange: function, default: null

This function is called whenever the rating is changed (not set),

The Params and Context for the function would be exactly same as that of onSet callback.

                    <-- HTML -->
                    <div id="rateYo"></div>
                    <div class="counter"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        onChange: function (rating, rateYoInstance) {

                          $(this).next().text(rating);
                        }
                      });
                    });
                  

Get or set the 'onChange' option after initialization

                  // Getter
                  var onChange = $("#rateYo").rateYo("option", "onChange"); //returns the function

                  // Setter
                  $("#rateYo").rateYo("option", "onChange", function () {

                      console.log("this is a new function");
                         }); //returns a jQuery Element
                  

Methods

All methods follow a common signature.

A method of the plugin can be called by passing the name of the method as the first parameter

If no arguments are passed after the method name, it is considered as a getter, else it is considered as a setter

option:

All the options of plugin specified in the previous section can be get or set using the 'option' method

eg: $("#rateYo").rateYo('option', 'numStars', 10) would display 10 stars in the plugin instead of default 5.

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
			/* Javascript */

			$(function () {

			  var $rateYo = $("#rateYo").rateYo({"rating": 0.7});

			  /* set the option `onChange` */
			  $rateYo.rateYo("option", "onChange", function () {

			    /* get the rated fill at the current point of time */
			    var ratedFill = $rateYo.rateYo("option", "ratedFill");

			    console.log("The color of rating is " + ratedFill);
			  });

			  /* set the option `multiColor` to show Multi Color Rating */
			  $rateYo.rateYo("option", "multiColor", true);
			});
                  

rating:

A method to get or set the rating of plugin.

eg: $("#rateYo").rateYo("rating") would return the currently displayed rating.

eg: $("#rateYo").rateYo("rating", 4.5) would set the rating to 4.5.

The same result can also be achieved through 'option' method $("#rateYo").rating('option', 'rating', 4.5).

 
                    <!-- HTML -->
                    <div id="rateYo"></div>
                    <div>
                      <button id="getRating" >Get Rating</button>
                      <button id="setRating" >Set Random Rating</button>
                    </div>
                  
                    /* Javascript */

                    $(function () {

                      var $rateYo = $("#rateYo").rateYo();

                      $("#getRating").click(function () {

                        /* get rating */
                        var rating = $rateYo.rateYo("rating");

                        window.alert("Its " + rating + " Yo!");
                      });

                      $("#setRating").click(function () {

                        /* set rating */
                        var rating = getRandomRating();
                        $rateYo.rateYo("rating", rating);
                      });
                    });
                  

destroy:

Destroys the plugin and return the container to the original state before initialization.

 
                    <!-- HTML -->
                    <div id="rateYo"></div>
                    <div>
                      <button id="destroy">Destroy</button>
                      <button id="initialize">Initialize</button>
                    </div>
                  
                    /* Javascript */

                    $(function () {

                      var $rateYo = $("#rateYo").rateYo();

                      $("#destroy").click(function () {

                        $rateYo.rateYo("destroy");
                      });

                      $("#initialize").click(function () {

                        $rateYo.rateYo();
                      });
                    });
                  

Events

rateyo.init

This event shall be fired when the rendering of rating is completed in the UI for the first time.

Initial rating shall be passed in the second parameter to the event handler

NOTE: You should listen for the event before calling `rateYo` on the element or use onInit option to achieve the same thing

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
			/* javascript */

			$(function () {

			  /*
			   * NOTE: You should listen for the event before calling `rateYo` on the element
			   *       or use `onInit` option to achieve the same thing
			   */
			  $("#rateYo").on("rateyo.init", function (e, data) {

					  console.log("RateYo initialized! with " + data.rating);
				      });

			  $("#rateYo").rateYo();
			});
                  

rateyo.set

This event shall be fired when ever the rating is set.

This new rating shall be passed in the second parameter to the event handler

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* javascript */

                    $(function () {

                      $("#rateYo").rateYo()
                                  .on("rateyo.set", function (e, data) {

                                      alert("The rating is set to " + data.rating + "!");
                                  });
                    });
                  

rateyo.change

This event will be fired when ever the rating is change.

This new rating shall be passed in the second parameter to the event handler

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* javascript */

                    $(function () {

                      $("#rateYo").rateYo()
                                  .on("rateyo.change", function (e, data) {

                                    var rating = data.rating;
                                    $(this).next().text(rating);
                                  });
                    });
                  

Hacks - The Radioactive Options

You need to be extra careful with these options. If not used properly, the plugin may not function as expected

starSvg: String, default: Star SVG

This option can be given during the plugin initialization only, to replace the current star with a custom shape

The custom shape must be in the form of a SVG string, the shapes in this website fits well with this plugin.

There is also a comment below that can help you with creating shapes.

Please choose shapes that have the aspect ratio of 1:1 ( square shapes ).

In the following example i used this star

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        "rating" : 3.2,
                        "starSvg": ""+
                                     ""+
                                    ""
                      });
                    });