A Simple and Amazing Star Ratings System for Developers - using HTML5, CSS3 and .js (also jQuery) - with Demo

Share this page
facebook
Google +
twitter

Background

After researching how to develop a star ratings system for our website beerfriends.com - reading and following the tutorials - it became apparent there was nothing existing (that we could find anyway) that accomplished all we wanted out of a star rating system. There are several decent tutorials but each seemed to have some major drawback - and didn't accomplish everything we needed - so we developed our own. First up was defining how the rating system would work - the user experience and requirements. Loosely, this star rating system is similiar to how the Netflix star rating system works.

Requirements / Criteria

What this Tutorial Does and Doesn't cover

This tutorial focuses on the front end code for the browser, which is made up of HTML5, CSS3 and minimal javascript. Specifically we use jQuery because it's simple to use and something we already utilize in our website. The jQuery in this tutorial can easily be replaced by straight javascript or some other DOM query tool. jQuery AJAX $.Post is used to communicate data to the backend server for storing star rating info.

We do not cover backed server processing in this tutorial, though we offer hints and tips for backend processing. The backend is where your data will be stored, presumably in a database. Our backend is primarily used for retreiving and storing star rating info - any backend language and architeture can be used such as C# asp.net, php, etc.

Notes / Tutorial

Step 1: There are seven states a star can be in: Empty, Half, Full, My Half, My Full, Full Hover and Empty Hover. Drop the code snippets below into you website / webpage. This is enough to get started though backend processing is not specified here, so some level of database knowledge and backend processing is necessary to get a complete model up and running. To set rating information when a page is loaded, call this function "AdjustRatings(msr, ar, tr);" - with msr (my star rating), ar (average rating), tr (total ratings) variables set on the backend.

Step 2: Be amazed. We followed our own tutorial and had a sample webpage up and running in a less than 5 minutes, by utilizing a simple notepad .htm document. Be sure to include a jQuery cdn link so jQuery works properly.

CSS3

