Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.star-rating-hover::before {
content: '\e9d9';
color: #F0AD4E;
}
.frm-star-group input[type="radio"]:checked + label::before,
.frm-star-group:not(.frm-star-hovered) input[type="radio"]:checked + label::before {
color: #F0AD4E;
}
.frm-star-group input + label::before,
.frm-star-group .star-rating::before {
font-family: 's11-fp';
content: '\e9d7';
color: #F0AD4E;
display: inline-block;
vertical-align: top;
}
.frm-star-group input {
opacity: 0;
position: absolute;
z-index: -1;
}
@font-face {
font-family: 's11-fp';
src: url('../fonts/s11-fp.ttf?v=7') format('truetype'),
url('../fonts/s11-fp.woff?v=7') format('woff'),
url('../fonts/s11-fp.svg?v=7#s11-fp') format('svg');
font-weight: normal;
font-style: normal;
}
<div style="text-align: center;">
<div class="frm-star-group">
<i class="star-rating-readonly star-rating star-rating-on"></i>
<i class="star-rating-readonly star-rating star-rating-on"></i>
<i class="star-rating-readonly star-rating star-rating-on"></i>
<i class="star-rating-readonly star-rating star-rating-on"></i>
<i class="star-rating-readonly star-rating star-rating-on"></i>
</div>
<div class="frm_clear"></div>
</div>
<div class="frm-star-group">
<input type="radio" name="item_meta[281]" id="field_star-rating-demo-0" value="1" data-invmsg="Star Rating is invalid" aria-invalid="false">
<label for="field_star-rating-demo-0" class="star-rating star-rating-on star-rating-on"></label>
<input type="radio" name="item_meta[281]" id="field_star-rating-demo-1" value="2" data-invmsg="Star Rating is invalid" aria-invalid="false">
<label for="field_star-rating-demo-1" class="star-rating star-rating-on star-rating-on"></label>
<input type="radio" name="item_meta[281]" id="field_star-rating-demo-2" value="3" data-invmsg="Star Rating is invalid" aria-invalid="false">
<label for="field_star-rating-demo-2" class="star-rating star-rating-on"></label>
<input type="radio" name="item_meta[281]" id="field_star-rating-demo-3" value="4" data-invmsg="Star Rating is invalid" aria-invalid="false">
<label for="field_star-rating-demo-3" class="star-rating star-rating-on"></label>
<input type="radio" name="item_meta[281]" id="field_star-rating-demo-4" value="5" data-invmsg="Star Rating is invalid" aria-invalid="false">
<label for="field_star-rating-demo-4" class="star-rating star-rating-on"></label>
<div style="clear:both;"></div>
</div>
function loadStars() {
/*jshint validthis:true */
updateStars( this );
}
function hoverStars() {
/*jshint validthis:true */
var input = this.previousSibling;
updateStars( input );
}
function updateStars( hovered ) {
var starGroup = hovered.parentElement,
stars = starGroup.childNodes,
current = parseInt( hovered.value ),
starClass = 'star-rating',
selectLabel = false;
starGroup.className += ' frm-star-hovered';
for ( var i = 0; i < stars.length; i++ ) {
if ( typeof stars[ i ].className !== 'undefined' && stars[ i ].className.indexOf( starClass ) > -1 ) {
if ( selectLabel ) {
stars[ i ].className += ' star-rating-hover';
} else {
stars[ i ].classList.remove( 'star-rating-hover', 'star-rating-on' );
}
} else {
selectLabel = ( parseInt( stars[ i ].value ) <= current );
}
}
}
function unhoverStars() {
/*jshint validthis:true */
var input = this.previousSibling,
starGroup = input.parentElement;
starGroup.classList.remove( 'frm-star-hovered' );
var stars = starGroup.childNodes;
var selected = jQuery( starGroup ).find( 'input:checked' ).attr( 'id' );
var isSelected = '';
for ( var i = stars.length - 1; i > 0; i-- ) {
if ( typeof stars[ i ].className !== 'undefined' && stars[ i ].className.indexOf( 'star-rating' ) > -1 ) {
stars[ i ].classList.remove( 'star-rating-hover' );
if ( isSelected === '' && typeof selected !== 'undefined' && stars[ i ].getAttribute( 'for' ) == selected ) {
isSelected = ' star-rating-on';
}
if ( isSelected !== '' ) {
stars[ i ].className += isSelected;
}
}
}
}
/* this code initializes the star functions */
jQuery( document ).on( 'mouseenter click', '.frm-star-group input', loadStars );
jQuery( document ).on( 'mouseenter', '.frm-star-group .star-rating:not(.star-rating-readonly)', hoverStars );
jQuery( document ).on( 'mouseleave', '.frm-star-group .star-rating:not(.star-rating-readonly)', unhoverStars );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment