Rating determines the color of the starts. - Possible?

Question

Rating determines the color of the starts. - Possible?

Ooops-404 opened this issue 8 years ago · comments

Hi,

First I'd like to thank you for your great work! love this.
Unfortunately, I am unsure if I ca do what I would like to...

Here's what I am lookign for.
Rating: 1-5 stars

If the rating is 1 then the star is red, if the rating is 2-3 then the star is yellow, but if the rating is between 4-5 then all the stars are green.

Is this possible?

Raphael Schweikert · Answer 1 · Mon Sep 05 2016 18:56:26 GMT+0800 (China Standard Time)

Yes, you should be able to do that. I’ve prepared an example for you: https://jsfiddle.net/sn4utveh/.

If you also want to show the colors while the user is hovering, the logic and the CSS gets a bit more complicated but should also be possible.

Error404 · Answer 2 · Mon Sep 05 2016 19:24:30 GMT+0800 (China Standard Time)

Awesome!
I thought this had to be done at the js level. There's no way to control wach star, is there?

Raphael Schweikert · Answer 3 · Mon Sep 05 2016 20:07:59 GMT+0800 (China Standard Time)

What do you mean?

Error404 · Answer 4 · Mon Sep 05 2016 20:45:24 GMT+0800 (China Standard Time)

i meant control each star.
Like this.

Lets say I have 5 stars.
If the rating is 2 then the first two stars are red.
If the rating is 4 then the first two stars are red, the following 2 are orange
If the rating is five, start 1-2 are red, 3-4 orange and the 5th is green.

Raphael Schweikert · Answer 5 · Mon Sep 05 2016 20:57:17 GMT+0800 (China Standard Time)

Well you can do it with a gradient (or with multiple backgrounds) but only if you hard-code the stars’ size in CSS (because the gradient width changes). See https://jsfiddle.net/sn4utveh/1/

Error404 · Answer 6 · Mon Sep 05 2016 21:03:21 GMT+0800 (China Standard Time)

Damn, I tried with the gradient but had no luck myself. You're too good at this!

