Cracker World : Simple JavaScript for rating

hey., This is simple coding for rate to content,hover star to to display a star.it contists of 5 star, very poor ,poor, good,very good and excellent,,Title is very important to display a very poor,poor, good,very good and excellent

Demo Download

CSS

Html

JavaScript

rating.js

//Cracker Wold var sMax; // Isthe maximum number of stars var holder; // Is the holding pattern for clicked state var preSet; // Is the PreSet value onces a selection has been made var rated; // Rollover for image Stars // function rating(num){ sMax = 0; // Isthe maximum number of stars for(n=0; n<num.parentNode.childNodes.length; n++){ if(num.parentNode.childNodes[n].nodeName == "A"){ sMax++; } } if(!rated){ s = num.id.replace("_", ''); // Get the selected star a = 0; for(i=1; i<=sMax; i++){ if(i<=s){ document.getElementById("_"+i).className = "on"; document.getElementById("rateStatus").innerHTML = num.title; holder = a+1; a++; }else{ document.getElementById("_"+i).className = ""; } } } } // For when you roll out of the the whole thing // function off(me){ if(!rated){ if(!preSet){ for(i=1; i<=sMax; i++){ document.getElementById("_"+i).className = ""; document.getElementById("rateStatus").innerHTML = me.parentNode.title; } } else{ rating(preSet);

document.getElementById("rateStatus").innerHTML=document.getElementById("ratingSaved").innerHTML;
}
}
}

// When you actually rate something //
function rateIt(me){
if(!rated){
document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML+"Your rating is:"+me.title;
preSet = me;
rated=1;
sendRate(me);
rating(me);
}
}

// Send the rating information somewhere using Ajax or something like that.
function sendRate(sel){
alert("Your rating was: "+sel.title);
}

Source Code

index.php

<html>
<head>
<title>Simple Javascript for Rating</title>
<style type="text/css">
#rateMe{clear:both; width:40%;margin:0 auto; margin-top:100px;}
#rateMe li{float:left;list-style:none;}
#rateMe li a:hover,
#rateMe .on{background:url(star-on.png) no-repeat;}
#rateMe a{float:left;background:url(start-off.png) no-repeat;width:50px; height:50px;}
#rateStatus{width:20%; height:50px; color:#903;}
#ratingSaved{display:none;}
.saved{color:red; }
</style>
<script type="text/javascript" language="javascript" src="rating.js"></script>
</head>
<body>
<div id="rateMe" title="Rate Me...">
<a onclick="rateIt(this)" id="_1" title="Very Poor" onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_2" title="Poor " onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_3" title="Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_4" title="Very Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_5" title="Excellent" onmouseover="rating(this)" onmouseout="off(this)"></a>
<span id="rateStatus"></span>
<span id="ratingSaved"></span>
</div>
</body>
</html>

Pages

Simple JavaScript for rating

CSS

Html

JavaScript

rating.js

Source Code

index.php

No comments:

Post a Comment