Stars ratings 1 - 3

by Alon Rotem

HTML

<span id="widgetContainer">
    <span id="ratingControl">
        <div id="rating">
            <div id="stars"></div>
            <div id="back"></div>
        </div>
        <div class="centralizedPortion">
            Rating: <span id="ratingPercents"></span>
        </div>
        <div class="centralizedPortion">
            (<span id="numOfReviewers"></span> reviewers)
        </div>
    </span>
</span>

CSS

#widgetContainer {
    border: 1px solid #BEBEBE; 
    display: inline-block;
    padding: 5px;
}

#ratingControl {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 8pt;
}

#rating {
    width: 64px;
    height: 30px;
    position:relative;
    margin: 0 auto;
}

#stars {
    width:100%;
    height:100%;
    background:...

JavaScript

$(function() {
    setRating(1.65, 2536);
});

//-------------------------------------------------
//Helper methods

function setRating(starRate, numOfReviewers) {
    starRate = checkArg(starRate);
    if(starRate > 3)
        starRate = 3;
    numOfReviewers = checkArg(numOfReviewers);
    $("#back").width(starRate*100/3 + "%");
    $("#ratingPercents").text(starRate.toFixed(2));
    $("#numOfReviewers").text(numOfReviewers);
}

function checkArg(arg)
{
    if((!arg) || (isNaN(arg)) || (isNaN(parseFloat(arg))) || (arg < 0))
        arg = 0;
    else if (!isNaN(parseFloat(arg)))
        arg = parseFloat(arg);
    return arg;
}