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:

$stars = "";
			for($i = 1; $i<=$avg; $i++) {
				$stars .="<i class='ti-star'></i>";
			}

Open in new window

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>

Open in new window

ASKER CERTIFIED SOLUTION

Bill Bach

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

$stars = '';
$class = '';
for($i = 1; $i<=5; $i++) {
  // conditionally set the class based on $i and the $avg
  if ($i > $avg) $class = 'disabled';
  $stars .="<i class='ti-star {$class}'></i>";
}

Open in new window

Crazy Horse

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 :)

Julian Hansen

I am trying to keep it simple

I hear you - in my opinion though - the solution above is the complicated version - but if it is working for you.

Ray Paseur

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

<?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;

Open in new window

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

Thank you all, I really appreciate the help!