I found an example of a star rating with input from type="radio" .
This is fantastic, but I would like something simpler. Instead of input of type="radio" use an asterisk with the <span> exponent in the demo .
From the following code
.holder { height: 1%; overflow: hidden; position: relative; left: 0; } .left { float: left; } .rating { border: none; float: none; display: block; left: 0; } .rating>input { display: none; } .rating>label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005"; } .rating>.half:before { content: "\f089"; position: absolute; } .rating>label { color: #ddd; float: right; } .rating>input:checked~label, .rating:not(:checked)>label:hover, .rating:not(:checked)>label:hover~label { color: #FFD700; } .rating>input:checked+label:hover, .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, .rating>input:checked~label:hover~label { color: #FFED85; }
<!DOCTYPE html> <html lang="" es> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script> $(document).ready(function() { $(document).on('submit', '#frm-rating', function() { </script> </head> <body> <form id="frm-rating" method="POST"> <div class="holder"> <div class="left"> <fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Excellent - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4.5" /><label class="half" for="star4half" title="very good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="All right - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3.5" /><label class="half" for="star3half" title="All right - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Regular - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2.5" /><label class="half" for="star2half" title="Regulate the evil - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="wrong - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1.5" /><label class="half" for="star1half" title="Very bad - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Painful - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="0.5" /><label class="half" for="starhalf" title="Waste of time - 0.5 stars"></label> </fieldset> </div> </div> <textarea name="opinion" placeholder="Write a comment..."></textarea> <input type="hidden" name="user" value="1" /> <button type="submit">Submit Review</button> </form> <div id="result-rating"> </div> </body> </html>
How to create stars with the same characteristics in this code using only CSS and jQuery without using frameworks as Bootstrap or others?
<div id="rating" class="rating"> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> </div>
Or this code:
<ul class="star-rating"> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon half">☆</li> <li class="star-icon full">☆</li> </ul>
And using jQuery to get the selected values and send them to the database.
$(document).ready(function() { $(document).on('submit', '#frm-rating', function() { //Obtenemos datos form. var data = $(this).serialize(); //Ajax $.ajax({ type: 'POST', url: 'rating.php', data: data, success: function(data) { $("#result-rating").html(data); } }); return false; }); });
The goal is to simplify code optimization.
Example:
.star-icon { color: #ddd; font-size: 2em; position: relative; display: inline; direction: rtl; unicode-bidi: bidi-override; } .star-icon:before{ content: '\2605'; position: absolute; left: 0; } .star-icon.full:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; } .star-icon.half:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; width: 50%; overflow: hidden; direction: ltr; } .star-icon.half:after { content: '\2605'; position: absolute; right: 0; width: 50%; overflow: hidden; } .star-rating > li:hover, .star-rating > li:hover ~li:before, .star-rating > li:hover ~li:after { width: 100%; color: #fde16d; cursor: pointer; }
<ul class="star-rating"> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon half">☆</li> <li class="star-icon full">☆</li> </ul>
Now, to find out what rating the user has selected through PHP and jQuery.
Something more dynamic.
<?php function calculate_stars($max, $rating){ $full_stars=floor($rating); $half_stars = ceil($rating-$full_stars); $gray_stars = $max-($full_stars + $half_stars); return array ($full_stars, $half_stars, $gray_stars); } function display_star($rating){ $output=""; $number_stars = calculate_stars(5,$rating); $full = $number_stars[0]; $half = $number_stars[1]; $gray = $number_stars[2]; $output ='<ul class="star-rating">'; if($gray) for ($i=0;$i<$gray;$i++) { $output .= '<li class="star-icon">☆</li>'; } if($half){ $output .= '<li class="star-icon half">☆</li>'; } if($full){ for($i=0; $i<$full;$i++) { $output .= '<li class="star-icon full">☆</li>'; } } $output .='</ul>'; return $output; } echo display_star(4.3); exit; ?>
The source is watching the first 3 videos explaining the topic.
I do not want to use JavaScript; I want this in jQuery.
user8714800
source share