This was my attempt
.starbox .colorbar {
background: #e4491f; /* Old browsers /
background: -moz-linear-gradient(left, #e4491f 0%, #e4491f 20%, #e8c01f 20%, #e8c01f 80%, #0db04a 80%, #0db04a 100%); / FF3.6-15 /
background: -webkit-linear-gradient(left, #e4491f 0%,#e4491f 20%,#e8c01f 20%,#e8c01f 80%,#0db04a 80%,#0db04a 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to right, #e4491f 0%,#e4491f 20%,#e8c01f 20%,#e8c01f 80%,#0db04a 80%,#0db04a 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4491f', endColorstr='#0db04a',GradientType=1 ); / IE6-9 */
}

What happened is that the gradient would only work for a specific rating, say 0.8, then if the rating was to be updated to 0.5 the gradient would fail.

Error404 · Answer 7 · Mon Sep 05 2016 22:00:39 GMT+0800 (China Standard Time)

I must be doing something wrong.. because i tried to use your code on my site, and no luck.

Here's what I have.

<div class="starbox ghosting text-center" data-button-count="5" data-start-value="0.2" > </div>

<script type="text/javascript"> <![CDATA[//><!]]> </script>

#starbox[data-stars="0.2"] .colorbar { background-color: yellow; } #starbox[data-stars="0.8"] .colorbar, #starbox[data-stars="1"] .colorbar { background-color: green; }

The CSS is at the bottom of jstarbox.css

Raphael Schweikert · Answer 8 · Mon Sep 05 2016 22:07:23 GMT+0800 (China Standard Time)

Look at the jsFiddle JS section where I set the data-stars attribute in the starbox-value-changed event listener.

Error404 · Answer 9 · Mon Sep 05 2016 22:30:57 GMT+0800 (China Standard Time)

So my problem is somewhere in here?

var initial = 1; var starbox = jQuery(this); starbox.starbox({ ghosting: starbox.hasClass('ghosting'), average: initial, buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5, stars: starbox.attr('data-star-count') || 5

I chanhed the average to initial, which effectively gives control to that variable.
but still can't make it so the colors change according to that value.

Raphael Schweikert · Answer 10 · Mon Sep 05 2016 22:36:00 GMT+0800 (China Standard Time)

So, to reiterate: the gradient version works without additional JS code but the version where you write out a data-stars attribute which you can select in CSS needs the following additional starbox-value-changed handler:

starbox.on('starbox-value-changed', function(event, stars) {
    starbox.attr('data-stars', stars);
});

Error404 · Answer 11 · Mon Sep 05 2016 22:47:10 GMT+0800 (China Standard Time)

So now it looks like this:
What am I missing? i see no errors in the console...

HTML
<div class="starbox ghosting text-center" data-button-count="5" data-start-value="0.2" > </div>

Script;
<script type="text/javascript"> <![CDATA[//><!]]> </script>

CSS
#starbox[data-stars="0.2"] .colorbar { background-color: yellow; } #starbox[data-stars="0.8"] .colorbar, #starbox[data-stars="1"] .colorbar { background-color: green; }

Raphael Schweikert · Answer 12 · Mon Sep 05 2016 22:48:30 GMT+0800 (China Standard Time)

Your starbox does not have the starbox ID. Either change your selector in CSS (i.e. use .starbox instead of #starbox) to match or update your HTML to include the ID.

Error404 · Answer 13 · Mon Sep 05 2016 22:53:08 GMT+0800 (China Standard Time)

Updated the HTML.
Still no luck.

<div id="starbox" class="starbox ghosting text-center" data-button-count="5"> </div>

I hate myself right now.

Raphael Schweikert · Answer 14 · Mon Sep 05 2016 22:55:30 GMT+0800 (China Standard Time)

Can you use the elements inspector of your browser to see whether the data-stars attribute is set on the #starbox element after clicking on the stars?

Error404 · Answer 15 · Mon Sep 05 2016 23:07:41 GMT+0800 (China Standard Time)

Maybe the issue is that I don't intent for those stars to be updated by the users.
At the moment I only want to show the rating pulling the rating from a DB record.

Does that change anything?

Raphael Schweikert · Answer 16 · Mon Sep 05 2016 23:28:45 GMT+0800 (China Standard Time)

In that case I wouldn’t include the JS at all. Only include the CSS and generate the following HTML structure:

<div data-stars="0.4" class="starbox">
  <div class="positioner">
    <div class="stars">
      <div style="width: 40%;" class="colorbar"></div>
      <div class="star_holder">
        <div class="star star-0"></div><div class="star star-1"></div><div class="star star-2"></div><div class="star star-3"></div><div class="star star-4"></div>
      </div>
    </div>
  </div>
</div>

And make sure you set the inline width of the .colorbar div to the appropriate calculated value ((«rating»/5 * 100) + '%', e.g. 4 stars = 80%) wherever you render your HTML (either server-side or client-side). «rating» would be the value from your DB, of course.

If you want the solution without the gradient but with selecting the data-stars attribute, also set that the same way (but don’t add '%' and don’t multiply by 100; e.g. 4 stars = 0.8, but you could also just leave off the habit of jStarbox of using percentages/fractions for storing the rating and just write the actual value and select the same in the CSS).

Error404 · Answer 17 · Mon Sep 05 2016 23:47:24 GMT+0800 (China Standard Time)

I can't get it to work..
I even deleted the default value from the jstarbox.js , but still no luck.

I can see that when I change the <div style="width: 40%;" , so changes the background in the stars, problem is.. when I have <div data-stars="0.1", accoding to the CSs below, the background should be red.. but it still uses the default value instead (black).

.starbox .colorbar {
background: #000;
}
#starbox[data-stars="0.2"] .colorbar {
background-color: red;
}
#starbox[data-stars="0.2"] .colorbar {
background-color: yellow;
}
#starbox[data-stars="0.8"] .colorbar,
#starbox[data-stars="1"] .colorbar {
background-color: green;
}

Raphael Schweikert · Answer 18 · Mon Sep 05 2016 23:49:25 GMT+0800 (China Standard Time)

On 05.09.2016, at 17:47, Error404 notifications@github.com wrote:

I can't get it to work..
I even deleted the default value from the jstarbox.js , but still no luck.

I can see that when I change the <div style="width: 40%;" , so changes the background in the stars, problem is.. when I have <div data-stars="0.1", accoding to the CSs below, the background should be red.. but it still uses the default value instead (black).

.starbox .colorbar {
background: #000;
}
#starbox[data-stars="0.2"] .colorbar {
background-color: red;
}
#starbox[data-stars="0.2"] .colorbar {
background-color: yellow;
}
#starbox[data-stars="0.8"] .colorbar,
#starbox[data-stars="1"] .colorbar {
background-color: green;
}

I think you can remove the ID again from the selector

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

Error404 · Answer 19 · Tue Sep 06 2016 00:03:31 GMT+0800 (China Standard Time)

That worked, but now fractional number don't work...
Am I doing something wrong?

Raphael Schweikert · Answer 20 · Tue Sep 06 2016 00:04:34 GMT+0800 (China Standard Time)

On 05.09.2016, at 18:03, Error404 notifications@github.com wrote:

That worked, but now fractional number don't work...
Am I doing something wrong?

I can’t tell if I don’t know what your HTML and CSS code is.

Raphael Schweikert · Answer 21 · Tue Sep 06 2016 00:05:09 GMT+0800 (China Standard Time)

On 05.09.2016, at 18:03, Error404 notifications@github.com wrote:

That worked, but now fractional number don't work...

Maybe don’t use the fractional numbers. You can just as well use the star count.

Error404 · Answer 22 · Tue Sep 06 2016 00:12:36 GMT+0800 (China Standard Time)

Fractional is what lead me here :)

Anyway I can send you my fileS?

Raphael Schweikert · Answer 23 · Tue Sep 06 2016 00:13:40 GMT+0800 (China Standard Time)

On 05.09.2016, at 18:12, Error404 notifications@github.com wrote:

Anyway I can send you my fileS?

Just create your own JSFiddle with the necessary parts of your HTML and CSS.

Error404 · Answer 24 · Tue Sep 06 2016 00:34:37 GMT+0800 (China Standard Time)

Its here.

https://jsfiddle.net/Ooops404/stdcua4r/#&togetherjs=brMQ8TzHyK