javascript - Change star rating on hover -
i use code display stars:
<ul class="rating"> <li> <span class="ratingselector"> <input type="radio" name="ratings[1]" id="degelijkheid-1-5" value="1" class="radio"> <label class="full" for="degelijkheid-1-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-2-5" value="2" class="radio"> <label class="full" for="degelijkheid-2-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-3-5" value="3" class="radio"> <label class="full" for="degelijkheid-3-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-4-5" value="4" class="radio"> <label class="full" for="degelijkheid-4-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-5-5" value="5" class="radio"> <label class="full" for="degelijkheid-5-5"></label> </span> </li> </ul> dynamic code:
<ul class="rating"> <?php foreach ($this->getratings() $_rating): ?> <li> <span class="rowlabel"><?php echo $this->escapehtml($_rating->getratingcode()) ?></span> <span class="ratingselector"> <?php foreach ($_rating->getoptions() $_option): ?> <input type="radio" name="ratings[<?php echo $_rating->getid() ?>]" id="<?php echo $this->escapehtml($_rating->getratingcode()) ?>-<?php echo $_option->getvalue() ?>-5" value="<?php echo $_option->getid() ?>" class="radio" /><label class="full" for="<?php echo $this->escapehtml($_rating->getratingcode()) ?>-<?php echo $_option->getvalue() ?>-5"></label> <?php endforeach; ?> </span> </li> <?php endforeach; ?> </ul> but hovering , selecting works right left, want change left right.
code loaded dynamically, can not change sort , put value 5 first. dynamic code loaded 5 times, 5 different ratings.
how can change this? or code of jquery need?
jsfiddle: https://jsfiddle.net/9nn14beq/
this can almost work pure css. need 1 line of javascript set initial value though:
document.getelementbyid('degelijkheid-1-5').checked = true;.rating input { display: none; } .rating label:before { margin: 5px; font-size: 1.25em; font-family: fontawesome; display: inline-block; content:"\f005"; } li { list-style:none; } .ratingselector input + label { color: #ffd700; } .ratingselector input:checked ~ input:not(:checked) ~ label { color: #ddd; } .ratingselector input:checked ~ input:not(:checked) + label:hover ~ label { color: #ddd; } .ratingselector:hover input + label, .ratingselector:hover input:checked + label { color: #ffed85; } .ratingselector:hover input:checked ~ input:not(:checked) ~ label:hover, .ratingselector:hover input:checked ~ input:not(:checked) + label { color: #ffd700; } .ratingselector:hover input:checked ~ input:not(:checked) ~ label:hover ~ label { color: #ddd !important; } .ratingselector input + label:hover ~ label { color: #ddd !important; }<ul class="rating"> <li> <span class="ratingselector"> <input type="radio" name="ratings[1]" id="degelijkheid-1-5" value="1" class="radio"/> <label class="full" for="degelijkheid-1-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-2-5" value="2" class="radio"/> <label class="full" for="degelijkheid-2-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-3-5" value="3" class="radio"/> <label class="full" for="degelijkheid-3-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-4-5" value="4" class="radio"/> <label class="full" for="degelijkheid-4-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-5-5" value="5" class="radio"/> <label class="full" for="degelijkheid-5-5"></label> </span> </li> </ul>edit
to use js (to re-order items):
var objgroup = document.getelementsbyclassname('ratingselector'); (var = 0; < objgroup.length; i++) { var objradio = [].slice.call(objgroup[i].getelementsbyclassname('full')); // create array of items (var j = objradio.length; j--;) { // loop through array backwards var checkbox = document.getelementbyid(objradio[j].getattribute('for')); objgroup[i].appendchild(checkbox); objgroup[i].appendchild(objradio[j]); } }.rating { direction: rtl; text-align: left; } .rating input { display: none; } .rating label:before { margin: 5px; font-size: 1.25em; font-family: fontawesome; display: inline-block; content: "\f005"; } li { list-style: none; } .rating label { color: #ddd; } /***** css highlight stars on hover *****/ .ratingselector input:checked ~ label, /* show gold star when clicked */ .ratingselector label:hover, /* hover current star */ .ratingselector label:hover ~ label { color: #ffd700; } /* hover previous stars in list */ .ratingselector input:checked + label:hover, /* hover current star when changing rating */ .ratingselector input:checked ~ label:hover, .ratingselector label:hover ~ input:checked ~ label, /* lighten current selection */ .ratingselector input:checked ~ label:hover ~ label { color: #ffed85; }<ul class="rating"> <li> <span class="ratingselector"> <input type="radio" name="ratings[1]" id="degelijkheid-1-5" value="1" class="radio"/> <label class="full" for="degelijkheid-1-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-2-5" value="2" class="radio"/> <label class="full" for="degelijkheid-2-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-3-5" value="3" class="radio"/> <label class="full" for="degelijkheid-3-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-4-5" value="4" class="radio"/> <label class="full" for="degelijkheid-4-5"></label> <input type="radio" name="ratings[1]" id="degelijkheid-5-5" value="5" class="radio"/> <label class="full" for="degelijkheid-5-5"></label> </span> </li> <li> <span class="ratingselector"> <input type="radio" name="ratings[2]" id="design-1-5" value="1" class="radio"/> <label class="full" for="design-1-5"></label> <input type="radio" name="ratings[2]" id="design-2-5" value="2" class="radio"/> <label class="full" for="design-2-5"></label> <input type="radio" name="ratings[2]" id="design-3-5" value="3" class="radio"/> <label class="full" for="design-3-5"></label> <input type="radio" name="ratings[2]" id="design-4-5" value="4" class="radio"/> <label class="full" for="design-4-5"></label> <input type="radio" name="ratings[2]" id="design-5-5" value="5" class="radio"/> <label class="full" for="design-5-5"></label> </span> </li> <li> <span class="ratingselector"> <input type="radio" name="ratings[3]" id="gebruiksgemak-1-5" value="1" class="radio"/> <label class="full" for="gebruiksgemak-1-5"></label> <input type="radio" name="ratings[3]" id="gebruiksgemak-2-5" value="2" class="radio"/> <label class="full" for="gebruiksgemak-2-5"></label> <input type="radio" name="ratings[3]" id="gebruiksgemak-3-5" value="3" class="radio"/> <label class="full" for="gebruiksgemak-3-5"></label> <input type="radio" name="ratings[3]" id="gebruiksgemak-4-5" value="4" class="radio"/> <label class="full" for="gebruiksgemak-4-5"></label> <input type="radio" name="ratings[3]" id="gebruiksgemak-5-5" value="5" class="radio"/> <label class="full" for="gebruiksgemak-5-5"></label> </span> </li> </ul>
Comments
Post a Comment