z2txqq
Last Updated: February 25, 2016
·
39.86K
· javier_toledo
Seriousmeh square

Easy star-ratings in jQuery and Bootstrap

I was wondering an easy way to add a rating widget to a Bootstrap project, but everything I found seemed a bit outdated or overweighted for my needs, so I've created another plugin to do this:

https://github.com/javiertoledo/bootstrap-rating-input

This is a very simple approach and it won't fit every use case, but it has some advantages:

  • You don't need to learn anything about configuration, it just works.
  • You can use it without writing a single line of code, just include the library on a website and add a class to an input and you're ready.
  • It doesn't require to add other libraries than jQuery and Bootstrap.
  • It looks nice on Bootstrap apps.

Of course I'm open to comments and suggestions. I just expect it to be useful for someone else ;-)

Say Thanks
Respond

11 Responses
Add your response

9653

This is rad 12:45am find! Thanks for making my grind less painful!

over 1 year ago ·
9654
Seriousmeh square

@bendayhoe You are welcome :-)

over 1 year ago ·
11736
Sagive mini 213x213

Very cool work on this item mate. thanks a lot for taking the time. saved me a lot of hassle with building a rating widget from scratch ;) - cheers.

over 1 year ago ·
11742
E3147e2d64a90cc6a3d1e53fae1b37d3

Nice one! Do you know how to implement "half star" so we can better fine tune the ratings?
For voting is ok just with 5 stars but when displaying ratings of many items it is nice to have at least half star or we risk to have many similar ratings.

I know is out of scope of your plugin as you say in github it is enough with this
<i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star-empty'></i><i class='glyphicon glyphicon-star-empty'></i>

Do you know to do some kind of "half-empty" in CSS???รง

Thanks a lot and feliz navidad

over 1 year ago ·
11752
Seriousmeh square

@sagive thanks, I'm glad it to be useful :-)

@antorome "half stars" cannot be done yet with this widget, but its planned for some future version. You can leave your comments on this issue if you'd like to share any ideas: https://github.com/javiertoledo/bootstrap-rating-input/issues/8

Extending the plugin to render readonly representations of ratings is also planned here: https://github.com/javiertoledo/bootstrap-rating-input/issues/7

Meanwhile, to generate static half stars you can use Font Awesome with one of these icon classes:

Thanks for your comments! :-)

over 1 year ago ·
11754
E3147e2d64a90cc6a3d1e53fae1b37d3

Hi again,

the point would be to avoid using both glyphicons and fa.

I have tried with this but didn't manage to clip de star
http://www.html5rocks.com/en/tutorials/masking/adobe/

Also with the second method of
http://www.anieto2k.com/2009/09/08/3-tecnicas-de-hacer-crop-con-css/
and almost did it but I couldn't.

Any suggestion?

over 1 year ago ·
11788
Seriousmeh square

@antorome I think these approaches wont work because gliphicons are not images, but a typeface. What about just using Fontawesome on entire project and get rid of Gliphicons? There are equivalents for every gliphicon and you win the half stars :-)

over 1 year ago ·
12928
0 3y7szjpun3lw8bpt34dtzyhsnl9jgxpt xu zxgow6gdj8i3szxt90nxzsn6tijshgspb4kgbjzi

Hey,

This is the CSS you need to make a half-star (didn't implement it, I was just playing around with the console)

.glyphicon.glyphicon-star:after {
content: "\e007";
}
element.style {
width: 0.5em;
overflow: hidden;
margin-right: 0.5em;
}

over 1 year ago ·
12942
Seriousmeh square

@gastonius that's a nice approach, but I think I'd prefer to use half star icons from fontawesome:

http://fontawesome.io/icon/star-half-o/
http://fontawesome.io/icon/star-half/

What I'm thinking to do is detecting with JS when the mouse is on the first or second half of the star and replace the icon by the half or full star in each case. This is one of the main requests on github, so I promise this will be one of the first things I'll do when I have time ;-)

over 1 year ago ·
14407
0aadfadaa0d3d743c11d1be2325d42b8

thanks! i'm pretty newbie coder, and I am doing something wrong cause i see no starts - only empty small squares. Added <script src="bootstrap-rating-input.min.js" type="text/javascript"></script> at the end of my project, saved bootstrap-rating-input.min.js in my server folder with the code found here https://github.com/javiertoledo/bootstrap-rating-input/blob/master/build/bootstrap-rating-input.min.js, added div container in my page. What am I doing wrong?

over 1 year ago ·
14468
Seriousmeh square

@perettxintxola may be you need to include bootstrap with gliphicons in your page. Try adding this line to the <header> section in your HTML code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
over 1 year ago ·