"Font Awesome Star Ratings"
Bootstrap 3.2.0 Snippet by Cyruxx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Thanks @Maks for this snippet ! - With working FontAwesome Stars - <a href="http://twitter.com/AlexMahrt" target="_blank">@AlexMahrt on Twitter</a><br><small>Hover and click on a star</small></h2> </div> <div class="row lead"> <div id="stars" class="starrr"></div> You gave a rating of <span id="count">0</span> star(s) </div> <div class="row lead"> <p>Also you can give a default rating by adding attribute data-rating</p> <div id="stars-existing" class="starrr" data-rating='4'></div> You gave a rating of <span id="count-existing">4</span> star(s) </div> </div>
/* FontAwesome for working BootSnippet :> */ @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css')
// Starrr plugin (https://github.com/dobtco/starrr) var __slice = [].slice; (function($, window) { var Starrr; Starrr = (function() { Starrr.prototype.defaults = { rating: void 0, numStars: 5, change: function(e, value) {} }; function Starrr($el, options) { var i, _, _ref, _this = this; this.options = $.extend({}, this.defaults, options); this.$el = $el; _ref = this.defaults; for (i in _ref) { _ = _ref[i]; if (this.$el.data(i) != null) { this.options[i] = this.$el.data(i); } } this.createStars(); this.syncRating(); this.$el.on('mouseover.starrr', 'i', function(e) { return _this.syncRating(_this.$el.find('i').index(e.currentTarget) + 1); }); this.$el.on('mouseout.starrr', function() { return _this.syncRating(); }); this.$el.on('click.starrr', 'i', function(e) { return _this.setRating(_this.$el.find('i').index(e.currentTarget) + 1); }); this.$el.on('starrr:change', this.options.change); } Starrr.prototype.createStars = function() { var _i, _ref, _results; _results = []; for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) { _results.push(this.$el.append("<i class='fa fa-star-o'></i>")); } return _results; }; Starrr.prototype.setRating = function(rating) { if (this.options.rating === rating) { rating = void 0; } this.options.rating = rating; this.syncRating(); return this.$el.trigger('starrr:change', rating); }; Starrr.prototype.syncRating = function(rating) { var i, _i, _j, _ref; rating || (rating = this.options.rating); if (rating) { for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { this.$el.find('i').eq(i).removeClass('fa-star-o').addClass('fa-star'); } } if (rating && rating < 5) { for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) { this.$el.find('i').eq(i).removeClass('fa-star').addClass('fa-star-o'); } } if (!rating) { return this.$el.find('i').removeClass('fa-star').addClass('fa-star-o'); } }; return Starrr; })(); return $.fn.extend({ starrr: function() { var args, option; option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return this.each(function() { var data; data = $(this).data('star-rating'); if (!data) { $(this).data('star-rating', (data = new Starrr($(this), option))); } if (typeof option === 'string') { return data[option].apply(data, args); } }); } }); })(window.jQuery, window); $(function() { return $(".starrr").starrr(); }); $( document ).ready(function() { $('#stars').on('starrr:change', function(e, value){ $('#count').html(value); }); $('#stars-existing').on('starrr:change', function(e, value){ $('#count-existing').html(value); }); });

Related: See More


Questions / Comments:

Hi everyone, How can I use the rating results ? is there a way to log it in a .txt ?
thank you in advance !

Shirui () - 7 years ago - Reply 0


Any way to change the size of the stars?

Adam Gardner () - 7 years ago - Reply 0


See Example #7 at http://plugins.krajee.com/s... and http://plugins.krajee.com/s... for installation. Wouldn't work in my Dreamweaver but uploaded everything to my site and it seems to work fantastic...no tweating needed.

Diamondhead () - 7 years ago - Reply 0


can the color be changed to yellow ?

khaled () - 7 years ago - Reply 0


See http://plugins.krajee.com/s... and http://plugins.krajee.com/s.... Wouldn't work in my Dreamweaver but uploaded everything to my site and it seems to work fantastic...no tweating needed.

Diamondhead () - 7 years ago - Reply 0


Check jQuery Like Button Rating Plugin https://likebtn.com/en/jque...

likebtn () - 7 years ago - Reply 0


Could u please make a way to reset the rating?

Shatilo () - 7 years ago - Reply 0


I have developed a way to work with rating system, that's easy to use. You can contact me on bhargav.usa.2016@gmail.com

Bhargav () - 7 years ago - Reply 0


could you tell me how to use this in form of Ruby on Rails?

Nemoto Tadashi () - 8 years ago - Reply 0


How can i disable rating when i set a default value?

Anderson () - 9 years ago - Reply 0


I added a data-disabled attribute to my version of the code... so basically if there is a value then we ignore hover and change. If you want to be explicit, you could use something like data-active and use boolean values to manage the state.

Either way, you will need to modify the mouseover event binder for this condition as well as the setRating method.

iPilya () - 8 years ago - Reply 0


the amount of javascript for this is too damn high!

gerdi bot () - 9 years ago - Reply 0


It's worth it...

This could be used in a commercial application as it has been tested in real applications.

maxsurguy () - 9 years ago - Reply 0


yeah .. thats true.

gerdi bot () - 9 years ago - Reply 0


It didn't work for me.
I don't find the 'starrr' class. where is it?

Jota () - 9 years ago - Reply 0


In fact I think you can remove the Starrr class references from the snippet and it will still work fine :)

maxsurguy () - 9 years ago - Reply 0


In this case "starrr" class isn't used but Font Awesome star icons are used instead.

maxsurguy () - 9 years ago - Reply 0


I was with some conflict problems in js file calls xD
It worked, thx!

Jota () - 9 years ago - Reply 0


sdfsd

sadfasd () - 9 years ago - Reply 0


nice! Thx

cinwell () - 9 years ago - Reply 0