How To Make A Star Rating Widget For A Website Using CSS and Javascript : The Simplest Method

Developing Star Rating Widget

Star rating widget is an important part of many entertainment and educational websites like IMDB or Freebooksdownload  and many more. It gives an attractive method for the people to engage. Today we are going to see the simplest method to create a CSS Star widget and then using javascript and forms togather to retrieve information from it.

 The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆. You could use as many stars as you like depending upon your need as follows:

<div class="rating">

<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> </div>

After that you have setup the stars, we need to flop out that "hollow" star with a "solid" star on hover (Gallery for finding those sorts of characters). This can be easily done with CSS hover attribute such that when the mouse will hover on the hollow star (☆) it will be replaced by filled star (★).  To do this we wiil write :

.rating > span:hover:before { content: "\2605"; position: absolute; }

Now that we have aligned the stars and their hover property, next thing is to make all the stars be filled that come before the focused star. Bad Luck !! There is no way to choose the preceding child elements, but there is a way to select suceeding elements through the adjacent or general sibling combinators. If we literally reverse the order of the characters, then we can make use of the general sibling combinator to select all the stars that appear before the hovered star visually, but after the hovered star in the HTML. To do this :

.rating { unicode-bidi: bidi-override; direction: rtl; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\2605"; position: absolute }

And now the development of Star rating widget is Done !!!!!!

The Entire CSS code is :

.rating { unicode-bidi: bidi-override; direction: rtl; } .rating > span { display: inline-block; position: relative; width: 1.1em; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\2605"; position: absolute }

Developing Functionality of Star Rating Widget

So the development is done now comes the functional part i.e. howto retrieve a number when a user clicks on a star. To this there is a very simple trick using javascript and HTML forms. Let's 

create a form that looks like ..

<form id="submit_rating" action="save_rating.php">

<p>Enter Your Rating</p>

<input name="rating_widget" type="text" id="rating_value">

<input name="submit_value" type="submit" value="submit">

</form>

OK the form is created now the next is to write a javascript function taht will be called on the click event i.e. whenever a 

click is performed on a star a value is deliverd to the function , the function writes on the rating_widget text box and submits the form. To do this :

<script type="text/javascript">

<function submit_r(i)

{

document.gtElementByID('rating_value').value=i;

document.getElementByID('submit_rating').submit();

}

</script>

OK Now we have add a click event to every star so that the function can be executed whenever a star is cliked and the form is submitted to save_rating.php or any other script where you will handle this value.

<div class="rating">

<span onclick="(submit_r(5);")>☆</span><span onclick="(submit_r(4);">☆</span><span onclick="(submit_r(3);">☆</span><span onclick="(submit_r(2);">☆</span><span onclick="(submit_r(1);">☆</span>

</div>

Note!!!! Check the order.

IF You Liked this Tutorial please do like us on Facebook below  
Thanks !!