<style> .sp { width: 5px; height: 25px; } .st, .emptyStar, .halfStar, .fullStar, .myhalfStar, .myfullStar, .fullStarHover, .emptyStarHover { position: relative; display: inline-block; font-size: 25px; color: transparent; overflow: hidden; white-space: pre; box-sizing: border-box; } .fullStarHover { color: gold !important; } .emptyStarHover { color: #777 !important; text-shadow: 0 0 1px white !important; } .halfStar:before, .myhalfStar:before, .fullStarHover:before, .emptyStarHover:before { display: block; z-index: 1; position: absolute; top: 0; width: 50%; content: attr(data-content); overflow: hidden; } .halfStar:after, .myhalfStar:after, .fullStarHover:after, .emptyStarHover:after { display: block; direction: rtl; position: absolute; z-index: 2; top: 0; left: 50%; width: 50%; content: attr(data-content); overflow: hidden; } .fullStar, .halfStar:before { color: orange; } .myfullStar, .myhalfStar:before { color: gold; } .emptyStar, .halfStar:after, .myhalfStar:after { color: #777; text-shadow: 0 0 1px white; } .fullStarHover:before, .fullStarHover:after { color: gold !important; } .emptyStarHover:before, .emptyStarHover:after { color: #777; text-shadow: 0 0 1px white !important; } .trans { -moz-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; transition: all ease-in-out .2s; } </style>

HTML5

<div style="cursor:pointer;" id="tStarRating" title="Rate this"> <div class="st sp" data-val="0" style="width:10px;"></div><div class="st emptyStar trans" data-content="★" data-val="1" id="st1">★</div><div class="st sp" data-val="1"></div><div class="st emptyStar trans" data-content="★" data-val="2" id="st2">★</div><div class="st sp" data-val="2"></div><div class="st emptyStar trans" data-content="★" data-val="3" id="st3">★</div><div class="st sp" data-val="3"></div><div class="st emptyStar trans" data-content="★" data-val="4" id="st4">★</div><div class="st sp" data-val="4"></div><div class="st emptyStar trans" data-content="★" data-val="5" id="st5">★</div><div class="st sp" data-val="5"></div> </div> <div style="text-align:right; width:130px;"> <div id="MyStarText" style="font-size:10px; height:22px;"> Be first to Rate this! </div> <div id="StarText" style="font-size:10px;"> </div> </div>

javascript / jQuery - Desktop Version (mobile version is identical but doesn't have the mouseenter/mouseleave for hover feature)

<script> $(document).ready(function () { // set star rating info when page is loaded - variables from backend. //var msr = "@Model.MyStarRating"; // integer example 0 //var ar = "@Model.AvgRating"; // float example 3.5 //var tr = "@Model.TotalRatings"; // integer example 2 var msr = "0"; var ar = "3.5"; var tr = "2"; AdjustRatings(msr, ar, tr); }); $(document).ready(function () { $(document).on({ mouseenter: function () { $(this).addClass("fullStarHover"); $(this).prevAll().addClass("fullStarHover"); $(this).nextAll().addClass("emptyStarHover"); }, mouseleave: function () { $(this).removeClass("fullStarHover"); $(this).prevAll().removeClass("fullStarHover"); $(this).nextAll().removeClass("emptyStarHover"); } }, ".st"); $(document).on("click", ".st", function () { AdjustMyStar(this); // // SET VALUES FOR PROCESSING // var securityToken = $('input[name="__RequestVerificationToken"]').val(); // <-- OPTIONAL security token, WE USE FOR SECURITY PURPOSES // var key = getKeyP(); // var type = $("#profkey").attr("data-keytype"); var rating = $(this).attr("data-val"); var mst = $("#MyStarText"); if (rating != 0) { $(mst).text("Your Rating: " + rating).fadeIn(300); } // CALL SERVER CONTROLLER/ACTION FOR PROCESSING - COMMENTED OUT FOR DEMO // $.post("/Cheers/SetStarRating", // <--- POST DATA TO BACKEND CONTROLLER/ACTION /Cheers/SetStarRating - This is custom, the backend stores the rating for the key/subject matter. // { __RequestVerificationToken: securityToken, key: key, type: type, rating: rating }, // call SetStarRating // function (data, status) { // if (status == "success") { // if (data.message = "OK") { // if (rating == 0) { // setTimeout(function () { // $("#MyStarText").text("").hide(); // AdjustRatings(0, data.AvgRating, data.Ratings); // }, 0); // ------------------ // } // StarVerbiage(data.AvgRating, data.Ratings); // } // } // }); // THE FOLLOWING CODE IS FOR DEMO PURPOSES - THE ABOVE COMMENTED CODE SHOULD REPLACE THIS WHEN READY TO ADD BACKEND PROCESSING var Ratings = 1; if (rating == 0) { setTimeout(function () { $("#MyStarText").text("").hide(); AdjustRatings(0, rating, Ratings); }, 0); Ratings = 0; } StarVerbiage(rating, Ratings); }); }); function StarVerbiage(ar, tr) { ar = parseFloat(ar).toFixed(1); if (tr > 1) { $("#StarText").text("Avg Rating: " + ar + " / " + tr + " total ratings"); } else if (tr == 1) { $("#StarText").text("Avg Rating: " + ar + " / " + tr + " rating"); } else if (tr == 0) { $("#StarText").text(""); } } function AdjustMyStar(e) { $(e).removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("myfullStar"); $(e).prevAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("myfullStar"); $(e).nextAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("emptyStar"); } function AdjustStar(e) { $(e).removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("fullStar"); $(e).prevAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("fullStar"); $(e).nextAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("emptyStar"); } function AdjustHalfStar(e) { $(e).removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("halfStar"); $(e).prevAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("fullStar"); $(e).nextAll().removeClass("fullStar myfullStar emptyStar halfStar myhalfStar").addClass("emptyStar"); } function AdjustRatings(msr, ar, tr) { ar = parseFloat(ar).toFixed(1); if (msr == 1 || msr == 2 || msr == 3 || msr == 4 || msr == 5) { var x = "#st" + msr; var e = $(x); AdjustMyStar(e); $("#MyStarText").text("Your Rating: " + msr).fadeIn(300); StarVerbiage(ar, tr); } else if (ar > 0 && tr > 0) { var hs = false; // is there a half star? if (ar > 0 && ar < 1.25) { var e = $("#st1"); } else if (ar >= 1.75 && ar < 2.25) { var e = $("#st2"); } else if (ar >= 2.75 && ar < 3.25) { var e = $("#st3"); } else if (ar >= 3.75 && ar < 4.25) { var e = $("#st4"); } else if (ar >= 4.75) { var e = $("#st5"); } else if (ar >= 1.25 && ar < 1.75) { hs = true; var e = $("#st2"); } else if (ar >= 2.25 && ar < 2.75) { hs = true; var e = $("#st3"); } else if (ar >= 3.25 && ar < 3.75) { hs = true; var e = $("#st4"); } else if (ar >= 4.25 && ar < 4.75) { hs = true; var e = $("#st5"); } if (hs) { AdjustHalfStar(e); $("#MyStarText").text("").fadeOut(300); } else { AdjustStar(e); $("#MyStarText").text("").fadeOut(300); } StarVerbiage(ar, tr); } else { $("#MyStarText").text("Be first to Rate this!").fadeIn(300); } } </script>

DEMO

Check out our website www.beerfriends.com for a live demo of this star rating system in action. You can see the hover effect (desktop) and how the stars are rendered. Each brewery, beer and bar/restaurant page makes use of this star rating. Also, where these objects are grouped in a list, the star rating is shown as a read only display - this is done on the location pages such as city, county, country pages, and more.
(To actually give a rating you need to Sign up and become a member)

Contact Us

Have a question or comment or just want to say hi? You can contact us through our twitter account @beerfriends_ OR by email at contact@beerfriends.com. Cheers!

Author

Craig Ernst