As part of a website rebuild, I recently created a really nice star rating system using pure css (with a healthy sprinkling of :hover attributes) to display the stars. It is entirely possible to configure the style sheet in such a way that hovering over one star causes the correct class changes and background image position changes to allow this functionality to work beautifully. Coupled with a couple of JQuery get commands and I had a really slick asynchronous rating system. The problem… it didn’t work in Internet explorer. Not only did the hover attributes mess up, but the coloured in and uncoloured stars did not overlap correctly, to name just two of the 8+ problems. I’m used to having to make extra stylesheets for IE to shift things around a few pixels but the sheer number of issues my page experienced had me rethinking whether it was fair for Microsoft to force so much extra work on me to fix what worked flawlessly in Safari, Firefox, Chrome and, with a tweak to one line of the css, Opera. But since around 45% of the visitors to the site in question use IE (a somewhat older demographic than myself) I needed to create some sort of solution to the IE problem.
Note that .setAttribute(“class”,”noscriptRater_js”) will work for all browsers except IE, .setAttribute(“className”,”noscriptRater_js”) will work only for IE, hence I have used the .className as this works for all browsers. Facepalm again!
The following styles cause the visibility of the radio buttons and stars to swap when _js is appended to each class:
<form action="" method="post"> <div class="noscriptRater" id="noscriptRater"> <div class="hideStar0"> <div id="star0"></div> <input type="radio" name="rating" value="0" id="rate0" checked>0<br> </div> <input type="radio" name="rating" value="1" id="rate1">0.5<br> <input type="radio" name="rating" value="2" id="rate2">1<br> <input type="radio" name="rating" value="3" id="rate3">1.5<br> <input type="radio" name="rating" value="4" id="rate4">2<br> <input type="radio" name="rating" value="5" id="rate5">2.5<br> <input type="radio" name="rating" value="6" id="rate6">3<br> <input type="radio" name="rating" value="7" id="rate7">3.5<br> <input type="radio" name="rating" value="8" id="rate8">4<br> <input type="radio" name="rating" value="9" id="rate9">4.5<br> <input type="radio" name="rating" value="10" id="rate10">5<br> </div> <input type="submit" value="Save"> </form>
To display the stars, we use the following HTML. Each star consists of a star container with an id in the form starN. We will use the background of this div to show off the star, whilst two child divs are our hot areas that can be hovered and clicked to make changes to the left or right half of the star (for half-star precision).
Note that if you would like to allow the user to provide a rating of zero stars, you should prepend the above html with the following snippet:
<div class="halfStarHolder"> </div>
Finally, we encapsulate all the HTML above inside a form tag and pop in a submit button to push the rating to the server as shown below:
<form action="rate.php" method="post"> <!-- ALL HTML GOES HERE --> <input type="submit" value="Save"> </form>
Finally, to actually make the stars colour correctly, I have created a an image with a matrix of stars on it:
We use CSS to add this to the background of each star element and adjust the background-position property to show the relevant part of it with the styles below. Using a single image for all possible star ratings means that hovering will never result in the user seeing a corrupted display while their browser downloads new star combinations.
If you would like to preselect your star rating, just add a ” selected” to the end of the appropriate radio button. If we execute the starReset() function around the time the page loads, this will then filter through to the stars.
The star rating is free for you to modify and use as you see fit, as long as you keep the comments intact.