Blog about SEO and Website Design

How to Create a JQuery Star Rating System

by David Radisic on DR Adept Wednesday 5th January, 2011

I needed a simple script which allowed visitors to nominate a website and score out of 100 but when I searched for something they were all using Ajax which is not something I needed, I wanted my vote to change the value of a field which will be submitted along with the nomination details.

So I started to run through the options and built a simple JQuery star rating system that did what I wanted it to do.

The complete final code can be found at the end and a sample of the code can be found at www.essexwebsites.net/nominate.php where you may nominate your favourite Essex Website for an award.

First I needed to load the JQuery script which is available on Google using this code;

This will ensure you get the latest version.

Next create the star graphic; as it was necessary to score out of 10 (then multiple by 10 to get the score out of 100).

This graphic is 25 pixels high by 500 wide containing 10 filled stars followed by 10 outlined stars each taking up a space of 25 x 25.

This will be used as a background graphic and allow any score to be displayed by scrolling back by 25 pixels at a time. If you create a different sized image then just ensure that your calculations are adjusted accordingly.

I am using PHP so first wrote some code to work out the current star rating for a specific score.

if ($design_score < 0) { $design_score = 0; }
if ($design_score > 100) { $design_score = 100; }

Check that the variables (in this case design_score) is not below 0 or above 100, if it is then set it accordingly. Do this for each rating.

The positioning of the background image should start at -250 or 250 back from the right edge, this shows the 10 blank outlined stars for a rating score of 0.

To work out the background positioning we would start with 100 and deduct the current rating value to reverse the number, then divide this by 10 (the total number of stars) then multiply by 25 pixels per star. We would need to make this value negative as positioning is deducted from the right.

$design_score_stars = -(100-$design_score) / 10 * 25;

Now we have the background position of the design rating we can use that in the style sheet, to ensure that the stars are displayed correctly after loading the page. Initially the stars will display 0 but once submitted then we would need to show the rating as submitted.

We can add a style code to the star as appropriate;

style="background-position: <?php echo"$design_score_stars"; ?>px;"

That's the style and star details out of the way now let's get to the coding.

1. $(document).ready(function() {
2. $("a.stars").mousemove(function(e) {
3. var xpos = e.pageX - this.offsetLeft;
4. var xpos = 250-xpos;
5. var xpos = parseInt(xpos / 25);
6. var xpos = -(xpos * 25);
7. $(this).css("background-position",xpos);
8. });
9.}

Line 1; Only start this once the web page is ready and loaded completely.

Line 2; Set up an event handler to check when the mouse is being moved across the stars and get the reference into variable e.

Line 3; This obtains the horizontal position of the mouse in relation to the object. This should give a range of 0 to 250 which is the width of the object of 10 stars.

Line 4; Reverse the number ready for the background positioning calculation.

Line 5; Divide the number by 25 and make integer as we do not need to know where on each star but which star is being pointed to.

Line 6; Multiply by 25 to get the position of the background exactly.

Line 7; Set this as the background positioning for the style of this item.

So now with this piece of code we can run our mouse across the star and the relevant number of stars will be displayed.

But unfortunately when we move off the block it will remain as our last hover state, so we need some code to reset back to our previous setting when we move the mouse off the block of stars.

1. $("a.stars").mouseout(function(e) {
2. var idtag = "#" + $(this).attr("title");
3. var original = $(idtag).val();
4. var oldpos = -(100-original) / 10 * 25
5. $(this).css("background-position",oldpos);
6. });

Line 1; Set up an event to detect and run when the mouse is moved out of the star block.

Line 2; We have used the title of this block to indicate the name of the field to be used to store our submitted star rating. Our design score field has an id of #design_score the title of this a tag is design_score so all we need do is add # to the front to get the id tag name of the field to use. Simples.

Line 3; Get the value stored in the field #design_score, which is a hidden text field.

Line 4; Calculate the background position based on the score of between 0 and 100. (as seen previously in our php section above).

Line 5; Set the background positioning back to the original value stored within the field.

This will ensure that if the mouse is run across the stars, without any clicking, that it resets back to its initial setting when moving off.

All good so far, we now need to allow visitors to set their rating and make it permanent.

1. $("a.stars").click(function(e) {
2. var xpos = e.pageX - this.offsetLeft;
3. var xpos = parseInt(xpos / 25) + 1;
4. var xpos = xpos * 10;
5. var idtag = "#" + $(this).attr("title");
6. $(idtag).val(xpos);
7. return false;
8. });

Line 1; Set up an event to detect when a star is clicked on get the reference for what is clicked into variable e.

Line 2; Calculate the position clicked.

Line 3; Divide the position by 25 and add 1 as we want to score from 1 to 10.

Line 4; Multiple by 10 to get a score of between 10 and 100.

Line 5; Get the id tag from the title of this block. As detailed in previous code Line 2.

Line 6; Store the value into the hidden field with the relevant id tag.

Line 7; Stop the click from jumping.

So that is it. Now if we run the mouse across the stars they should show the relevant number of stars and when we click it should fix that benumbed of stars.

When we submit the form then the rating should be submitted accordingly.

To see this in action please visit www.essexwebsites.net/nominate.php where you may nominate your favourite Essex Website for an award.

Now here is the complete Rating System

The Head Scripts

The Style Details

The PHP calculations

<?php
if ($design_score < 0) { $design_score = 0; }
if ($content_score < 0) { $content_score = 0; }
if ($navigation_score < 0) { $navigation_score = 0; }

if ($design_score > 100) { $design_score = 100; }
if ($content_score > 100) { $content_score = 100; }
if ($navigation_score > 100) { $navigation_score = 100; }

$design_score_stars = -(100-$design_score) / 10 * 25;
$content_score_stars = -(100-$content_score) / 10 * 25;
$navigation_score_stars = -(100-$navigation_score) / 10 * 25;
?>

The Body Section

Design:
<a href ="#" class="stars" title="design_score" style="background-position: <?php echo"$design_score_stars"; ?>px;"></a> <input type="hidden" name="design_score" id="design_score" value="<?php echo"$design_score"; ?>" />

Content:
<a href ="#" class="stars" title="content_score" style="background-position: <?php echo"$content_score_stars"; ?>px;"></a> <input type="hidden" name="content_score" id="content_score" value="<?php echo"$content_score"; ?>" />

Navigation:
<a href ="#" class="stars" title="navigation_score" style="background-position: <?php echo"$navigation_score_stars"; ?>px;"></a> <input type="hidden" name="navigation_score" id="navigation_score" value="<?php echo"$navigation_score"; ?>" />

To see this in action please visit www.essexwebsites.net/nominate.php where you may nominate your favourite Essex Website for an award.