Web International Awards

payday loan

4

MAY 2010 3

How to display ratings as stars using CSS and a bit of jQuery

On a project I am working on I have different objects that can be rated by users. I need to display their rating which ranges from 0 to 5 with a 0.01 step as I am using floating numbers. I found a neat and simple way to do this, semantically correct with valid markup.

Preview of rating stars

In the above screenshot you can check out what I'm trying to achieve. See those stars right under the name of the location? Well, that is done purely with CSS and two images. Let's see the HTML markup required.

1
2
3
4
5
<div class="restaurant-stars">
	<div class="restaurant-stars-rating" title="2.5">              
		&nbsp;
	</div>
</div>

You may ask why am I using two different DIVs instead of one. Let me explain. We need the gray stars that are used to display the maximum rating achievable. We also need orange stars to display the actual rating. The orange stars must lay on top of the gray ones.

To achieve this, the restaurant-stars div has a specific width. Mine is 76 pixels. Moreover, the background image of this div is an image containing all the 5 gray stars. Background image is set not to repeat. The restaurant-stars-rating div has a width that has to be between 0 and the restaurant-stars div's width, which is 76 pixels. The one I used in the example is 38 pixels. The background image of this second div is an image that contains 5 orange stars.

The trick is right here, in the length of the inner div. As its width is lower, the background image will not span all the way to cover up the outer div's background image, resulting in an awesome way to semantically display a star based rating value.

What's the CSS?

1
2
.restaurant-stars { display:block; width:76px; height:20px; background:url('images/rating_default.jpg') no-repeat; }
.restaurant-stars-rating { display:block; width:38px; height:20px; background:url('images/rating_stared.jpg') no-repeat; }

That's all that needs to be coded!

Enhancing it with a bit of jQuery

I don't think that such a feature should be used on a static website, so how do you tackle dynamic content that has different values for ratings? I am using this rating feature on a Google Maps infoWindow. I am using jQuery to dynamically change it based on data I get from a JSON object passed along from a Rails application. Here's the code:

1
   $('.restaurant-stars-rating').width(foundRestaurant.resrating*76/5);

As you can see I am simply computing the width value of my restaurant-stars-rating div as the product between the rating I have in the database with the outer div's width, divided by the maximum rating. Simple as that!

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Published on Tuesday, May 4th, 2010 at 12:00 pm in css, jQuery, techniques, tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. Deluxe Blog Tips says: May 11th, 2010 at 11:32 am

    Nice approach. I’ve seen a same solution for ratings, using bar ratings. It uses php to generate the width. Anyway, your solution is good and helpful for me. Thanks for sharing.

  2. Bogdan Pop says: May 11th, 2010 at 4:17 pm

    You’re welcome!

  3. Top articles in 2010 says: January 4th, 2011 at 12:49 pm

    […] 5. How to display ratings as stars using CSS and a bit of jQuery […]





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.