Display stars with values
I followed this awesome tutorial for achieving a star rating system: Tutorial Demo
This completely works, and I did the necessary to save the star shape to a MySQL table. Now, I would like to show the star value recorded in my table using the star system from the tutorial. Example $starsvalue = 4;
, then it shows 4 colored stars and the last one is empty.
I currently don't know how to display the stars with the result $starsvalue
. Any help is greatly appreciated.
Form used:
echo "<form id=\"ratingsForm\" name=\"starsrating\" method=\"POST\">";
echo "<div class=\"stars\">";
echo "<input type=\"radio\" name=\"star\" class=\"star-1\" id=\"star-1\" value=\"1\" onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-1\" for=\"star-1\">1</label>";
echo "<input type=\"radio\" name=\"star\" class=\"star-2\" id=\"star-2\" value=\"2\" onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-2\" for=\"star-2\">2</label>";
echo "<input type=\"radio\" name=\"star\" class=\"star-3\" id=\"star-3\" value=\"3\" onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-3\" for=\"star-3\">3</label>";
echo "<input type=\"radio\" name=\"star\" class=\"star-4\" id=\"star-4\" value=\"4\" onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-4\" for=\"star-4\">4</label>";
echo "<input type=\"radio\" name=\"star\" class=\"star-5\" id=\"star-5\" value=\"5\" onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-5\" for=\"star-5\">5</label>";
echo "<span></span>";
echo "</div>";
echo "<div style=\"visibility:hidden\"><Input type=submit name=\"choix\" value=\"Valider\"></div>";
echo "</form>";
Used CSS:
body {
padding: 50px;
}
form .stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
* UPDATE *
Rati's attempt suggested and I fail to show the stars. CSS and JS files look in good places. I think I don't understand how to set it up, how to set the image folder with images and other options
I don’t know where I should copy the codes of codes that are very common on a web page with a rative?
$ ('DIV'). Raty ({number: function () {return $ (this) .attr ('data-number');}});
My code:
<link rel="stylesheet" href="./raty/lib/jquery.raty.css"/>
<link rel="stylesheet" href="./raty/stylesheets/labs.css" media="screen" type="text/css"/>
<script src="./raty/vendor/jquery.js"></script><script src="./raty/lib/jquery.raty.js"></script>
<script src="./raty/javascripts/labs.js" type="text/javascript"></script>
<div class="clearfix"></div>
<article>
<div class="body">
<h1>Default</h1>
<p>You need just to have a <code>div</code> to build the Raty.</p>
<div id="default"></div>
<div class="highlight"><pre><span class="nt"><div></div></span>
</pre></div>
<div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s1">'div'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
</pre></div>
source to share
According to the manual, if the switch is checked so you will see a yellow star.
$starsvalue=4;
echo "<form id=\"ratingsForm\" name=\"starsrating\" method=\"POST\">";
echo "<div class=\"stars\">";
for ($i = 1; $i <= 5; $i++) {
echo "<input type=\"radio\" name=\"star\" class=\"star-$i\" id=\"star-$i\" value=\"$i\" ";
if ($i === $starsvalue) {
echo " checked='checked' ";
}
echo "onclick=\"this.form.submit()\"/>";
echo "<label class=\"star-$i\" for=\"star-$i\">$i</label>";
}
echo "<span></span>";
echo "</div>";
echo "<div style=\"visibility:hidden\"><Input type=submit name=\"choix\" value=\"Valider\"></div>";
echo "</form>";
source to share
Here is the source code as I am doing with Raty.
Step 1: http://github.com/wbotelhos/raty/archive/2.7.0.zip I downloaded it and after extracting I renamed the folder to raty.
Step 2: I have placed the html file besides this racial folder.
<link href="raty/demo/stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css">
<link href="raty/lib/jquery.raty.css" media="screen" rel="stylesheet" type="text/css">
<script src="raty/vendor/jquery.js"></script>
<script src="raty/lib/jquery.raty.js"></script>
<script src="raty/demo/javascripts/labs.js" type="text/javascript"></script>
<div data-number="5"></div>
<script>
$('div').raty({
number:$(this).attr('data-number'),
half : true,
path : null,
starHalf : 'raty/demo/images/star-half-mono.png',
starOff : 'raty/lib/images/star-off.png',
starOn : 'raty/lib/images/star-on.png'
});
</script>
maybe labs.css and labs.js are not useful, but for now I just copied it to take care of that too.
EDIT
For the chosen value, suppose $starvalue = 4
<script>
$('div').raty({
number:$(this).attr('data-number'),
half : true,
path : null,
starHalf : 'raty/demo/images/star-half-mono.png',
starOff : 'raty/lib/images/star-off.png',
starOn : 'raty/lib/images/star-on.png',
score: <?php echo $starvalue; ?>
});
</script>
source to share