ajax star rating

A very minimal, yet complete, solution to a star rating system!

Very accurate; uses percentages! Compared with the traditional 5 star system, our percentage based Star Rating function gives you nearly 1,700% increase in accuracy.

Have multiple items on one page for your users to rate? No problem! It can handles an unlimited amount of concurrent operations.

/* AJAX Star Rating v1.0.2, Programming by Ulyses */
/* Updated February 7th, 2007 */

function $(o) { return((typeof(o)=='object'?o:document).getElementById(o)); }
function $S(o) { return($(o).style); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
function XY(e,v) { var o=agent('msie')?{'X':event.clientX+document.body.scrollLeft,'Y':event.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }

var star={

    /* Mouse Events */
    
    'cur':function(e,o) { if(star.stop) { star.stop=0;

        document.onmousemove=function(e) { var n=star.num;
        
            var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; star.num=o.id.substr(4);

            if(oX<1 || oX>84 || oY<0 || oY>19) { star.stop=1; star.revert(); }
            
            else {

                $S('starCur'+n).width=oX+'px';
                $S('starUser'+n).color='#111';
                $('starUser'+n).innerHTML=Math.round(oX/84*100)+'%';
            }
        };
    } },
    'update':function(e,o) { var n=star.num, v=parseInt($('starUser'+n).innerHTML);
    
        n=o.id.substr(4); $('starCur'+n).title=v;

        req=new XMLHttpRequest(); req.open('GET','/AJAX_Star_Vote.php?vote='+(v/100),false); req.send(null);    

    },
    'revert':function() { var n=star.num, v=parseInt($('starCur'+n).title);
    
        $S('starCur'+n).width=Math.round(v*84/100)+'px';
        $('starUser'+n).innerHTML=(v>0?Math.round(v)+'%':'');
        $('starUser'+n).style.color='#888';
        
        document.onmousemove='';

    },

    /* Data */

    'stop':1,
    
    'num':0

};

CSS


#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 10px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('/media/stars.gif') repeat-x; CURSOR: pointer; }
#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
#star li.curr { BACKGROUND: url('/media/stars.gif') left 25px; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 13px; FONT-FAMILY: Arial; COLOR: #888; }

<ul id="star" class="star" onmousedown="star.update(event,this)" onmousemove="star.cur(event,this)" title="Rate This!">
 <li id="starCur" class="curr" title="80" style="width: 67px;"></li>
</ul>
<div id="starUser" class="user">80%</div>