I’ve searched around the interwebs for an ajax star rater and I came across a few different possibilities, all of which looked very good. The top result from google was Nick Stakenburg’s “Starbox” for “ajax star rater”. I also found Masuga Web Design’s Ajax Star Rater and a script from MySandbox to be popular results. However I couldn’t really seem to find a PHP / Mysql script that used Javascript for the rater effects. So I decided to make one based off of a script I found:
Reign Water Design’s 5 Star Rating System
This was a very nice easy to use Javascript 5 star rating script. All I had to do was make some tweaks to my preference and add on some PHP/Mysql code to submit the rating.
See the demo or download this script.
To view the PHP source code, images, and everything together you must download this script.
Javascript
Insert the following in the <head> tags of your page:
[codesyntax lang=”html4strict” title=”Javascript Source Code”]
<script type=”text/javascript”>
function insertParam(key, value)
{
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split(“&”);
var i=kvp.length; var x; while(i–)
{
x = kvp[i].split(“=”);
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join(“=”);
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join(“=”);}
//this will reload the page, it’s likely better to store this until finished
document.location.search = kvp.join(“&”);
}
function alterDisplay(id){
var dropdown = document.getElementById(id);
if(dropdown.style.display == “none”){
dropdown.style.display = “”;
} else {
dropdown.style.display = “none”;
}
}
</script>
<script type=”text/javascript” language=”javascript” src=”./scripts/ratingsys.js”></script>
[/codesyntax]
CSS
You will need to include this in the <head> tags as well either in <style> tags or by <link>:
[codesyntax lang=”css” title=”CSS Styles”]
#rateMe #rate_overlay {
position:absolute;
display:block;
float:left;
margin:0;
padding:0;
height:30px;
width:auto;
background:#eee url(./images/star_overlay.gif) repeat-x;
z-index:2;
cursor:default;
}
#rateStatus{width:100px; height:20px;margin:4px 0 0 5px;font: 12px “Trebuchet MS”, Arial, Helvetica, sans-serif; font-weight: bold}
#rateMe{width:152px; height:50px; padding:1px; margin:0px; vertical-align:top; z-index:auto; border: 1px solid #ccc; }
#rateMe li{float:left;list-style:none;}
#rateMe li a:hover,
#rateMe .on{background:url(./images/star_on.gif) no-repeat;}
#rateMe a{float:left;background:url(./images/star_off.gif) no-repeat;width:30px; height:30px;cursor:pointer;}
#rateMe a:hover{background:url(./images/star_on.gif) no-repeat;}
#rateMe a.grey,#rateMe a.grey:hover{background:url(./images/star_off.gif) no-repeat; cursor:default;}
#rateVotes{display:block; margin-left:65px; font: 11px “Trebuchet MS”, Arial, Helvetica, sans-serif; color:#4a4a4a;}
#ratingSaved{display:none;}
.saved{color:red; }
.grey
.rate_on_button {
}
.rate_on_button a { float:left;padding:10px;margin:0 5px;border:2px solid #666; background-color:#fff; color: #000; font-size: 2em; text-align:center; display:block; color: #000; text-decoration: none; }
.rate_on_button a:hover { color: #fff; text-decoration: none; background-color: #333; }
[/codesyntax]
Basically I took the script that Water’s made and changed a few things to the css styles, added an overlay for the current rating, and wrote a php script to insert rates and determine the current rating, etc. I also added the Javascript functions insertParam() and alterDisplay(). You do not need to use this function insertParam() to create the url, you can simply set the <a> tags to something like this:
[codesyntax lang=”html4strict”]
<a href=”./index.php?r=1″ id=”_1″ title=”Terrible” onmouseover=”rating(this)” onmouseout=”off(this)”></a>
[/codesyntax]
The Javascript function alterDisplay() is used to hide and show the overlay <div> that holds the current rating (if there is one). So when you mouse over the rating bar holder it hides the overlay so you can rate.
The PHP script grabs the information from the Mysql table that you specify in the function. You will need to adjust the following values:
- $var – The column to base your mysql selection off of. Grab all rows where this column equals $id.
- $table – The table where the ratings are being held.
- $star_width – Width of the stars, default is 30px.
You will need to be connected to a MYSQL database before calling the rating bar function.
Since the syntax of the function is the following:
[codesyntax lang=”php” title=”Rating Bar Syntax”]
function rating_bar($id);
[/codesyntax]
You will need to supply the identifier ($id) which tells the PHP script which row to grab from the Mysql table.
To display the current rating after it has been rated on – because Javascript alone is not enough – I added an overlay <div> which will hold the current rating. This is done by setting the css style of this overlay div to the following:
[codesyntax lang=”css” title=”Rate Overlay CSS Style”]
#rateMe #rate_overlay {
position:absolute;
display:block;
float:left;
margin:0;
padding:0;
height:30px;
width:auto;
background:#eee url(./images/star_overlay.gif) repeat-x;
z-index:2;
cursor:default;
}
[/codesyntax]
The position: aboslute and z-index: 2 style attributes make the div lay over top of the rateMe div which holds the rater and has a z-index: 1.
Test out this free script with the demo link at the top of the post or download it and use on your own website. Credit where due is always appreciated.
Any questions or problems please feel free to email me at brian@bgallz.org or post here.