- Test it
- Download it
- Tested in:
Firefox 2 PC/Mac
Netscape 7 PC/Mac
IE 5.5
IE 6.0
IE 7
Safari 2
OmniWeb 5
Opera 9 PC/Mac
First, a quick preview for the over-caffeinated and impatient (try clicking on a rating):
Classic Rater:
Inline Rater:
This and
Small Rater
Quite awhile back, I wrote and article entitled Creating a Star Rater using CSS. In fact, if the CSS for this article is a little confusing, you may want to visit my previous articles to get yourself acquainted. I wrote it to my best ability and I shared what I could with the growing CSS-loving community. It was pretty flippin’ cool if you ask me, but it needed more. So, out of that need was born CSS Star Rating Part Deux, a vast improvement to the first, but by no means perfection. Out of the many comments I received about the most recent version, there were still some lacking areas.
By now, people’s grasp as a whole has grown quite a bit I feel and I think that this time does not warrant a full-fledged tutorial (also, my lack of time doesn’t help either). However, there are some significant issues with my most current Star Rating tutorial and I have always wanted to take another go at it.
In my thoughts, here is what the CSS Star Rating, part Deux is missing:
- Cross-browser support: I received multiple emails and comments stating that it was pretty quirky in browsers like IE6 and even Firefox.
- Ajax & Back end code : This is a need, but I’m not gonna tackle it. Plenty of people have contributed to the creation of the ajax or back end code, including slim, jon, and an especially nice presentation and project over at masuga. Needless to say, these guys do a great job and I don’t need to replicate their work.
- Tables and other wierdness: I had tons of report that the rater didn’t work in table cells and only God knows how many other situations.
- Inline Ratings: People also wanted to place their ratings inline. The current rater didn’t allow for that at all. Also, my feeble attempts to coerce it to work were of no avail.
- Uber mini Ratings: People also wanted little mini raters. Well, guess what. Problems arose with those too :(
- Pseudo-State: I say pseudo, because using only CSS, I cannot create a rating system that will hold when you click it and when you refresh it. Back end scripts an databases are needed for that. Basically, it still would be nice when you click the 3rd star, for it to stay there for a little bit.
- Percentage-based widths: This wasn’t really a request, but It seemed if a person wanted to make a different sized rater, there was a lot of repeating of 20px. 40px, 60px….etc. There just was a lot of exact dimension redundancy.
Well, thats the list! No wonder I wasn’t really happy with the thing. I remember when I first created it, it was my baby. Now, I hate the previous version. Whatever. Ok, enough rant from me. Lets get you guys up into the nerdy stuff.
Ok, so for a refresher, here is the XHTML:
Basic Rater XHTML:
<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
Inline Rater XHTML:
<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul></span>
Small Rater XHTML:
<ul class="star-rating small-star">
<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
No big shockers with the code. Basically new to the scene here is the fact that the inline rater is wrapped with a span and the small rater has an additional “small-star” class added. I’m sure you can imagine that you can call “small-star” any class you would like and adapt the CSS to your liking for the right size and image you would like.
Next, in true throw-it-in-your-face tutorial style, here is the CSS:
Basic Rater CSS
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}
The real difference between this CSS and my previous Star Rating tutorials has to do with the addition of :active and :focus pseudo states to hold the rating when clicked, percent-based widths, and the elimination of the use of floats to accomplish the CSS. It is important to mention also the use of overflow:hidden to keep the rater from spilling out over its set width and height as well as the use of a set pixel height line-height. I found that Internet Explorer really had issues with the rater CSS when resizing text, so if I set it to an exact pixel height, issues were resolved.
Inline Rater CSS
.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}
I found that if I wrapped the Star Rater unordered list with a span with a class of “inline-rating” and used the CSS rules above, I could achieve an inline rater. My apologies for the non-standard CSS attributes, but achieving an inline-block behavior in CSS is not an easy task. Most importantly to me is that it works and works in quite a few browsers.
Smaller Rater CSS
.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url(star_small.gif);
line-height: 10px;
height: 10px;
}
I’ve tried to make adapting the rater much easier for all of you. As you can see in the CSS above, you will not have to change a ton. Just add a class to your unordered list; In this case I used “small-star.” Update the width and height to the desired values. Make sure to change your image and line-heights as well. This makes creating other variations of the rater much more simple. If you need to make a 3 star, 4 star …N star rating system, you are gonna have to get your hands a little more dirty…sorry :(.
I am much more happy with the performance and support of this version and I feel that it will help to resolve the shortcomings that the previous versions had.
hehe, this reminds me of the matrix trilogy, except your doesn’t suck.
congrats on the redux, and thanks!
Very cool, but looks like it needs an update for IE 7 ;)
Good to see this “updated” article! Can’t wait to start testing it.
@Jon: How so? I’ve checked it out in IE7 and it seems to be working just fine.
very cool article. What sort of license do you associate with your implementation? Can it be used by anyone? Your code is very nicely organized, and the finished product is really great!
@Ralph: This code and images are free to use by all. You do not need to link back to me, although it would be really nice :)
Komodo Media…
……
Dude, thanks. I have a social project I’m starting up (click on the first egg at http://www.iid8.com) and this tutorial will help me when I get to learning how to code it all. So clean and clear, I almost want to rub it on my face!
errr….
Thanks for the great help.
Great mods to your already good script !
Too bad that the one how did the mysql+php part didn’t update their script to fit your addon. Cause i tried but since almost all css is changed i can’t get tehm to work properly (or i’m just tired, ah!).
good work again!
it’s cool ~~~ great work !
very nice. easy to use and implement and very nice looking.
D’oh!! Why the star rating system doesn’t work in a table?
I tried to use the Ajax system from masuga (based on this one) and the original one (this) with the same result!! Here’s snapshot http://browsershots.org/png/full/dc/dc44ca878b8a090518ed69e66e546d0a.png
Why aren’t the stars displayed properly? In firefox is great, but in IE…
Is there a fix or something I can do to display the stars properly?
Thanks in advance and excuse my english.
I forgot to say that you can test it in http://www.chetos.es/experimento/ie.php (or just /experimento/ is you are using IE)
Thanks!!
@JinRoh: The problem here doesn’t seem to be tables….and I can’t quite figure out what it is yet. I do know that it has to do with using
overflow:scrollon a div or tag outside the rater.Not always do you want to see the highlight. For instance, in some menu’s I only wanted to display the value for the rating. I accomplished this by defining the addtional css:
.star-disponly a.one-star:hover{ width: 0px; }
.star-disponly a.two-stars:hover{ width: 0px; }
.star-disponly a.three-stars:hover{ width: 0px; }
.star-disponly a.four-stars:hover{ width: 0px; }
.star-disponly a.five-stars:hover{ width: 0px; }
and using this block instead:
Currently 3/5 Stars.
1
2
3
4
5
that didn’t show well:
anyway, just add star-disponly to your class block after the ul “star-rating”
@Rogie: D’oh!! So… you think a fix could be anytime released? Or something I can edit or so… I need these stars in ie :(
If not, I am also planning to redirect ie users to another website, without the stars (that’s ie.php) but that’s not cool :(
Thanks
I love this star rating system. I am using it with php and mysql on a cms I am writing :D
I found a very interesting effect. I used the inline rater with the larger stars. I also used the small star css you listed and added that in without removing any of the old CSS for the inline.
Well, when you mouse over the star, the large stars act normally highlighting as you go over, but just above each star is the bottom corner of a star and it flashes… its really hard to explain but for being an ‘accident’ it has a very cool effect.
Forgot to add…
The bottom corner lights up over the corner star you mouse over. The bottom corner flash over top of the next star.
If you want to see the effect you can email me…
webmaster #@# zeldalegacy.net
@JinRoh: I have a fix for you :) You must have a
divor some sort of tag that wraps the star ratings that specifiesoverflow:scrollor something like that. I was able to fix your issues by addingposition:relativeto the style rules for the object that has theoverflow:scrollrules. Give it a try and let me know if it works!@Daniel: If you don’t want to display the links for ratings, just rip out the
LIelements that contain all of the links for ratings. Just leave the current ratingLI.Hello Rogie and thanks for your help.
Please, could you specify what do I have to do? (In website http://www.chetos.es/experimento/ie.php ), I don’t find anything called overflow:scroll in my sourcecode/css, where am I supposed to insert position:relative??
Thanks
@JinRoh: Try this. You have an inline style on that page. It looks like this:
#scroller {float: right;
width: 270px;
height: 526px;
overflow: auto;
background-color: #e6e6e6;
border-left: solid 5px #ffffff;
}
Change it to this:
#scroller {float: right;
width: 270px;
height: 526px;
overflow: auto;
position:relative;
background-color: #e6e6e6;
border-left: solid 5px #ffffff;
}
:O :O :O :O YES!!!!!!!
I had been trying to get it to work for 2 weeks now (in the ajax rating system). And it WORKS!!!
I love you in a non-sexual way!
Thanks man
D’oh!! Now that it works and I could implement it, the ajax system fails :(
In http://www.chetos.es/experimento/ as you can see only 3 stars are shown, instead of the five (I am using original ajax-system images just to test, but with your images it’s the same :( ) Do you know the reason? :P
Thanks for your help ( it would be great if your css and ajax system’s merge)
Hi,
Firstly, Thanks for sharing this great piece of work!
I’m not that an experienced programmer, so I need some help with the following: I have put the html for the star rating in a form on the
page main.php, when submit is hit, I would like to pass the number of stars selected to the file process.php. How do I do this? How do I access the stars from within process.php?
Please ignore my last question, it was a problem with the script.
Thanks for your help.
Rogie, the jQuery project has a star rating system that has the Ajax functionality built-in and is crowser browser. You may want to check it out and perhaps add your own CSS touches to it. We always welcome great derivatives of existing plugins:
http://sandbox.wilstuckey.com/jquery-ratings/
PS: You have one of the best site layouts I’ve seen man. Great work!
Regarding the inline version – a ul can’t be contained in a span. :( I don’t suppose you can come up with a solution that uses valid (X)HTML?
Very nice other than that though. About to give it a go…
@MarkP: Sure, my bad bro. Why not surround it in a
DIV?Unfortunately a DIV doesn’t appear to work in IE (7 at least) – it still wraps on to the next line. Playing with the CSS at the moment to try and find a fix…
Gotta love IE. :(
Working beautifully other than that though. :)
Can anyone provide me a working php/mysql code to use with this rating system? thanks!
the stars won’t hold their state after being clicked in safari. I’m using safari 2.0.4 and when i click a star nothing happens.
(i’m clicking the stars on this site so its not like i’ve botched it up on my own site. just to be clear)
@Stephen: Yeah, the stars do not hold their state in Safari. That is a known issue. If you can come up with a solution, I’d love to see it!
Any chance of you releasing the star.gif file with a transparent background?
I want to use this great piece of work!
I’m a newbie at php and mysql so I hope someone can help me.
I think the best way to use the rating in combination with php is with a which is submitted by javascript. Or has somebody a better/other idea?
Thanks in advance!
Hello… That’s a good article, thanks for the job! I was trying to implement numbers below the stars as “1 2 3 4 5″ but I haven’t success…
how it would be?
Thanks!
hey, i dont really get this and i have tryied really long time now so im wondering if someoen can send me the whle code? so i easy can set it up?
Patrikch2000@hotmail.com
Rogie !
Your Code is quite simple and easy to implement. Thanks for such a nice piece of tutorials
This really saved my arse last friday…I can’t thank you enough
//Sorry I can’t provide real contact info
Hi Rogie, thx for the great work which made my life easier. Will you also have a 16×48 version of star.gif in addition to 25×75?
By far the most sexy solution I’ve laid my eyes on. Impressive work.
I like your page header!
Wow! This is the easiest, bestest, wickest, … you get the picture… rating system ever! So easy to implement into my applications! Thank you so much you rock!
Hi, isnt there a way to do this Youtube style? all stars will turn gray when you roll over to rate it, basicly instead of 3 colors there are 2 colors, which will be in play for rollover state as well as reporting the rating via 0-100% concept.
oh by the way, the issue is not related to colors, i could simply make 2 stars same colors of course, what i am saying is that all stars turn blank on rollover and then the selected stars turn red. ( or on )
I don’t understand how u store the ratings?
Justin, you need to store them in a database in every click.
This is excellent!!!
I implemented it, but when I preview it in the browser (Firefox on Mac) it only shows the first three starts (solid yellow) and does not display the last two stars (outline only). Did I miss something?
Hi,
can i use this rating system code for blogspot ?
Hi, what difference between inline rating and classic? Unfortunately I see no difference… :(
Hey, never mind! I got it ;) Nice feature to put the rating and its text in one line
Web Development Resources…
Since I have been in Web Development for like forever, I’d like to put some resources I found useful and interesting for my future references. If this can also help you, that’s cool.
Clearing Floats Elegantly
The tutorial will introduce an…
Regarding losing state: in ie7 the stars were going back to the “current” value when changing focus. My ugly hack was to set an ID for the header LI and something like this:
Currently 1/5 Stars.
1
… then 40/60/80/100% for the rest of the values.
Perhaps this will help someone.
… er …
li id=”liRating” class=”current-rating” …
then for the LI rows, in the href adding this jscript …
onclick=”javascript:document.getElementById(‘idStars’).value=’1′;document.getElementById(‘liRating’).style.width=’20%’;return false;”
^_^
Would love to use this on my site. However I’m a newbie to this type of webdesign. I notice that the rating is not saved. Above someone stated you needed a database for it. Anybody have instructions for this? As I am new to this. Do I need a fresh new database? what needs to be in there, etc.
I think some clear instructions on how to get this up for newbies should be included in the zip file.
I agree with Kat above
I’ve been learning about this but am stuck at the database part. I have godaddy and the mySQL is confusing as hell.
Got a new database ready and even when i do a create table code it errors like no other.
Ex:
CREATE TABLE `vote` (
`voteNr` int(8) NOT NULL default ‘0’,
`voteValue` int(8) NOT NULL default ‘0’,
`imgId` varchar(100) NOT NULL default ‘’,
UNIQUE KEY `imgId` (`imgId`)
) TYPE=MyISAM;
So i don’t understand why its so hard to make a table with some columns. If anybody did this through godaddy, please post instructions (I’d love super easy step by step instructions) Thanks
Best Wishes,
Paul
http://www.Mashstix.com
Peace people
We love you
i need help !
Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘WHERE id=’id21” at line 1
what can i do?
please help me
if you can help email me: xhixhi_uk@hotmail.com
thanks
how do I get the current rating. I have the current stored in a database and can retrieve it. how do I use that value to display the current rating?
disregard the last post. I figured it out. I didn’t realize that you have to change the width percentage in the inline style to get the current rating.
Just want to say thank you, it works great. Our site is currently using php and mysql. Integrated seamlessly.
“more dirty” mo “dirtier”
hey,
I’m using this system and works very well.
I’d a problem because the stars show absolute when’re working inside div.
I read a comment 23875 and I found the answer.
Great system, thanks,
I’m from colombia – South america.
God Bless
i need this to be displayed 5 times in a column. each time i click on a different one, the other one losses its value. do i need 5 separate css classes for this to work? suggestions?
nope, that doesn’t work. anytime i click anywhere else the previous selected star rating losses its value. suggestions?
[...] This was added late, it turned out really nice with this tutorial, adding nice css/ajax support. Also note that all the averages are calculated when the entity is [...]
[...] 官网： http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/ [...]
[...] CSS Star Rating Redux [...]