prrashi / rateyo

A simple and flexible star rating plugin, v2 docs -

rateYo

A simple and flexible, vanilla js star rating Plugin,

it uses SVG to render rating, so no images required.

just create a div, throw some styles, initialize and thats it!.

Hover to change the rating and Click to set.

Documentation: http://prrashi.github.io/rateYo/

Installation: npm i rateyo

Browser Support: Supported by all modern browsers from IE11

Packages

• Jquery Rateyo(npm i @rateyo/jquery)
• React Rateyo (Coming Soon)
• Svelte Rateyo (Coming Soon)
• Vue Rateyo (Coming Soon)

rateyo's Issues

Issue with ppl thinking grey star is already set

We are having issues where some users think the grey star is already set to 5 stars so they submit with all 0. Without resorting to force selection, is there some way I can bring attention to it?

Set MaxValue automatically if numStars is set

Thanks for the plugin.
If you set the numStars in constructor to number below 5 and do not set maxValue, the rating is then calculated as it there was 5 stars. It would be nice to set maxValue to the number of stars if this value if number of stars is lower.

stroke & stroke-width

Thanks for the great work here, to begin with.

Any chance to add stroke & stroke-width to this awesome code?

How to use in form ?

is it work with form ?

Change Hover State

Is there any way to disable color fill in hover on stars?

Min number of stars

How to set minimum allowed rating (number of stars)?

Half star option not working properly when spacing is set to anything else than 0px.

Hello,
I found out that when using spacing alongside with half star option it breaks and it's not "half star" anymore. The result number of the selection is set correctly, so it's just visual bug, but it's still pretty big thing.

Example:

I'm suspecting that the problem is with the spacing, because it puts margin on the element that probably counts towards the visual effect which causes it to slowly drift away:

This is with 0px spacing:

Bower ENOTFOUND - Package rateYo not found

I was searching for rating plugin that is created using SVG. And this plugin is good from the others out there.

But I'm trying to install it through bower, and I get the error mentioned above.

Fixing it will be very helpful.

Thanks in advance.

Make.com Automation - how to?

Hey, perhaps in the near future I'll be using rateYo for the rating system on my client's new website. I was wondering what would be the best flow for connecting rateYo to make.com and then to Airtable

or

directly from Webflow to Airtable?

Prevent initial page load from triggering onSet event

If I have the rateyo Plugin embedded in a template which is then injected in the page, my onSet event handler will trigger with a value of 5, when rating = 5;

For my purposes, I only want onSet event to be called when the user actually clicks on the rating, not initially. Any ideas on how I can make this happen?

Support data-* attributes

Support all options when given as data-* attributes.

readOnly

In our page there are several rateYou items. This works perfect.
When one of them should be readonly all rateYo are readonly.
It should be adjustable by each rateYo and not for all.

jquery.rateyo.js:530 Uncaught TypeError: Cannot read property 'toFixed' of null

  rating = parseFloat(rating.toFixed(options.precision));

How to give a minimum value of 1, for the already rated star?

When am clicking outside of the 1st star the value getting 0, I don't want to be like that because it was already rated field. So however i can change rating but it shouldn't below than 1.

rtl and fullStar

When using the options data-rateyo-rtl="true" data-rateyo-full-star="true" you cannot select a star by clicking on it.
If you click on a star, only the stars to the right of it are selected. Or in other words: to select a star you have to click to the left of it. I'm not an rtl expert but I assume this is not intentional.

Can not center align rateYo div

I am using RateYo in my Ruby on Rails application along with Materialize. When I place a center-align class of Materialize on a RateYo div it has no effects on it. Any idea how to make this work? Thanks

Uncaught TypeError: Cannot read property 'fn' of undefined

RGB star colors?

Any plans for allowing users to specify RGB for star colors and not only HEX values?
It's pretty tedious to convert to HEX just to use RateYo.

Set all rates to readonly except one

Hi
At first, many thanks for you great plugin.

I want to use multiple objects in a page and set all to readonly except one.
How can I do that?

Thank You

Can't change colors

I can't modify the rated and normal colors.

$('#VisitaResultadoRating').rateYo({
	ratedFill: '#00ABE8',
	normalFill: '#f1f1f1',
	rating: 5,
	fullStar: true,
	onSet: function (rating, rateYoInstance) {
		$("input[name=VisitaResultado]").val(rating);
	}
});

I use 2.3.2 version.

Stars get doubled when aligned in center

First of all, great plugin. Thanks for sharing.

I have noticed that when the stars are created inside a large container and are center aligned then in some corner cases they get doubled. Mainly when you are hovering mouse on the last star's edges.

