Twitter Bootstrap rtl rating stars

Question

I'm using twitter bootstrap to build my site UI.

I want to create a stars rating page.

I want it to be right to left (meaning one star is chosen to the right)

I see my best opetion is to use Jquery-UI plugin, as bootstrap doesn't have such a tool?

How to make the rating direction: rtl ?

In addition, how can I adjust the stars to be yellow and not red

(both on hover and after selection) ?

Answer 1

I also use bootstrap. This morning I started looking into star ratings and came across the FontAwesome site. Here you'll find a working example of Star Ratings within bootstrap.

The CSS-tricks site provides the needed CSS with a good explanation of what it is doing.

I apologize for the lack of links below. As I am "new poster" on stackoverflow I can only include two hyperlinks. So you'll need to paste the gists into the dabble.com URL to see them. (someone please vote my reputation up so I can post more links :)

You can find working examples at the dabblet.com site to play with it a bit before bringing it into your cown code base. The css-tricks dabblet is at https://gist.github.com/1709019 .

There are several other dabblets you may want to review:

@chriscoyier has a different implementation at https://gist.github.com/1718992 . You can change from LTR to RTL in this implementaion by changing float:right; to float:left;

@mprogano has an even more concise version at https://gist.github.com/1712123. You can change from LTR to RTL using direction: rtl;

Some of the dabble examples allow you to change the star colors, others are using images so you'd have to create your own images to change color.

Hope this helps.

Answer 2

Got a bit inspired and tried a litte something along the lines of "less code". Also added a js function to alert the number of stars selected (which of course easily could be changed to do something more fancy).

http://jsfiddle.net/RpfLa/135/

<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

Have fun!

Edit: See also http://jsfiddle.net/RpfLa/400/ for a preset rating.

<s class="rated"></s>

Answer 3

Here is a simple pure CSS solution for star rating for font icons of twitter bootstrap. To use with any other font icon like fontawesome etc just need to change the class name in HTML

HTML:

<div class="rating"
  <span id="5" class="glyphicon glyphicon-star"></span>
  <span id="4" class="glyphicon glyphicon-star"></span>
  <span id="3" class="glyphicon glyphicon-star"></span>
  <span id="2" class="glyphicon glyphicon-star"></span>
  <span id="1" class="glyphicon glyphicon-star"></span>
</div>

CSS:

.rating span {
  font-size: 25px;
  cursor: pointer;
  float: right; //remove 'float right' for right to left
}
.rating span:hover, .rating span:hover ~ span{
  color: red; //gold or any other color 
}

Jquery to capture rating on click

$('.rating span').click(function(){
    alert($(this).attr('id'));
})

Here is the working code

Answer 4

I had same problem some time ago and ended up creating a little plugin. I've recently updated it for Bootstrap 3:

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

You're welcome to send feedback or pull requests :-)

Best regards!

Answer 5

Considering the issues faced in various plugins - here is a Bootstrap JQuery Star rating plugin I created with various configurable options (demos for scenarios are included within). Some of these are inspired by various ideas (e.g. by Victor) and other user needs. I think you could try this for your scenarios mentioned and let know.

Uses Bootstrap 3.x glyphicons and pure CSS as much possible, includes RTL support, supports plugin events and methods. You can refer the source here.

EDIT: The plugin now supports fractional star ratings with few other enhancements as well.