25

Fontawesome has a great star rating css extension, which looks really awesome.

However clicking on any of the span elements wouldn't really do anything. I don't know how to hook this up with my database model. Lets say I have an integer field of 0-5 in Django. How could I set the value according to the user's selection within the template?

enter image description here

<span class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>
1
  • Did you add any CSS or just the votes? Did vote turn up with a 0 value? Nov 27, 2013 at 17:22

11 Answers 11

19

I ended up using Raty. If you are looking for a simple and clean solution, I found this the easiest.

$('#star').raty('score');                   // Get the current score.
1
  • 1
    Thanks for letting me know, I have inserted the github link.
    – Houman
    Nov 9, 2013 at 10:05
16

I seen this post, but didn't want to use a plugin with more than I needed. So, I threw this together for a small project I'm working on. You don't need bootstrap to use this.

HTML

<div class="star-rating"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="whatever" class="rating-value" value="3">
</div>

CSS

.star-rating {
  line-height:32px;
  font-size:1.25em;
  cursor: pointer;
}

CoffeeScript

$star_rating = $('.star-rating .fa')

SetRatingStar = ->
  $star_rating.each ->
    if parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))
      $(this).removeClass('fa-star-o').addClass('fa-star')
    else
      $(this).removeClass('fa-star').addClass('fa-star-o')

$star_rating.on 'click', ->
    $star_rating.siblings('input.rating-value').val $(this).data('rating')
    SetRatingStar()

SetRatingStar()

Javascript:

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();
1
  • 3
    The coffeescript code does exactly the same thing as the javascript code. Jul 13, 2014 at 20:57
12

This is the best plugin for star rating if you are using bootstrap:

  • 2Kb minified
  • Use Bootstrap Glyphicons
  • No extra CSS
  • You just have to add class="rating" to the input

Github Project

10

I did not see a simple answer using only bootstrap glyphicons and jquery. I am sure other people have come here looking for a quick copy and paste so I just wrote one.