I have also tried to set the margin to auto and align stars in center instead of center block and still they were getting doubled.

Example:

This is what the HTML looks like:

Below is the Java Script code:

$("#rate_instance").rateYo({
            spacing: "20px",
            starWidth: "40px",
            normalFill: "#A0A0A0", //The background color for the un-rated part of a star
            ratedFill: "#963378", //The color for the rated part of a star
            maxValue: 5, //The Maximum value, you want the rating to end with
            fullStar: true,
            onInit: function (rating, rateYoInstance) {
             
            },
            onChange: function (rating, rateYoInstance) {

            },
            onSet: function (rating, rateYoInstance) {

            }
        });

Browswer: Firefox 51.01 as well as Chrome 56.0.2924.87

Full star with RTL not working correctly

If you set rtl true with full star option selected then If you hover over a star it doesnot fill star until you moved to next star then previous star gets selected.. can you please fix it. Thanks

Swipe support in mobiles to set Rating

yarn add rateyo is really broken

yarn add rateyo 

jquery#3.3.1 bower_components/jquery
grunt-cli: The grunt command line interface (v1.3.1)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

https://gruntjs.com/getting-started

seems like your post install script requires bower and grunt installed, while i don't use them nether i want to download them.

i started with few but after 3rd i gave up

yarn global add grunt grunt-cli matchdep

and than unglifiers and stuff starts popping up

vertical Mode from bottom to top

Could you please help me to use rateyo in vertical mode, no i can simply change the stars ui to vertical with display flex,
but the functionality of fill rating doesn't work correctly.

Start countor not showing

I created div tag and assign rateYo to it, it renders the star but when I hover the mouse on the start it not showing the counter of the selected start

Add rating in dynamic list

Hello @prrashi,
Thanks for great plugin, Can i use it on mobile device android or iOS?
How to use rating bar in dynamic list, let me explain, I have server response which contains rating key how to bind data from server rating key to html, because you used single id for that div. Please help me

Thanks

"bower install jquery-rateyo" is stuck

The last few lines of output:

