Sanjeev Maharjan :: Community :: Creating Smooth Star Scroll for Rating

Blog Post: Web Technology

Creating Smooth Star Scroll for Rating

Author:Sanjeev Maharjan

Welcome everyone to this tutorial where we will learn to create simple yet cool rating tool. In this post, I will be showing how we can get a smooth star scroll for rating using JQuery and CSS. Lets have a look at the working demo:

Rate Now

The HTML Code

 <div class="form-field">
    <div class="clear-both"></div>
    <div class="label">
        Rate Now
    </div>
    <div class="input-field star-bg" style="margin-top:5px;cursor:pointer; padding-bottom:10px;">
        <div style="float:left; width:100px;">
            <div style="width:0px; overflow:hidden; float:left;"  id="star">
                <img src="images/red-stars.png" width="85" class="not-selectable" />
            </div>
        </div>
        <div style="float:left;">
            <input name="rating" id="rating" type="text" size="5" value="0" />
        </div>
        <div class="clear-both"></div>
    </div>
    <div class="clear-both"></div>
</div>

CSS Code

 /*CSS For White Star*/
.star-bg{
    background-image:url(images/white-stars.png);
    background-repeat:no-repeat;
    height:15px;
    width:85px;
}

/*To make image non selectable when we scroll*/
.not-selectable{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

JQuery Code

 <script type="text/javascript">
   $(window).load(function() {
        /*Add Mouse Movement Effect*/
        $('.star-bg').mousemove(function(e){
                    $(this).trackRating(e);
                    });
        /*Add Click Effect*/
        $('.star-bg').click(function(e){
                    $(this).setRating(e);
                    });
    });
$.fn.trackRating = function(e){
    if($(this).find('input').val()==0)
    {
        //Get Div Position
        var parentOffset = $(this).offset(); 
           //Get Cursor Position relative to div
        var relX =e.pageX - parentOffset.left;
           $(this).find('div').width(relX);
    }
};
$.fn.setRating=function(e){
    //Get Single Star Width
    var star_width=$(this).find('img').width()/5;
    //add Rating value to input field
    var rounded = ($(this).find('#star').width()/star_width).toFixed(1);
    
    $(this).find('input').val(rounded);
    $(this).css('cursor','default');
</script>

Download Code here

COMMENTS

No Comments Yet