Tags

, , , , ,

Rating Per Pixel [click on star at any point]


<span class="rating">
    <i></i>
</span>
                

CSS


.rating, .rating i {
background:url(https://mfarazali.files.wordpress.com/2016/06/12193388_1197200920295505_3858962691135734153_n.jpg) repeat-x 0 0;
margin-right:3px;
width:80px;
height:16px;
float:left;
vertical-align:top;
cursor:pointer;
}
.rating i{
background:url(https://mfarazali.files.wordpress.com/2016/06/11694998_1197200923628838_6657933242899096109_n.jpg) repeat-x 0 0;
width:auto;
}
                

JS:

/* Rating Per Pixel */
    $(".rating").on("click", function(e) {
        var pgX = e.pageX,
            crntwd, tgt = $(this);
        crntwd = getWidth(tgt, pgX);
        $(this).find("i").width(crntwd);

        function getWidth(ex, xCo) {
            return Math.floor(Math.sqrt(Math.pow(xCo - (ex.offset().left), 2)));
        }
    });

 

Rating Per Point [hover it then click to select]


<ul class="ratingPoint">
    <li class="on"></li>
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
                

CSS


.ratingPoint li {
float:left;
width:16px;
height:16px;
background:url(https://mfarazali.files.wordpress.com/2016/06/12193388_1197200920295505_3858962691135734153_n.jpg) repeat-x 0 0;
margin-right:3px;
cursor:pointer;
}

.ratingPoint li.on,.ratingPoint li.onb {
background:url(https://mfarazali.files.wordpress.com/2016/06/11694998_1197200923628838_6657933242899096109_n.jpg) repeat-x 0 0;
}
                

JS:

/* Rating Per point */
    $('.ratingPoint').on('mouseover', 'li', function() {
        var ind = $(this).index();
        $(this).removeClass('on').siblings().removeClass('on');
        $(this).addClass('on').prevAll().addClass('on');
    }).on('mouseout', function() {
        $(this).children('li').removeClass('on');
    }).on('click', 'li', function() {
        $(this).removeClass('onb').siblings().removeClass('onb');
        $(this).addClass('onb').prevAll().addClass('onb');
    });

 

Live Demo

 

Advertisements