How we split the rating stars. Star rating on CSS Outputting html rating in the form of stars

To display the star, we will use the decimal code for the star symbol in HTML, namely: ☆.

HTML ☆☆☆☆☆

We need, when you hover the mouse over the corresponding star, to push a solid yellow star into the “hollow” star. Easy: Just place a solid star using a pseudo element on top of the hollow star.

CSS .rating > span:hover:before ( content: "\2605"; position: absolute; )

We absolutely position the solid star and, thus, our star will cover the hollow star.

But so far everything works for us only for each specific star. And our task, for better user experience, is to fill all the stars (based on which star the mouse points to). For example, if the user hovers the mouse over the 4th star, then it is necessary to display 4 stars, if on the 5th, then 5, etc.

There is no way to select the previous adjacent element through CSS. However, there is a way to select the next child elements, via .

If we literally reverse the characters (the snippet will help us with this - ), we can then use a related combinator to select all the stars that appear before the mouse-over star, but after in the HTML.

CSS .rating ( unicode-bidi: bidi-override; direction: rtl; ) .rating > span:hover:before, .rating >

So we've created a user-friendly star rating template using little code. Below is the complete CSS code for the rating to work:

CSS .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; ) Actual usage

Most likely, it will not be possible to do without the participation of javascript. When the user clicks on a star, an ajax request is sent to the server and the widget receives a class through which the selected number of stars is displayed. Is it really impossible to rely on javascript, if it is used everywhere on the site, to implement such a star system? If your application is entirely dependent on javascript, then this option is certainly suitable. But, if your site needs to work without using javascript, then getting that star rating will require a lot more work. You can see Lea Verous's example, which uses radio buttons as part of a form and does not use javascript.

In this tutorial, we'll learn about the impressive power of CSS and create a star rating using pure CSS. Unfortunately, this ranking will not work in some older Webkit-powered browsers due to incorrect handling of sibling and neighboring selectors. But it works fine in all modern browsers.

When creating the rating, we had a question: is it possible not to use JavaScript at all in it, limiting ourselves to only CSS. And it is possible. Using Ryan Seddon's method of creating custom radio buttons using CSS, you can turn multiple radio buttons into stars that change color, in our tutorial these are just unicode characters that change color, but you can use images and use sibling and neighbor selectors to get the job done colors to the stars.

Radio buttons are often used to create star ratings, so the markup may not seem unusual to you. The only thing that needs to be done differently is the reverse order of the stars: the highest rating must come first due to the way CSS3 selectors work, this limitation may be removed in CSS4, but this is still a long way off.

Of course, JavaScript will be needed to assign an event handler if the voting results need to be registered using AJAX, but this does not apply to the rating itself, which can work as part of a regular form.

In browsers that do not support the pseudo-class:checked (checked), especially Internet Explorer below version 9, the rating should appear as radio buttons, but we have not tested.

So, here's what happens:

HTML Code

Please rate: 5 stars 4 stars 3 stars 2 stars 1 star

CSS Code