, {
  "type": "input",
  "message": "Answer",
  "name": "prompt",
  "level": "prompt"

RTL error

In your code these strings should be written with "margin-right", not "-left" if options.rtl==true

$normalGroup.find("svg:not(:first-child)").css({"margin-right": newSpacing}); $ratedGroup.find("svg:not(:first-child)").css({"margin-right": newSpacing});

ID of <svg /> elements

All SVG elements got same 'id' attribute:
id="Layer_1"

Is it intentional or mistake? Please answer, when you got 5 minutes.
I want to learn more about SVG.

onChange Event Doesn't Fire on iOS Cordova App

Hi,
Thanks for the great plugin! However I am having issue on iOS devices, the onChange event never fires.

Here is my full code -

function showRatingPage()
{
$("#starRatings").rateYo({
        onInit: function(rating, rateYoInstance) {
            console.log("RateYo initialized! with ", this);
            this.rating = 0;
        }
    });

    $("#starRatings").rateYo({
        starWidth: "40px",
        multiColor: {
            "startColor": "#FF0000", //RED
            "endColor": "#F1E300" //GREEN
        },
        rating: 0,
        halfStar: true
    });

    $.mobile.navigate("#ratePage", {
        transition: "none",
        info: ""
    });

    // $("#starRatings").rateYo({

    //     onChange: function(rating, rateYoInstance) {

    //         console.log("Rate Changed Data Callback = ", rating);
    //     }
    // });

    $("#starRatings").rateYo()
        .on("rateyo.change", function(e, data) {
            console.log("Rate Changed E = ", e);
            console.log("Rate Changed Data = ", data);
            rate = data.rating;
            if (rate <= 0) {
                $("#ratingSubmit").css('background', '#eee url(images/darkPopup.jpg) repeat-y center top');
            } else {
                $("#ratingSubmit").css('background', '#c12231 url(images/redPopup.jpg) repeat-y center top');
            }
        });
}

Firefox error

http://rateyo.fundoocode.ninja/

Only in firefox (in chrome is ok)

I change:

<div id="rateYo" class="pull-left jq-ry-container" style="width: 160px;"><div class="jq-ry-group-wrapper"><div class="jq-ry-normal-group jq-ry-group"><!--?xml version="1.0" encoding="utf-8"?--><svg version="1.1" xmlns="http://www.w3.org/2000/svg" ....
to

<button>
<div id="rateYo" class="pull-left jq-ry-container" style="width: 160px;"><div class="jq-ry-group-wrapper"><div class="jq-ry-normal-group jq-ry-group"><!--?xml version="1.0" encoding="utf-8"?--><svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...
</button>

then it doesn't work

thanks in advance

Invalid rating calculation in rtl mode

when rateYo set to rtl ther rating value always shown one less. To correct that the flowing line:
https://github.com/prrashi/rateYo/blob/master/src/jquery.rateyo.js#L604
must change to that code:

calculatedRating = maxValue - calculatedRating + 1;

cjs import problem

I am trying to import this in a node.js environment for later call in a jquery context. But simple import doesn't work. Please help!

Stars are not rendered

I am using this plugin in a modal to set ratings and when ever i use some condition to toggle modal stars are not binded

Multiple ratings are not displayed in a single html webpage

There are multiple search results in my webpage. But the stars for the rating are being displayed only for the first search result. The remaining results have no stars to give the rating. How can I display the stars after each search result in the same page?

I have created a div in the results section of the html page :-

and written the following code in the js file :-
<script>$("#rateYo").rateYo({
starWidth: "40px"
});</script>
What corrections need to be done in the above codes to get the desired result?

Can't display fullStar

I'v set fullStar option to true but when rateYo is init, it just fill a part of the star. Like this

Here's my code
$("#star_rate").rateYo({ starWidth: "30px", numStars:4, fullStar:true, rating:rating})

I've log my variable rating and it is 3. Can anybody help me here ?

Needs a way to report setting during initialization.

In a web app I'm building, users can rate entities on a scale of 1-5 in whole number increments. These ratings are stored per user, and when a page containing these entities is loaded, the averaged rating is provided to rateYo to give an initial value.

I've provided my rateYo instance with an onSet function to update the users' ratings in the database over Ajax. However, because the onSet callback is executed even during initialization, this averaged value is sent to the server as being the user's own rating for the entity. What's more, because the column in the database is for integers and the averaged values are usually floats, a server error is raised, resulting in a nasty red mark in the javascript console.

For now I'll be working around this by storing the state as a data attribute or class in the top-level element. I propose a built-in parameter, property, or flag somewhere so an onSet callback may easily determine if it is being called as a result of setting during initialization.

It should be noted that simply ignoring the first onSet will not be a sufficient solution as some entities are without a rating initially, and therefore the first set would take place when the user selects a rating.

Dymanic Rating

hey @prrashi,
I'm using your awesome plugin but need some help. I have a list of questions where user can rate it differently, and a cumulative average at last of all the above selected questions. last one is to show only average rating that is readOnly:true and rest all above are clickable. So problem is I'm able to calculate the rating dynamically but unable to set it in last stars. it can only be set at once for the first time when user response to que1 but it is unable to change as per user responses more. it need to change dynamically as user responses all the questions.

Half star with star width

Combination of halfStar and starWidth is not rendering correctly.

For example this simple usage of rateYo

$('#qualityRating').rateYo({ starWidth: "25px", rating: 1.5, halfStar: true, ratedFill: '#21C0C0' });

will render stars like this:

Unexpected Behavior: rateYo reset current rating when used on mobile browsers

First, many thanks for this amazing plugin, but I've got unexpected behavior when rateYo is used on mobile browsers.

Here are the steps to reproduce the bug:

• Install jquery rateYo plugin on mobile web page;
• Click(tap) the star to update current rating;
• Click(tap) anywhere else, the rating plugin is reset.

After inspecting the source code, the issue is probably caused by mouseleave event handler.

http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

@prrashi

How to change rating without trigger event 'ratingstars.set'

Bug on rtl documentation

rateYo works fine on "rtl: true" mode but when body direction set to rtl

body{
   direction: rtl;
}

The element fails on shown. For solve that direction of div#rateYo must set to ltr. That appear rateYo doesn't work on rtl mode documentation.

JS Error in firebug console after adding multicolor code

I get the below error in firebug console.log. after adding the code for multicolor

TypeError: v(...).toFixed is not a function


...ue;g=u(g)}return g}function w(a){var c=v(a).toFixed(h.precision),e=h.maxValue;c=...

My Plugins options are below

end_color : "#f1c40f"
fullStar : false
halfStar : false
maxValue : "5"
minValue : 0
normalFill : "#d3d3d3"
numStars : "5"
onChange : null
onSet : null
precision : ""
ratedFill : "#c0392b"
rating : 0
readOnly : false
spacing : "5px"
starHeight : "20px"
starWidth : "20px"
start_color : "#c0392b"

Firebug Log Image : http://prntscr.com/9im4ly
Plugin Settings Image : http://prntscr.com/9im4ok

"minValue" option not working properly