Star Rating Control with jQuery

Our client wants to increase user engagement, and help his users feel important. We’ve thought about this a bit, and tossed him a star rating idea—after all, people love nothing more than to express their feelings through the assignment of gold stars. Our shiny new control will appear as shown in Figure 1, “Star rating control”.

Figure 1. Star rating control

The basis for our star rating control is a radio button group; it’s perfect, as the browser enforces a single selection from the group. You can select the range that you want the user to choose from, simply by adding the correct number of buttons:

<div class="stars">  <label><input id="rating-1" name="rating" type="radio" value="1"/>1 Star</label>  <label><input id="rating-2" name="rating" type="radio" value="2"/>2 Stars</label>  <label><input id="rating-3" name="rating" type="radio" value="3"/>3 Stars</label>  <label><input id="rating-4" name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

The hard part, of course, is replacing these radio buttons with our star control. You can try to grapple with styling the HTML controls with only CSS, but it will be much easier and more flexible if you split the control into two parts: the underlying model that stores the data, and the shiny view with stars. The model, in this case, is the original HTML radio button group. Our plan of attack is to hide the radio buttons, and display a list of links that we’ve added via jQuery, styled to look like stars. Interacting with the links will switch the selected radio button. Users without JavaScript will simply see the radio buttons themselves, which is fine by us.

For the stars, we will rely on CSS sprites. This way our control will only be reliant on a single image (shown in Figure 2, “Star CSS sprite image”), which saves on HTTP requests and makes it easier for our graphic designers to edit.

Figure 2. Star CSS sprite image

Our CSS will apply the CSS sprite image to the links we create that represent half-stars. To move between the different image states, we just need to update the background-position property:

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

We’ve decided to make the user select a rating out of four stars, rather than the usual five. Why? User psychology! Offer a person a middle road and they’ll take it; by having no middle we make the users think a bit more about their selection. We achieve better results, and we’ll be better able to present users with the best content (as chosen by them)!

But four is a limited scale—that’s why we want to allow for half-star ratings. This is implemented via an optical illusion—you probably noticed that our star images are chopped in half. Our HTML will contain eight radio buttons, and they’ll each be worth half a star. There’s two parts to the code for transforming our eight radio buttons into four stars. First, the createStars function will take a container with radio buttons and replace it with star links. Each star will then be supplemented with the proper event handlers (in the addHandlers method) to let the user interact with the control. Here’s the skeleton of our starRating object:

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

The create method iterates through each container matching the selector we pass in, and creates a list of links that act as a proxy for the radio buttons. These links are what we’ll style to look like stars. It will also hide the original form elements, so the user only sees our lovely stars:

$(selector).each(function() {  var $list = $('<div></div>');  // loop over every radio button in each container  $(this)    .find('input:radio')    .each(function(i) {      var rating = $(this).parent().text();      var $item = $('<a href="#"></a>')        .attr('title', rating)        .addClass(i % 2 == 1 ? 'rating-right' : '')        .text(rating);            starRating.addHandlers($item);      $list.append($item);            if ($(this).is(':checked')) {        $item.prevAll().andSelf().addClass('rating');      }    });

We start by creating a container for the new links (a div element); we’ll be creating one new link for each of the radio buttons we’re replacing. After selecting all the radio buttons with the :radio selector filter, we take each item’s rating and use it to create a hyperlink element.

Once our link is ready, we pass it to the addHandlers method—this is where we’ll attach the events it needs to work. Then, we append it to the list container. Once it’s in the container, we see if the current radio button is selected (we use the :checked form filter). If it’s checked, we want to add the rating class to this half-star, and to all of the half-stars before it. Any link with the rating class attached will be assigned the gold star image (which will allow users to see the current rating).

To select all of the elements we need to turn gold, we’re going to enlist the help of a couple of new jQuery actions: prevAll and andSelf. The prevAll action selects every sibling before the current selection (unlike the prev action, which only selects the immediately previous sibling). For our example, we want to add the class to the previous siblings and the current selection. To do so, we apply the andSelf action, which simply includes the original selection in the current selection. Now we have all of the links that will be gold, so we can add the class.

After doing all this hard work, we can now add the new list of links to the control, and get rid of the original buttons. Now the user will only interact with the stars:

// Hide the original radio buttons$(this).append($list).find('input:radio').hide();

The control looks like it’s taking shape now—but it doesn’t do anything yet. We need to attach some event handlers and add some behavior. We’re interested in three events. When users hover over a star, we want to update the CSS sprite to show the hover state; when they move away, we want to revert the CSS sprite to its original state; and when they click, we want to make the selection gold:

$(item).click(function(e) {  // React to star click}).hover(function() {  $(this).prevAll().andSelf().addClass('rating-over');},function() {  $(this).siblings().andSelf().removeClass('rating-over');});

The hover function is the easiest: when hovering over, we select all of the half-stars before—including the current half-star—and give them the rating-over class using prevAll and andSelf, just like we did in the setup. When hovering out, we cover our bases and remove the rating-over class from all of the links. That’s hovering taken care of.

Now for the click:

// Handle Star clickvar $star = $(this);var $allLinks = $(this).parent();// Set the radio button value$allLinks  .parent()  .find('input:radio[value=' + $star.text() + ']')  .attr('checked', true);  // Set the ratings$allLinks.children().removeClass('rating');$star.prevAll().andSelf().addClass('rating');// prevent default link clicke.preventDefault();

The important part of handling the click event is to update the underlying radio button model. We do this by selecting the correct radio button with the :radio filter and an attribute selector, which searches for the radio button whose value matches the current link’s text.

With the model updated, we can return to messing around with the CSS sprites. First, we clear the rating class from any links that currently have it, then add it to all of the links on and before the one the user selected. The last touch is to cancel the link’s default action, so clicking the star doesn’t cause it to fire a location change.

I hope you’ve enjoyed this taste of all the jQuery goodness that’s contained in jQuery: Novice to Ninja. Remember to grab your free sample PDF, which contains this example as well as 150 pages worth of more great learning material. If you’re already sold, you can go ahead and buy the book straight from SitePoint.