$(function(){
    $('.rating-select .btn').on('mouseover', function(){
        $(this).removeClass('btn-default').addClass('btn-warning');
        $(this).prevAll().removeClass('btn-default').addClass('btn-warning');
        $(this).nextAll().removeClass('btn-warning').addClass('btn-default');
    });

    $('.rating-select').on('mouseleave', function(){
        active = $(this).parent().find('.selected');
        if(active.length) {
            active.removeClass('btn-default').addClass('btn-warning');
            active.prevAll().removeClass('btn-default').addClass('btn-warning');
            active.nextAll().removeClass('btn-warning').addClass('btn-default');
        } else {
            $(this).find('.btn').removeClass('btn-warning').addClass('btn-default');
        }
    });

    $('.rating-select .btn').click(function(){
        if($(this).hasClass('selected')) {
            $('.rating-select .selected').removeClass('selected');
        } else {
            $('.rating-select .selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating-select">
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
</div>

To set the default value from the DB using django template, for each star do:

<div class="btn btn-{% if rate.value > 0 %}warning{% else %}default{% endif %}{% if rate.value == 1 %} selected{% endif %} btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
1
  • 3
    1+. Lol about "quick copy and paste" . Your code look good, thinking about copying it Mar 17, 2015 at 15:27
7

One more interesting method. Pure CSS, keeps selected value, uses radio-buttons (cool!) and FA fonts

See demo

Taken from this post

HTML

<div class="star-rating">
  <div class="star-rating__wrap">
    <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
  </div>
</div>

CSS

.star-rating{
    font-size: 0;
}
.star-rating__wrap{
    display: inline-block;
    font-size: 1rem;
}
.star-rating__wrap:after{
    content: "";
    display: table;
    clear: both;
}
.star-rating__ico{
    float: right;
    padding-left: 2px;
    cursor: pointer;
    color: #FFB300;
}
.star-rating__ico:last-child{
    padding-left: 0;
}
.star-rating__input{
    display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
    content: "\f005";
}
1
  • How would you set the amount of stars on page load with this?
    – jLynx
    Nov 19, 2015 at 23:28
6

You may check my Bootstrap JQuery Star rating plugin I created with various configurable options (demos for scenarios are included within). It uses CSS3 as much as possible, but also uses JQuery (if you are ok with that). You can get the star rating numbers OR set it easily through the plugin methods.

Uses Bootstrap 3.x glyphicons, includes RTL support, supports plugin events and methods. The plugin also supports any fractionally filled stars. You can refer the source here.

If you are keen on using Font-Awesome, you can override the plugin CSS to use Font-Awesome instead of Bootstrap Glyphicons in your project.

2

Font Awesome and JQuery DEMO

HTML

<div>Rating Star - Function CallBack onChange</div>
<div class="well well-sm">
    <span id="rating_1" class="rating" ></span>
    <span id="result_1"></span> 
</div>
<div>Rating Star - No Editable</div>
<div class="well well-sm">
    <span id="rating_2" class="rating" data-val="2.49" data-stars='6' data-change="false"></span>
    <span>Calificaste con <b>2.49</b> de <b>6</b> Estrellas</span> 
</div>
<div>Rating Star - Tamaño - Data Html options -- Hidden input</div>
<div class="well well-sm">
   <span id="rating_3" class="rating" data-val="2.49" data-stars='10' data-input=".rating-value" data-change="true" style="font-size:35px;" >
        <input type="hidden" name="whatever3" class="rating-value" size="5"  />
   </span>
</div>
<div>Rating Star - javascript Options - input text</div>
<div class="well well-sm">
   <span id="rating_4" class="rating">
       <input type="text" name="whatever4" id="rating_val" size="1" readOnly="readOnly" />    
   </span>
    <span id="result_4"> &nbsp;&nbsp;de <b>10</b> estrellas </span> 
</div>

JavaScript

 $('#rating_1').RatingStar(
   {callback:function(val){$('#result_1').html(" &nbsp;"+val+" estrella(s).")}}
 );

 $('#rating_2').RatingStar();

 $('#rating_3').RatingStar();

 $('#rating_4').RatingStar({
     val:4.95,
     stars:10,
     input:'#rating_val',
     change:true
 });
1
var $star_rating = $('.rating .star');

var SetRatingStar = function() {
  return $star_rating.each(function() {


var puan = document.formname.whatever.value;



    if ( parseInt($(this).data('rating')) <= puan) {
      return $(this).removeClass('star').addClass('star filled');
    } else {
      return $(this).removeClass('star filled').addClass('star');
    }
  });
};

$star_rating.on('click', function() { 

  document.formname.whatever.value=$(this).data('rating');

  return SetRatingStar();
});



.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }



<span class="rating" style="font-size:20px;">
<span class="star" data-rating="5"></span><span class="star" data-rating="4"></span><span class="star" data-rating="3"></span><span class="star" data-rating="2"></span><span class="star" data-rating="1"></span></span>
0

Have a look at django-ratings - that's what you're looking for.

1
  • Thanks for the tip, its looking good, but I came across an issue. May you please have a look at the updated question? Thanks
    – Houman
    Oct 6, 2012 at 22:10
0

Here's a better solution. The stars are based only on the numbers, so the search engine and the browser just reads 4.5 out of 5 and that's all. It uses my own custom font; no JS, no SVG, no Flash, no Canvas. It's also available as a progress bar.

DEMO/CODE

Here the code, without the microformat tags to make it simpler:

Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>

And here's the CSS that includes the font and the relevant styling:

.star-rating-icons {
    font-family: seostars;
  font-size: 1.2em;
    line-height: .6em;
    position: relative;
    width: 5em;
    text-indent: -5000px;
    display: inline-block;
    font-style: normal;
}
.star-rating-icons strong {
    font-weight: normal;
    display: block;
    position: absolute;
    left: 0px;
    color: #FC0;
    font-family: seostars;
    text-indent: 0;
}
.star-rating-icons strong:first-letter {
    font-weight: bold;
    position: absolute;
    left: 0px;
    font-style: normal;
}
.star-rating-icons i {
    color: #666;
    position: absolute;
    text-indent: 0;
    color: #666;
    left: 0;
}

Basically the first-letter of the rating is formatted with a character with that amount of whole stars, and the decimal with the partial stars. The outline of the stars is made out of the period, although it could be applied to any other character present. (By editing the font or just with a pseudo element)

7
  • 1
    would you care to comment how it works? The how it works on your blog is pretty obscure. What font does it use? what's the css?
    – Massagran
    May 8, 2013 at 16:54
  • I'm sorry for the "obscurity". I assumed everyone knows how to use "developer tools" or some "inspector" or just "source code". You can check the code at codepen And as per how it works… it uses a special font to render the integer (first-letter), another font for the decimal, and the dot makes the stars "frame".
    – sergio
    Oct 20, 2013 at 9:26
  • Really? -5 votes for a simple non-JS solution? What's the complicated thing about :first-letter and position:absolute ? Custom fonts have been around for years too.
    – sergio
    Dec 19, 2013 at 6:10
  • 1
    Yeah uh, this was EXACTLY what I wanted and the demo is prety good. Not sure why so much hate.
    – Yablargo
    Mar 15, 2014 at 3:59
  • 1
    I updated the demos for those who get it sold with glitter will like it. When you see the demos again, remember: It's the SAME thing you hated, haha. Don't be afraid of special fonts and first-letter work. codepen.io/socialblogsite/pen/diBjD Thanks @Yablargo for the comment. Some people get nasty when they are given caviar and they don't know how to eat it hehe
    – sergio
    Aug 4, 2015 at 1:14
0

Consider Star Ratings With Very Little CSS from CssTricks. It uses no images, no Bootstrap, no Javascript. Pure CSS and Unicode stars, see this. Supported by all browsers except IE <= 6.

Note: Javascript is not required for UI, but is required for sending data to the server and preserving the rating selection after the element loses focus.

Also take a look at Accessible star rating widget with pure CSS. It is a pure CSS as well. Uses a technique discussed here - Custom radio and checkbox inputs using CSS. It's different from the first one in a way that the rating stays selected after the element loses the focus. Unfortunately, it is supported by fewer browsers.

A quick note on CSS Selectors might be useful while reading that.

UPDATE:

Have just reread the post and clicked the link. The first link in my answer is the same as topic starter's. Apologies.

Anyway, I chose not to delete the answer, as it contains a few links which I've been very glad to find and which might be useful for others.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.