-2

I am currently using RateIt, which works great, but I can't figure out if I can use it to make my stars based on a percentage. As the default way to approach the styling is to use a .png image of the stars, this makes me think I would need to go through motions of making .png file and additional CSS classes for every pixel. I'm not sure that's efficient. Every other element of my site will be % and responsive. I just need my rating system the same.

Any and all help appreciated. Thanks!

jstacks
  • 2,437
  • 8
  • 32
  • 48

1 Answers1

2

On thing you could do is have a png with the star shape cut out. Place div below and make it the color of the stars you want.

enter image description here

<div class="rating">
    <div class="stars"></div>
    <div class="back" style="width:73%"></div>
</div>

.rating {
    width: 100px;
    height: 30px;
    position:relative;
}
.stars {
    width:100%;
    height:100%;
    background: url(https://i.stack.imgur.com/jOhrl.png);
    z-index: 10;
    position:absolute;
    top:0;
    left:0;
}

.back {
    background : gold;
    width:100%;
    height:100%;
}

http://jsfiddle.net/YVTR6/

brenjt
  • 15,997
  • 13
  • 77
  • 118
  • I increased the size of the parent div to 200px and 60px but all that happens is I see more stars (i.e. 4 sets because it's double in both directions) rather than one set of larger stars. – jstacks Jan 31 '13 at 04:28
  • That is because the background image is set to repeat by default. You would of coarse make the image the size that is required for your application. – brenjt Jan 31 '13 at 04:42
  • Yes, but would there be a way to have the image in percentages? My entire website is in percentages (even icons, which I use an icon font for) so that when the browser window size changes, so does everything else. What I want to avoid is using a .png file that I have to resize in every potential pixel size. I'm looking for a way to get that background image to scale up and down based on the parent div... is it possible? Any plugins? – jstacks Jan 31 '13 at 05:13
  • It is possible but the image would get interpolated. If you used an SVG image it would be crisp. – brenjt Jan 31 '13 at 05:18
  • So if I replaced the .png with an SVG image? Will this work with any rating system? ('ll have to try it with mine) or do you know one in particular that works well? – jstacks Feb 02 '13 at 05:54