prrashi / rateyo Goto Github PK
View Code? Open in Web Editor NEWA simple and flexible star rating plugin, v2 docs -
Home Page: http://rateyo.fundoocode.ninja
License: MIT License
A simple and flexible star rating plugin, v2 docs -
Home Page: http://rateyo.fundoocode.ninja
License: MIT License
rating = parseFloat(rating.toFixed(options.precision));
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.
Is there any way to disable color fill in hover on stars?
The last few lines of output:
, {
"type": "input",
"message": "Answer",
"name": "prompt",
"level": "prompt"
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.
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.
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
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});
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.
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.
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;
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
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
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?
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
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
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
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.
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 :-
is it work with form ?
Thanks for the great work here, to begin with.
Any chance to add stroke
& stroke-width
to this awesome code?
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.
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
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?
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:
After inspecting the source code, the issue is probably caused by mouseleave event handler.
http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
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
?
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.
How to set minimum allowed rating (number of stars)?
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
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.
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
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');
}
});
}
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.
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:
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.
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.
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
Support all options when given as data-* attributes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.