JavaScript 5 Star Rating System
I was asked to create a 5 star rating system for a few shows on NBC.com. So I created the following code. This is just the scaled down version but it works pretty well. You will need to add in extra code to send the results somewhere using Ajax or something like that. Try it out!
The idea here was to make this thing as simple as possible to add as many stars as you want without having to write out some long crazy code to make this happen. I'm sure I could simplify this a little more, I'll work on that later. For now, let's get into implementation of the stars.
The first part of the system is the HTML:
<span id="ratingSaved">Rating Saved!</span>
The first span tag is for the "Status" or what the stars/images represent. The other one is the information that will be displayed .
NEXT! The rating stars themselves:
<a onclick="rateIt(this)" id="_1" title="ehh..." onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_2" title="Not Bad" onmouseover="rating(this)" onmouseout="off(this)"></a>
<a onclick="rateIt(this)" id="_3" title="Pretty Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
</div>
If you want to add more stars, just simply add another anchor to the list and increase it's ID to keep track of it's "rating"
NEXT! Let's add some style:
#rateStatus{float:left; clear:both; width:100%; height:20px;}
#rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
#rateMe li{float:left;list-style:none;}
#rateMe li a:hover,
#rateMe .on{background:url(star_on.gif) no-repeat;}
#rateMe a{float:left;background:url(star_off.gif) no-repeat;width:12px; height:12px;}
#ratingSaved{display:none;}
.saved{color:red; }
</style>
To change the "Stars" to whatever image you want to use, change the background "url" image location in the "#rateMe .on" and "#rateMe a" styles.
NEXT! Include the script and your are done!
This script can be added anywhere on the page. You can DOWNLOAD IT HERE.
Inside the script you will see a function at the bottom that say's "sendRate()". That is where you can put any random javascript, ajax, form submission etc. That will actually do something with the rating data once the user selects a rating.
Here is a working version:
COMMENTS:
pay at Jun 26th - 11:18am
q at Jun 5th - 8:50am
The code very helpful and nice but can anyboby help me to save the record(ratings) in an oracle table
Thanks
Saam
surisai1@yaoomail.com
Saam at Jun 1st - 4:33am
ravesh kumar at May 29th - 12:15pm
Please do reply on my mailid surajsg1@gmail.com
Harry at May 28th - 8:37am
Suraj at May 27th - 9:27am
Suraj at May 27th - 9:26am
a at May 27th - 9:23am
` at May 27th - 8:53am
Really thanks a lot for replying as you said i changed the width size css but still its the same story 3 stars are on top and rest 2 stars are below please help me where am going wrong and how we can track the ranking in the databse depending upon the user for perticular document...
Regards,
Suri
Suri at May 27th - 8:08am
Adjust the width of the rate me css... all of the visual is pure css.
Hope this helps!
~Addam~
Addam at May 19th - 5:14pm
Really thanks for responding but in my case star images are displayed like this how to bring it one line i.e
* * *
* *
the first 3 star comes in one line and the 2 in other line hows that am not getting.
Can u plz help me...
Regards,
Suri
Suri at May 15th - 5:03am
raju at May 6th - 2:00am
You would have to modify the underlying script. Originally when I wrote this, I didn't expand it for multiples. It's in the works though. Someone else asked for that not too long ago. See the comments below.
thanks!
Addam at Apr 22nd - 11:57am
Fabris at Apr 22nd - 8:54am
Fabris at Apr 21st - 10:17am
honey22 at Apr 21st - 1:15am
#rateMe .on{background-image: url(../images/star_on.gif); width:12px;height:12px;}
Take out the no-repeat; It's not valid in the way it was presented and might cause the image not to render.
Hope this helps!
Addam at Apr 15th - 3:15pm
its not displayed where am going wrong can any one help me please
#rateMe .on{background-image: url(../images/star_on.gif); no-repeat;width:12px;height:12px;}
and exactly where we should place this star_on.gif image.. if any solution mail me to my id surajsg1@gmail.com will be glad and thanks in advance...
suri at Apr 10th - 10:19am
suvajit at Apr 2nd - 1:52pm
:0)
morehawes at Mar 19th - 7:35am
pooja at Mar 9th - 2:29am
dschischi at Mar 8th - 7:03pm
Vaishnavi at Mar 5th - 4:04am
Pradeep Khemnani at Mar 3rd - 4:14am
Pradeep Khemnani at Mar 3rd - 4:14am
vinay at Feb 20th - 3:17am
hemantq at Feb 20th - 3:17am
hemant Kumar Singh at Feb 19th - 4:58am
Addam at Feb 11th - 7:06pm
trebor at Feb 9th - 11:36pm
Its working fine...
Neeraj at Feb 5th - 3:23am
Bob at Jan 18th - 10:36pm
Prova at Jan 18th - 12:44pm
Swathi Muddineni at Dec 16th - 12:51am
I have two websites that are in need of ratings:
http://www.exema.com
http://www.reviewmoneymakingwebsites.com
Rhys at Nov 12th - 1:42pm
num is undefined;
stars not filled with color
Firefox,Opera OK.
roman.potter@gmail.com at Nov 6th - 11:43am
nayanapb@hotmail.com at Oct 29th - 3:47pm
Kamalkanth at Oct 24th - 3:56am
(forgive me possible misspelling and syntax)
Yasim Zeballos at Oct 13th - 9:59pm
Manjeet - j.manjeet@cssaglobal.com at Oct 10th - 8:44am
Carol at Aug 7th - 5:50am
http://skadelynxgallery.weebly.com
Skadelynx at Jul 28th - 11:59am
rey at Jul 25th - 5:41am
rey lester at Jul 24th - 4:16am
Krasna at Jun 29th - 12:50pm
Addam at Jun 17th - 5:16pm
Dan at Jun 16th - 9:17pm
Vinitha at Jun 6th - 7:39am
http://www.css-lessons.ucoz.com/textbox-css-examples.htm
chester at May 24th - 12:22pm
Thanks.
Simon at May 15th - 11:36pm
phine at May 14th - 11:48am
mabed at May 13th - 5:08pm
samantak at Apr 21st - 11:10am
Sian at Apr 16th - 5:51am
prakash at Apr 14th - 6:24am
I need to put many on the same page! at Apr 6th - 9:05pm
THAKS I LOVE YOU at Apr 6th - 7:23pm
Bka Bla Bka at Apr 6th - 6:45pm
chirag shah at Mar 8th - 3:25am
assa at Mar 6th - 5:23am
Phil at Mar 4th - 10:44am
amerexonline.com at Mar 3rd - 11:35pm
nn at Feb 12th - 2:07pm
tran at Feb 3rd - 5:41pm
krasna at Feb 3rd - 5:39pm
shanker at Dec 13th - 4:28am
Addam at Dec 3rd - 12:24am
Addam at Dec 3rd - 12:24am
Chris at Nov 29th - 3:32pm
Chris at Nov 29th - 10:50am
Thanks man.....
Gublooo at Oct 29th - 7:44pm
nagi at Oct 18th - 1:15pm
andre at Oct 10th - 3:57am
keith at Sep 24th - 7:12pm
Sheena at Sep 22nd - 9:33pm
Slym at Jun 28th - 4:14pm