nashio / star-rating-svg Goto Github PK

On the demo page, you have this

alert('rated ', currentRating);

It should be this:

alert('rated ' + currentRating);

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.

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.

How can I rate from right to left?

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>

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

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!

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.

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 $el = $(this);
var $star = $el.data(_name).$stars;
$el.removeData(_name);
$star.off();
}

when i run it shows the error starRating is not a function i tried every single thing i knew if you can help me plzz...do it

I tried to re-initialize a star rating with new initialRating. The previous initialRating remained. How do you go about doing it?

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.

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

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?

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

Stars do not initialize on content loaded through ajax

screen shot

Hi,
I want get value data attribute of this to set readOnly from db.
ext:

but not read value?
What do i do?
tks

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?

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 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?

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.

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

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

how can i use gradient color in ratedStars?

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];

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

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

Users can't edit it once input

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 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

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

hy i want to restrict to minimum one selected

Hi all, it's possible to use a custom polygon (like a circle) instead of stars ?

Need option to round up or down, when using "setRating"
ex.
starRating('setRating', 3.6, true); ---> 4.0

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

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

we faced an issue with the half star rating, as we are using RTL language, the HALF FULL must be on the right side first instead of the left side.

Is there any current option to do that? Thank you.

i cant see the stars when i use arabic language :

its work when i use english language :

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?

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

when hovering between half and fullstar the middle point is not precise on Firefox 45.0.2

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.

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;

...

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?

In the table Options the first parameter is wrong:

totalStar instead of totalStars (missing s).

Greetings

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!

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