Rating ( float:left ; ) /* The :not(:checked) construct acts as a filter to prevent browsers that do not support the :checked pseudo-class from applying these properties. All browsers that support the :checked pseudo-class also support the :not() pseudo-class, so the filter should work correctly. */ .rating :not (:checked ) > input ( position:absolute ; top:-9999px ; clip:rect (0 ,0 ,0 ,0 ) ; ) .rating :not (:checked ) > label ( float:right ; width:1em ; padding:0 .1em ; overflow:hidden ; white-space:nowrap ; cursor:pointer ; font-size:200%; line-height:1 .2 ; color :#ddd ; text-shadow:1px 1px #bbb , 2px 2px #666 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating :not (:checked ) > label:before ( content : "★ " ; ) .rating > input:checked ~ label ( color : #f70 ; text-shadow:1px 1px #c60 , 2px 2px #940 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating :not ( :checked ) > label:hover , .rating :not (:checked ) > label:hover ~ label ( color : gold; text-shadow:1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating > input:checked + label:hover , .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover , .rating > input:checked ~ label:hover ~ label, . rating > label:hover ~ input:checked ~ label ( color : #ea0 ; text-shadow:1px 1px goldenrod, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; ) .rating > label:active ( position:relative ; top:2px ; left:2px ; )

In this article we will look at how to add a star rating to site articles.

Adding this functionality to the CMS MODX Revolution system can be done using the FiveStarRating add-on.

FiveStarRating Add-on

FiveStarRating is an add-on that adds elements to the MODX Revolution system with which you can perform front-end rating of resources using stars.

Installing the FiveStarRating add-on

The FiveStarRating add-on is located in the modx.com repository.

It can be installed on the MODX Revolution system on the "Manage Packages" page.

Using the FiveStarRating Add-on

Connecting a star rating system to a resource is done by placing a call to the SimpleRating snippet in the template or content of the resource.

[[!SimpleRating]]

SimpleRating snippet parameters:

• &id - id of the resource for which you want to display the rating (current by default).
• &tpl - chunk containing HTML star rating markup (default tplSimpleRating).

An example of calling the SimpleRating snippet indicating the resource id:

[[!SimpleRating? &id = `3` ]]

An example of calling the SimpleRating snippet indicating the chunk name:

[[!SimpleRating? &tpl = `tplSimpleRating1` ]]

The SimpleRating snippet does the following:

• registers the necessary styles and scripts on the front end;
• receives the rating of the current or specified resource and displays it on the page;
• sets the rating active or not, depending on whether the user has already rated this resource or not.

The evaluation is sent via ajax. The ajax request is processed on the server by the action.php file. This file checks the possibility of rating a resource by a given user, sets the rating (writing the necessary information to the database) and returns the result. After receiving the result from action.php, the JavaScript script displays it on the page.

Protection against rating cheating is carried out through LocalStorage and IP address.

If necessary, IP address protection can be disabled. This is done by setting the system parameter simplerating_ip to "No".

Displaying resources with the highest ratings

As a conclusion, let’s look at how you can display the 10 highest-rated resources on a page. To perform this task, we will use the pdoResources snippet from the pdoTools package.

[[!pdoResources? &loadModels=`simplerating` &parents=`0` &innerJoin=`( "SimpleRating": ( "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" ) )` &sortby = `("SimpleRating. rating_value":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":"rating_value" )` &tpl=`@INLINE

[[+id]]. [[+pagetitle]] - [[+rating_value]]

` ]]

It all started when I decided to change the rating for posts on my blog.

The main reason for the change in rating was that the rating was displayed as “integer” stars, well, the maximum you could display was half a star. That is, if the rating for an article was 4.75, then it was necessary to display either 4.5 stars or 5, which did not suit me very much.

Therefore, it was decided to write my own plugin in jQuery to generate a rating in the form of stars.

Basic requirements for the plugin:

• The rating should have been displayed correctly, i.e. if my rating was 4.78, then the number of stars shaded should be appropriate.
• Ability to select an effect when hovering the mouse over a star. This means what rating the user can give. i.e. when hovering the mouse pointer over the stars, they should have been painted over either with whole stars, or half a star, or in absolute values ​​following the mouse pointer
• Possibility to set your own stars
• Ability to specify the URL to which the voting result will be sent
• Ability to specify the number of stars displayed in the rating
• Automatic decline of voting results. (For example: 1 vote, 2 votes, 5 votes)
• Ability to set your own nouns for voting results
• Ability to set a minimum rating value below which the user will not be able to vote
• Ability to execute a custom function when clicking on a star

After the plugin requirements were developed, I started programming. As a result, I came up with what I think is a pretty good jQuery plugin for rating notes in the form of stars, which I am happy to share with you.

In order to use this plugin on your website, the first thing you need to do is connect the jQuery library and the plugin itself. We will connect the jQuery library not in the usual way, but from the Google repository.

window.jQuery || document.write("");

This code must be placed between tags on your site.

You can read about why you need to connect jQuery from the Google repository.

Also, for the plugin to work correctly, you need to connect the following styles:

You will find all this in the source code.

After all the necessary styles and libraries are connected, you can call the plugin itself. To do this, you need to insert a div into the right place on your page, for example, with the rating class:

Now you can call the plugin on this element like this:

$("div.rating").rating();

In this case, the plugin will be called with default settings, resulting in the creation of 5 unfilled stars.

In order to set a certain number of shaded stars, you need to insert a hidden input field with the val class inside our element, which will contain the value of your rating:

If you now call the plugin, the following rating will be created:

After the user clicks on the desired star, the rating will be automatically recalculated (the number of shaded stars will change) taking into account the choice made, and the number of votes will also change.

If there are several ratings on one page and you need to send data to the server, then another hidden input field with the vote-id class is used to identify the rating:

The value of this field will be sent to the server along with the voting result. This way you can identify the rating and update the value of the rating you need!

Now let's talk about what settings the plugin has and how you can change them!

fx	float	Effect when hovering the mouse over a star. float — When hovering the mouse cursor, the stars will be painted over gradually, following the mouse pointer half - When you hover the mouse cursor, the stars will be painted over gradually, half a star at a time full - When you hover the mouse cursor, the whole star will be filled in
image		path to the star image. It should be noted that the picture must be made in the form of a sprite, i.e. At the very top of the image there is a star, which will be displayed for unfilled stars. Below it is a star, which is displayed when you hover the mouse cursor. And at the very bottom there is a star, which is displayed for shaded stars. If you decide to change the stars, then this sequence should be maintained. I also draw your attention to the fact that the height and width of one star must be equal. Otherwise the rating will not be displayed correctly
width	32	Width of one star
stars	5	Number of stars displayed in the rating
titles	[ "voice", "vote", "votes" ]	An array of nouns that will be displayed to count votes
readOnly	false	Rating operating mode. The default is false. If set to true, it will not be possible to vote
minimal	0	Minimum rating value below which the user will not be able to vote
url		Address of the page to which the AJAX request with the voting result will be sent
type	post	AJAX request type. The default is post. If you need to send a GET request to the server, then set this value to - get
loader		Path to the image that will be displayed while the AJAX request is being sent to the server
click		A custom function that is called when the user clicks on the star. The first parameter of the function will be the rating object itself, and the second will be the user’s voting result

Custom Message Output Format

Let's say you process a request on the server and update the rating of a note. In this case, you can display the message “Thank you. Your vote has been counted,” rebuild the star rating and update the number of voters in the user’s browser.

But most often, before updating the rating, you need to check whether this person voted for this article or not. And if a person has already voted for this note, then a warning should be displayed in the user’s browser and not update the rating value and the number of voters.

Therefore, for the plugin to work correctly, the server must return a json object of the following form:

If status is equal to the value - OK, then the star rating will be updated and the number of voters will be recalculated, otherwise a warning message will simply be displayed.

This is the universal plugin I came up with for displaying the rating of notes in the form of stars.

You can see the demo