Crazy Horse
asked on
display balance of stars as greyed out
I had this question after viewing how to use a switch statement with heredoc.
For simplicity's sake I have stuck with my initial method of doing this and then used:
This is working just fine to show the number of stars. I can't figure out how to show the balance of the stars though if a user didn't leave a rating of 5 stars. For example, if the user chooses 3 stars, there should be 3 yellow stars and 2 greyed out ones using this code as the greyed out display:
For simplicity's sake I have stuck with my initial method of doing this and then used:
$stars = "";
for($i = 1; $i<=$avg; $i++) {
$stars .="<i class='ti-star'></i>";
}
This is working just fine to show the number of stars. I can't figure out how to show the balance of the stars though if a user didn't leave a rating of 5 stars. For example, if the user chooses 3 stars, there should be 3 yellow stars and 2 greyed out ones using this code as the greyed out display:
<i class="ti-star disabled"></i>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the answers. At this stage I am trying to keep it simple and the users can't choose half ratings. They have radio buttons with 1-5 and they can only choose 1,2,3,4 or 5. No halves. At some point I will try make this more sophisticated and have half stars. But for now, baby steps :)
I am trying to keep it simpleI hear you - in my opinion though - the solution above is the complicated version - but if it is working for you.
Edit: You may want to see this if you have to support Firefox. For some reason Firefox (alone among the big browsers) does not understand content:url, so some adjustment in the CSS may be needed for FF.
You might be able to use something like this with one image per CSS class. These CSS star images come from the layers of the PSD file in this article:
https://www.experts-exchange.com/articles/5256/Simple-Vote-Counting-in-PHP-and-MySQL.html
You could probably do something like this with CSS sprites, too.
Please see: https://iconoun.com/demo/temp_black_sulfur.php
You might be able to use something like this with one image per CSS class. These CSS star images come from the layers of the PSD file in this article:
https://www.experts-exchange.com/articles/5256/Simple-Vote-Counting-in-PHP-and-MySQL.html
You could probably do something like this with CSS sprites, too.
Please see: https://iconoun.com/demo/temp_black_sulfur.php
<?php // demo/black_sulfur.php
/**
* https://www.experts-exchange.com/questions/29004086/display-balance-of-stars-as-greyed-out.html
*/
error_reporting(E_ALL);
// CREATE OUR WEB PAGE IN HTML5 FORMAT, USING HEREDOC SYNTAX
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.star0 {
content:url(https://iconoun.com/demo/images/star0.png);
}
.star1 {
content:url(https://iconoun.com/demo/images/star1.png);
}
.star2 {
content:url(https://iconoun.com/demo/images/star2.png);
}
.star3 {
content:url(https://iconoun.com/demo/images/star3.png);
}
/* STYLE SHEET HERE */
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("[name='stars']").click(function(){
var numstars = this.id;
$("#starzone").removeClass();
$("#starzone").addClass(numstars);
});
});
</script>
<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>
<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>
<input type="radio" id="star0" name="stars" checked />Zero Stars<br>
<input type="radio" id="star1" name="stars" />One Star<br>
<input type="radio" id="star2" name="stars" />Two Stars<br>
<input type="radio" id="star3" name="stars" />Three Stars<br>
<div id="starzone" class="star0" />
</body>
</html>
HTML5;
// RENDER THE WEB PAGE
echo $htm;
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you all, I really appreciate the help!
Open in new window