nashio / star-rating-svg Goto Github PK
View Code? Open in Web Editor NEWA star rating jQuery plugin that uses SVG for easier customization
Home Page: http://nashio.github.io/star-rating-svg/demo
License: MIT License
A star rating jQuery plugin that uses SVG for easier customization
Home Page: http://nashio.github.io/star-rating-svg/demo
License: MIT License
hi! i try to install this plugin via npm in my project and i have this error
i make an import to webpack like "import starRating from 'jquery.star-rating-svg';"
i try also "import starRating from 'star-rating-svg';" but i have the same problem
In the table Options the first parameter is wrong:
totalStar instead of totalStars (missing s).
Greetings
Hi Nashio,
Just to let you know, I had to change a line of your code in the 'addListeners:' function from 'if( this.settings.readOnly ){ return; }' to 'if( this.settings.readonly ){ return; }'. readonly with lower cap o is defined in your default definition.
I appreciate you taking care of this. I like your software.
The first frame does not have the stars rendered yet for some reason, causing web page elements to size incorrectly for the first frame then, on the second frame the stars are visible and everything sizes correctly. It looks like a hickup as page elements pop into place on the second frame.
The "actual plugin constructor" is called after inital page load.
I am using .net core 2.1 along with jquery v3.3.1 and bootstrap 3.3.7 .
I admit that this is all somewhat new to me as I am an apps developer learning how to build a webpage using .net core tutorials.
It seems like a ligitimate issue that needs addressed by the plugin itself but know knows. Is there anything that can be done on my end to fix this?
Thanks for any help on this issue, and thank you for writing this star-rating-svg plugin!
When in head I have tag <base href="/site/" />
and whe url of page is not /site/, but like: /site/category/
rating din't work. It's show nothing.
Can you fix this? Tnx.
It woud be great to have method for changing star size, or even better add breakpoints to options, so user can set size for different resolutions.
Hi @nashio,
I have another suggestion. In my plugin I do an Ajax request to save to rating to the database. After the user has clicked, the state should change to read-only.
I could solve it like this while testing:
removeListeners: function(){
this.$stars.off();
},
then I call it in applyRating:
applyRating: function(e){
var index = this.getIndex(e);
var rating = index + 1;
// paint selected and remove hovered color
this.paintStars(index, 'active');
this.executeCallback( rating, this.$el );
this._state.rating = rating;
this.removeListeners();
},
Could you add this feature to the script (controllable with a parameter)?
Thank you!
Viktor
Hi, maybe I missed it, but I didn't notice anywhere that you can edit the rating. When you click on a star then it makes the callback but destroys the listeners to make the same thing happen. I was looking for something that on hover shows the stars you are about to select but when not hovering has the last callbacked grade. Is there a way that I can do that?
Hi
Love this script, thank you very much.
Is there a way to fill a star with smaller increments than .5? E.g If I have a star that's 3.26 or 3.8? Correct me if im wrong but I can only seem to fill a star in .5 (E.g 3, 3.5, 4, 4.5, 5)
Thanks in advance.
W
Users can't edit it once input
On the demo page, you have this
alert('rated ', currentRating);
It should be this:
alert('rated ' + currentRating);
Hello!
First i tried with my own code, then i just copied your demo page (without demo.css though). Both times i faced same problem:
Stars are big (i suppose it's their default size??) and displayed vertically, not horizontally
When i change starSize only thing that changes is the "box" where the stars are supposed to be
I downloaded css and js files from src
Hi. I has detected a bug in firefox when stars were not filled if baseUrl contains local anchor on page.
I had resolved this issue by removing #local_anchor in my baseUrl before it will display.
var baseUrl = s.baseUrl ? location.href : '';
baseUrl = baseUrl.indexOf('#') != -1? baseUrl.replace(baseUrl.substring(baseUrl.indexOf('#'), baseUrl.length), ""): baseUrl;
...
Stars do not initialize on content loaded through ajax
i want to let activeColor to be "#555#.but after i change the option,the star's still be gold.
$(".test-rating").starRating({
initialRating: 4,
disableAfterRate: false,
strokeColor: "black",
emptyColor:"white",
ratedColor:"#555",
hoverColor: '#555',
activeColor: '#555',
strokeWidth: 10,
starSize: 15
});
<div class="test-rating"></div>
hy i want to restrict to minimum one selected
Hi,
I am using star-rating.svg but it works by default for fullStar and I tried to set that to half but does not work!
any idea?
thanks
Hello
Although everything seems to be working ok on my PC (tested on all browsers) when I load the page on my iPhone or MacBook Pro all the stars are black.
On the iPhone it doesnt work on safari and chrome.
On the MacBook it doesnt work on Safari but it works on Chrome.
the setting is this:
$(".rs").starRating({
starSize: 22,
strokeWidth: 0,
starShape: 'rounded',
initialRating: 0,
activeColor: '#fdb415',
ratedColor: '#fdb415',
emptyColor: '#fff0d0',
useGradient: false,
readOnly: true,
});
and the page is this:
//
Can you please help?
Would you mind registering this as a bower package for management goodness?
bower register star-rating-svg git://github.com/nashio/star-rating-svg.git
Thank you,
Daniel
how can i use gradient color in ratedStars?
Can you recommend the best way to make the stars a different color if the user has already voted?
For example, the stars are yellow and display the aggregate rating. However, if someone clicks to vote, the star colors change to red (to show that the user has voted and to distinguish from the aggregate color).
Thank you,
Daniel
I tried to re-initialize a star rating with new initialRating. The previous initialRating remained. How do you go about doing it?
Hello,
thanks for your cool plugin. Using it, I found an problem when using stars rating inside a block, that is hidden at the initialisation. (Like tabs, I mean).
Link for my project: https://peterlyshak.github.io/knigogid/dist/book-page.html
When you click in tabs here, there is a problem in FIREFOX. Sometimes it shows all the stars, but sometimes one or two star-blocks are hidden.
Screen where to click: http://i91.fastpic.ru/big/2017/0911/ba/ab264c6a5f4ac74b9922394522e92eba.png
Thanks a lot! Waiting for your response!
Hi,
at the beginning - wonderfull library.
I've found just one problem. If I set disableAfterRate: false - I can change rating every time I click on a star - and this is GOOD. But if at second click I want to change rating to lower - f.e. from 4 stars to 3, rank is changed, but 4 stars still shows as active - and this is NOT GOOD.
$ ('. my-rating'). starRating ('getRating') shows 3, but 4 stars still shows "red". Is there any 'hook' to overcome this?
(The first thing I want to congratulate you on your work)
Example:
disableAfterRate: false
and then vote 4 (for example) and after it you vote 2 (for example), stars color don't change and it fixes on 4, not 2.
You can check it in 'disableAfeterRate' example y your demo web: http://nashio.github.io/star-rating-svg/demo/
Hi!
How to set decimal steps for each star? Now the smallest step guidance is half stars. You can do this step even smaller?
Thx
When activating full stars it is not possible to return to zero stars.
Attached a small change that allows to remove a star by clicking it again.
This works for all stars, especially the first star.
Git Patch-File:
commit-f69811d.txt
In the public unload function, it appears you were missing a 's' in $stars. I added it to my script and it appears to work.
` unload: function(){
var name = 'plugin' + pluginName;
var
var $star = $el.data(_name).$stars;
$el.removeData(_name);
$star.off();
}
Hey @nashio,
is it possible to use only full stars? I'm thinking about implementing your script in one plugin for Joomla! but I need only full stars instead of half stars.
Thank you in advance!
Greetings
Hello Team,
I would like to show the Star values in this pattern
0.0 till <= 0.5: 0.5 filled star
0.5 till <= 1.0: 1.0 filled star
1.0 till <= 1.5: 1.5 filled stars
1.5 till <= 2.0: 2.0 filled stars
2.0 till <= 2.5: 2.5 filled stars
2.5 till <= 3.0: 3 filled stars
3.0 till <= 3.5: 3.5 filled stars
3.5 <= 4.0: 4 filled stars
4.0 till <= 4.5: 4.5 filled stars
4.5 till <= 5: 5 filled stars
Is it possible to do that in this manner???
please reply asap that would be very helpful
Thanks
Nageshwar Jha
I need to save the star ratings and re-display them when the page is reloaded.
Is there a function I can use to set the star rating on each $(".star-rating") element such that, for example, it shows the star rating according to a data-attribute I have added into the html for that element?
Hi all, it's possible to use a custom polygon (like a circle) instead of stars ?
Hi,
I have placed the star rating code inside Bootstrap Tabs.
In Chrome, the star icons only show empty stars, when I click on any tab then the stars rating plugin is initialized and works properly. In Safari, the stars show a black background on page load, again if I click on any tabs then the it renders properly.
I understand this is because it's placed inside tabs which are hidden initially and I have tried the following code but doesn't work. Please help.
$(document).on( 'shown.bs.tab', 'a[data-toggle=\'tab\']', function (e) { $(".product-rating-view").starRating({ starSize: 15, activeColor: 'red', readOnly: true, emptyColor: '#ffffff', starGradient: { start: '#ffbd00', end: '#ffbd00' } }); });
Thanks for creating this cool plugin.
How can I rate from right to left?
when hovering between half and fullstar the middle point is not precise on Firefox 45.0.2
Found a bug in the JS file while using setRating option, the color was reseting back to crimson.
Issue found in lines 178 - 179 lines of full JS file, where wrong settings variable used.
Old code:
if (s.ratedColors && s.ratedColors.length && s.ratedColors[ratedColorsIndex]) {
ratedColor = s.ratedColors[ratedColorsIndex];
Fixed code:
if (s.ratedColor && s.ratedColor.length && s.ratedColor[ratedColorsIndex]) {
ratedColor = s.ratedColor[ratedColorsIndex];
Hi Nashio,
I am using it inside vue, so I need startrating('unload') this function, it failed running.
So I tried to empty element and its child and initialize it again, but it does not work, since I use it inside a modal open, I need to set start amount different when modal opens.
If I can unload the component, how to starrating init it again to make it display on the page, that is another challenge.
Thanks
Eric Xin
Mixed Content: The page at 'https://nashio.github.io/star-rating-svg/demo/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'. This request has been blocked; the content must be served over HTTPS. nashio.github.io/:184 Uncaught ReferenceError: $ is not defined
Hi,I want to initial value from server but i can not do this.
the starRating method does not any condition to get data form source (like div ,span ,..).
is there any way?
Hello good day.
Please how can I have multiple colors for sets of values? For instance, the user clicks 1+ it the color is red, if the user clicks 3+ the color is blue and if the user clicks 4+ the color of the star is yellow. How is this achievable please?
Then one more thing, how can I add a CSS to the stars that'll make them be in a kind of box or so?
Thanks for your swift response.
Hi,
Just found, that now script have some problems in last Chrome on my sites.
Even on demo page it shows just empty stars (http://puu.sh/DetZb/6ab15bd7a0.png)
In EE, Opera, FF everything works fine.
Any suggestions?
Thank you.
Need option to round up or down, when using "setRating"
ex.
starRating('setRating', 3.6, true); ---> 4.0
Using my IPad I need to touch a star twice to actually change the value.The stars are showed as being selected after the first touch, though.
Through some research I found the problem to be the hover effects combined with css-display changes. Commenting out mouseover and mouseout in the js-file solves the problem.
I really like the hover effects though and would love to keep them.
Hello,
When I load the starRating,
sometimes I want to change the option (readOnly, strokeColor.. etc).
So, after load the starRating, I typing like this,
" $('element').starRating({readOnly: true}); "
but not working.
how to change the option after load?
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.