Nomadic Functions
Where = selfishness is=20 good=E2=84=A2=20

Minimal, yet complete. How a star rating = system should=20 be.

Our percentage based Star Rating function gives you 1,680% = increase=20 in accuracy =E2=80=94 compared with the traditional 5 star system, it = has 84 hotspots=20 (84px wide), instead of 5 hot spots=E2=80=A6 let=E2=80=99s do the math: = (84/5)*100=3D1,680%. Why=20 restrict your users?

Download the .zip source = code.

EXAMPLE:

80%

50%

99%

70%

30%

JAVASCRIPT

/* AJAX Star Rating : v1.0.3 : =
2008/05/06 */
/* http://www.nofunc.com/AJAX_Star_Rating/ */

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

star=3D{};

star.mouse=3Dfunction(e,o) { if(star.stop || isNaN(star.stop)) { =
star.stop=3D0;

    document.onmousemove=3Dfunction(e) { var n=3Dstar.num;
   =20
        var p=3DabPos($('star'+n)), x=3DXY(e), oX=3Dx.X-p.X, =
oY=3Dx.Y-p.Y; star.num=3Do.id.substr(4);

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

            $S('starCur'+n).width=3DoX+'px';
            $S('starUser'+n).color=3D'#111';
            $('starUser'+n).innerHTML=3DMath.round(oX/84*100)+'%';
        }
    };
} };

star.update=3Dfunction(e,o) { var n=3Dstar.num, =
v=3DparseInt($('starUser'+n).innerHTML);

    n=3Do.id.substr(4); $('starCur'+n).title=3Dv;

    req=3Dnew XMLHttpRequest(); =
req.open('GET','?vote=3D'+(v/100),false); req.send(null);   =20

};

star.revert=3Dfunction() { var n=3Dstar.num, =
v=3DparseInt($('starCur'+n).title);

    $S('starCur'+n).width=3DMath.round(v*84/100)+'px';
    $('starUser'+n).innerHTML=3D(v>0?Math.round(v)+'%':'');
    $('starUser'+n).style.color=3D'#888';
   =20
    document.onmousemove=3D'';

};

star.num=3D0;

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; }

HTML

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

Have ideas for code=20 changes?

CC =C2=B7 = GPL =C2=B7 = NoFunc.com