dobtco / starrr

1-5 star rating, in jQuery.

starrr

1-5 (or 1-n) star rating in < 75 lines of code.

Requirements

• jQuery

Usage

Create the stars

<div class='starrr'></div>

$('.starrr').starrr()

With an existing rating

$('.starrr').starrr({
  rating: 4
})

With more than 5 stars

$('.starrr').starrr({
  max: 10
})

Read-only

$('.starrr').starrr({
  readOnly: true
})

Do something with the rating...

$('.starrr').starrr({
  change: function(e, value){
    alert('new rating is ' + value)
  }
})

Or if you prefer events:

$('.starrr').on('starrr:change', function(e, value){
  alert('new rating is ' + value)
})

Developing

• npm install
• npm install -g grunt-cli
• Make changes in src/
• Run grunt to compile them

License

MIT

starrr's Issues

Ajax response Star is not displaying

In my code html content with

was displaying into a div in ajax success

success:function(data) { $('.review_data').html(data.review_data);

here star was not displaying

change stars programmatically?

Is there a way I can change an existing star programmatically using jquery/javascript?

hover event?

First off,
Amazing little star rating plugin.
Thank you for creating it!

Would like to add a hover event so that if you hover above star 1,2,3,4,5 the value is send back to the browser so you could do an alert. Just like the regular click star -> alert. But then on hover.
Is this hard to add ? Im not a jquery coder myself but will try to digg your code a bit more to see where I could come up with.

I suggest removing the font-size 16px on the .starrr i element so you can use fa-2x to have bigger icons also.

Does not work in IE7

Mouse over effect does not work...
Can you please make it work in IE7?
Thanks!

pull rating value on a form submission

how do you pull the saved rating value when a form with the rating is submitted?

i.e. how should i extract the "rating" variable?

Support for half stars

Is there any way to allow half stars (3.5 stars for example)? I know FontAwesome has the icon for a half star

Can we replace star images?

Hi, i am new to Web Development. can anyone please tell if i can add my custom star image ? if No then there is any other way to do so?

How to get starrr rating in JQuery?

If the setter works this way in JQuery:
$("#starrr_gf_"+id).starrr('setRating', 0);
What about the getter?

iPad trouble on click

sharing my resolution: adding "touchstart" event to starrr.js
this.$el.on('click.starrr touchstart.starrr', 'i', (function(_this) {

readOnly not working

$('.starrr').starrr({
readOnly: true
})

i have problem with read only option its not working

clicking twice at the same star = undefined

In example:

When the star-rating is 5, and you click at the 5'th star again, the rating-value is undefined in the onchange.

$('.starrr').starrr ({ change: function(e, value){ alert('new rating is ' + value) // First time all good, second time clicking the same star result is undefined } })

Default font-awesome classes should be updated

With font-awesome 5.8.2 (as of 2019-06-05),
the star classes should be these:

        $('.starrr').starrr({
            rating: 5,
            emptyClass: 'far fa-star',
            fullClass: 'fas fa-star',
        })

In your current code, the default class for empty is: fa fa-star-o
which is not supported anymore, and so nothing will display, which is confusing.

[Question] - How to manually set the rating?

Got it!

How to re-initialize the rating?

Hello,

Thanks a lot for your very efficient plugin. Nevertheless, I met an issue: in my project, end-users could use this rating function several times in the same page. Ideally the value of starrr would be re-initialized each time an item is evaluated but it is not, so end-users always see the previous rating. I tried the following line $('.starrr').data('rating',0); but this does not work. Is there any way to re-initialize the value of starr ?

Thanks,

Pierre

How can I replace Glyphicons with Fontawesome, as Bootstrap 4.1 > versions is deprecated using Glyphicons?

We are migrating to Bootstrap 4.1, For which we need to change Glyph icons with new Fontawesome or any other alternate. So, How can I do that? Please tell me it is very important to me.

Read-Only

Hi,

Thanks for a great snippet. Is it possible to have this be read-only in order to display the reviews previously set?

Best regards

How to show starrr as disabled?

I want to show final rating based on the rating given by users. How can I do that? I do not want stars to go away on mouseover at result page.

Click on a link scroll the page on the top of screen

Set Rating dynamically

When i use this:

$('.starrr').starrr({ rating: $(this).attr('data-rating'),

It does not set the rating...

Please upload to cdn

Please upload to cdn (like https://cdnjs.com/ for instance).

How can I get value from Starr which is by default. ? set through 'rating' Option

Add gradient to stars

It would be nice if this plugin can also support gradient stars. Users will be able to set start color and end color and stars will be rendered with linear gradient from start color to end color.

How do i get the value of current rating?

I know there is function called getRating but how do i call this function in jquery.
please help.

How to initialize multiple star ratings

I'am trying to use this plugin into a simple comment system, more then one user can leave ratings of a product, so I must initialize several star ratings with its own rating value, until now I have done the following code:

$('.stars-users').starrr({
    readOnly: true,
    rating: $(this).data('rating')
});

Can anybody give me a help?

Thanks!

Keyboard support and half star rating

Hi there!

Thanks for your nice code.

Is there any chance you would add a keyboard support : tabulation and space bar ?

And secondly, any chance the code may work for intermediate rate levels (half star or even less) : 1.5, 2.5?

Thanks in advance for your reading.

Version Number

Could you add a version number to each files

Making input required

Is there a way of making the rating input required for form submission?

Does it supports decimals values?

Hello, does the plugin supports decimals values, for example to set de star at middle?