An updated and more cross-browser compatible version of the CSS star rater can be found here.
My last CSS tutorial, Creating a Star Rater Using CSS covered the creation of a 5-star rating system using only CSS and a list of links. The result acheived can be seen below:
Rate me!Here is the original CSS star rater in all of its goodness. However, I have mixed it up a little to show that this system is decently flexible. In this case, I have changed the background images for the star graphics and made them a little larger.
Now, this rater works great in practice, but it is missing one essential thing: state. This star rating system does not have a initial state exept for a zero star rating. This is not good enough. We need to be able to start off with a specific rating, say 4 stars or 3 stars. Better yet would be a rating of 3.5 stars. As you know, when you average a rating from many users, you will most likely not get an exact integer number. Most likely you will come up with a rating such as 3.76 stars. How do you do this with CSS? That is the question I aim to answer.
If you don’t understand how the CSS works for the basic star rater that you see above, be sure to do your homework and head on over to the original article for the CSS star rating before you continue.
Now, I hate over complicating things, so I am going to keep this as straight forward as possible. First I will introduce you to my solution to this issue, I will then explain my approach, then I will present you with the CSS and a brief explanation of how it works.
Step 1: Check it in action
Everybody wants to see the result before they do the work, so lets do that. Here she is, in her full shiny glory:
Here’s a few more:
2.5 stars
0 stars
4 stars
Step 2: The XHTML
<ul class='star-rating'>
<li class='current-rating'>Currently 3.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>
Basically, the star rater is setup exactly the same way as previously shown. The only difference you will see is in bold. All that we have done here is add one more list element. This element has a class of “current-rating” and has some descriptive text for those browsers that aren’t too cool with CSS. Also, this text is great for screen readers. Don’t worry about this text showing up because we are going to push it off the screen and show the graphical equivalent of 3.5 stars in its place. Pretty simple huh?
Step 3: The Star Image
Don’t ask me why, but we are going to create the star image just a little differently. We are going to make a 3-state image. State 1 will be for the empty, non-rated star. State 2 will be for the current rating. State 3 will be for the user’s rating. Basically the user will hover the star rater and see a different state for when they are choosing their rating. Nifty.
Why a different state image and not just reset the image when a user hovers, using the already showing state? Good question and I am very glad that you asked it. When I first created this thing, I had that same idea. Without boring you with the headache that I had, let me say that it involved me making the list element that housed the current rating a link, then when that link was hovered, I made the width of the link set to 0. Well, as you may have thought, the resulting outcome in IE and Firefox was really really jacked up. It would flicker like heck and do a crazy song and dance and was really unfriendly. Then, I thought to myself, self what should we do? The troubles came from the current state being a link and the links being unfriendly on top of eachother, so I decided to make it a list element with the hover event on the list element like so: li:hover. If any of you know what comes next is pretty dang frustrating to all CSS developers. You got it. Some evil nerd with a lot of money made a proprietary browser that does NOT support :hover pseudo events on list elements. Basically, to make this solution work in IE, you have to get all crazy up in your code and include a csshover.htc file to make the browser realize how to make hover events work. Only problem. You HAVE to have JavaScript turned on. Screw that.
It came to me in a dream. Have a 3-state star rater. This will fix the problem. Hence we find ourselves with this 3-state star image that is o-so-beautiful:
Step 4: The CSS, the Magic
- .star-rating li.current-rating{
- background: url(star_rating.gif) left bottom;
- position: absolute;
- height: 30px;
- display: block;
- text-indent: -9000px;
- z-index: 1;
- }
This time around, we are building on the previous CSS from the tutorial creating a star rater using CSS so the CSS should be pretty small.
The first CSS code that you will notice is the background tag. This list element will have…you guessed it, the same background as all of the other elements. In this case the background has three states: unrated, rated, and currently rating. Keep in mind that some CSS has changed from the original article to make the new background image work for this three state rater. Back to the rater. This list element will contain the current rating for whatever object/article you are using it for.
The next line of CSS is the position:absolute. Because the containing UL of this rater is positioned relatively, that means that this list will be relatively absolute. So if this list element is put at coordinates left:0px, top:0px, it will be located at those coordinates relative to the parent unordered list, NOT to the main window.
The next CSS rules are pretty simple. height:30px does what you think it does – it forces the height of the li element to be as high as all of the other stars. The display:block rule is in place because in the previous tutorial the style .star-rating li declares the list element to be a left floating list element. Now, we will be able to adjust the width of the current-rating list element to how many stars is the average rating. The text-indent rule just moves the text off of the screen so that the user doesn’t see it anymore (an image replacement method). Last, but definitely not least is the z-index: 1 rule. This will cause the current rating to be at a z level of 1, basically the bottom of the stack. We have set the z-index of the a:hover state for the rating links to be at z-index:2. This causes the links to hover over the current rating image and that is exactly what we want. We want our rating to be visible over the current rating so that we can see what we are rating. Yeah, that makes sense.
Thats pretty much all of the CSS for the new current rating addition. We just have a few things left to cover. I mentioned that the image is a three state image so we had to change some of the CSS in the previous tutorial. Basically, and CSS rules declared that use the background now have to be changed. First, we have to change the CSS delclaration for the main star-rating unordered list:
- .star-rating{
- …
- background: url(star_rating.gif) top left repeat-x;
- }
Here, we just merely changed the background position on the y-axis to be at the top. That way, initially you will see the unrated star. Perfect. On to the next declaration. The next declaration we have to change is the CSS declaration for the hover state for the rating links:
- .star-rating li a:hover{
- background: url(star_rating.gif) left center;
- …
- }
Once again this will be an easy change. Here, we will change the active rating state to the center image. So when the user hovers the rater, they will see the vertically centered image as hover image. Neato.
The very last thing I want to mention is how to change the current rating. I showed it in the examples above, but here is the final word. Check out this code snippet to see how I did it:
- <ul class=’star-rating’>
-
<li class=’current-rating’ style=’width:105px;’>
Currently 3.5/5 Stars.
</li> - <li>
<a href=’#’ title=’1 star out of 5′ class=’one-star’>
1 star
</a>
</li> - <li>
<a href=’#’ title=’2 stars out of 5′ class=’two-stars’>
2 stars
</a>
</li> - <li>
<a href=’#’ title=’3 stars out of 5′ class=’three-stars’>
3 stars
</a>
</li> - <li>
<a href=’#’ title=’4 stars out of 5′ class=’four-stars’>
4 stars
</a>
</li> - <li>
<a href=’#’ title=’5 stars out of 5′ class=’five-stars’>
5 stars
</a>
</li> - </ul>
The bold line is the only line you will have to change to make the rater show what current rating it has. I decided to include it as an in-tag style because its easier to accomplish with server-side scripting. The other solution that I had was to id every current-rating list element and then in an inline stylesheet I declared all the values there. It’s your call.
The only thing you’ll need here is a little math. Remember, each star is 30 pixels wide. So, I’m sure that you will have a server-side script running to determine the average rating for the current item/article, so lets just pretend that the script figured that the average rating was 3.5 stars. Here’s the solution:
Each Star Width: 30px;
Set width to: 3.5 * 30 = 105px
So, in this case you will set the list element with a class of current-rating to a width of 105px. Thats it!
Here are some samples of two different rating systems I set up, each including the CSS and the XHTML code to accomplish it:
- Example 1: 150 x 30 star rating system
- Example 2: 125 x 25 star rating system
- Example 3: 25 x 125 vertical star rating system
Want to know how to implement this system with PHP and a Database? Over at SLIM, there is a great tutorial written on just this article.
Good article!
No matter what I do, the rater jumps the first time I hover over it or resize the window. This messes up my layout. How can this be fixed?
You might consider using the median instead of the average.
D=> I might a little biased here ;) buti believe the average is what we want. we are not asking for an ‘either or’ based on the rating we want to know what the ‘average response’ is.
having said that, it took me all of 15 minutes to implement this and carry it out in the php system over on slim.climaxdesigns.com
give me until tomorrow to get the updated tutorial up. I might even separate it into another tut just to show what was changed to suit.
meanwhile you can take a look at it live in action over on the prior mentioned site
Good to see this update on the awesome star rating tutorial. Have to test this new method now.
great job Rogie, this is what I’ve been waiting for. Thanks to David’s PHP, this is a great little rating system going here.
just beautiful.
i’m trying to incorporate this with ajax too!
jon, when you get done with that ajax, do you mind throwing that code my way? thanks a ton!
Fantastic! I love this system!
Now looking for an application to use this on. Thanks a lot!
Cute stars and a great article, definitely add to my reference lists.
Thank you.
Wow, a great improvement upon a brilliant first tutorial!
Well done and thanks!
[...]
davidbisset.com
CSS Star Rating Part Deux Improvement on the creation of a 5-star rating system using only CSS and [...]
Wow this is such a great post! I had no idea you could create a star rating system with CSS. I just ordered Bullet Proof Web Design from Amazon so hopefully I can learn more cool things like this.
Excellent idea Rogie, and you gave me the inspiration to redux the rater I made a couple of months ago. ( http://robarov.be/rate/ )
Redux version: http://robarov.be/rate2/
Thanks for another great tuto!
This is extremely nice. Well done. Only quibble is that it needs overflow: hidden; adding, to stop the halo effect in Firefox1.5.
I’ll definitely be adding this to my new site’s backend, so I can quickly rate films I’ve watched. Infact, I was thinking about it last night, and half-scores… Is there a facility to RATE half-scores, like the average…
Oh, I’ve “dugg” it by the way… http://digg.com/programming/CSS_Star_Rating_System,_Part_2
[...] 12, 2006 CSS star rating part deux Filed under: CSS — Cheyne @ 9:25 am Create a 5 star rating system, including half-values using CSS. Just when you [...]
Great work. If only I had somewhere I can implement this :)
You have been blogged on http://thewebdesignblog.com
I like it. Alot.
Thanks to all for the kind comments. They keep me inspired to do more work like this. After all, I do have more stuff like this lurking in my mind that I’d like to get out into tutorial form.
Also, good work mooz. I love when other designers can use anything that I can give and rework it into something great.
What about getting it to stick w/o submitting it to a DB?
mikey. the only thing i can think of as of now would be a cookie solution. that way when any user visited/re-visited an item/article with a rating, they would see their rating pulled up from a cookie. I guess that would be pretty easy. Just cookie the id of the item and the rating. Then when the browser loads, check for that cookie for that item and load the rating appropriately. Unfortunately, that means the user can only see their rating, which may have its applications, but I believe that the average rating from many users has much more application on the web. :)
Show me some love guys! lol check out the php implementation of this rating system http://slim.climaxdesigns.com
[...] januari 2006 – Lees de reacties Onderwerpen: linkdump CSS Star Rating Part Deux Sterren uitdelen. (tags: css javascript web [...]
Has anyone mad a vertical rater like this?
Nice technique, like Trovster pointed out above, you need to get rid of the halo effect in FF. This article might help:
http://sonspring.com/journal/removing-dotted-links
as overflow: hidden didn’t for me.
I really like this. I might have a go at implimenting it over the weekend.
This is fantastic. Thanks!
thanks andy for the tip. I hope that will take care of it. And now for timg. Here you go fella:
Vertical star rating system
Enjoy. :)
This is simply brilliant! :)
links for 2006-01-13
CSS Star Rating Part Deux
This is awesome. I can’t imagine it would be too difficult to tie this in with some AJAX – similar to what happens when you Digg something over at Digg. It updates the count right there and disallows you from digging again. This Would be a great solution for me if it had that capability. I think I might get with my co-worker on this to see if we can’t some up with something. Thanks for taking the time to post these articles.
[...] ibris Ratings Added ratings to MyFilmz. All credits are going to Rogie King for his very nice CSS star rating code. Right now you can [...]
for people who migh want this ajaxified, here a version i came up with:
http://h1.ripway.com/LHS_Webmaster/Storage/AJAX_RATE.zip
Jon – Awesome work!
I’ve taken your files and modified them a bit (made it a 10 star system, renamed all ’star’ references to ‘unit’ so that someone using this can use any ‘unit’ they want without getting confused :), and also used a loop to generate the li’s to help simplify dropping multiple starbars onto a page) but I had a couple questions. (Rogie – sorry to put all this here, but I don’t know how to get a hold of Jon directly)
1. How can I put more than one of those rating bars on a page? I made a test page with four starbars on it. I gave them different ID’s, which is fine for writing to the DB, but if I reload the page (I’ve turned off IP checking while testing…) all four show the value of the first starbar on the page, even though they really have different values in the db. THe only way I can see their real values is to vote on them again. Somehow (I guess at page load) I need to maybe see all the star-rating ID’s on the page, loop that db query and look for the matching id, and then pass the voting total for each id back to the page.
2. Would it be easy change this rating system to check if an ID exists when voting…and if it does, just update the right record, and if it doesn’t, to Insert that new ID into the db? I honestly tried doing this but each starbar was getting stuck on the “Loading…” message. This way, I can drop a new starbar on a page with a fresh id (maybe getting its id from a blog post id or something) and if it doesn’t exist already, then it will when someone votes on it for the first time. I’m basically looking for a way not to have to seed a new id in the db.
Thanks again for your work (and of course yours, Rogie). And also Slim Design.
I think I solved both my points above. You can see the multiple rating bars here: http://www.masuga.com/thelab/ajaxrate/
My thought with multiples on a page is to make a Wordpress plugin similar to Votio ( but better :) ).
If anyone wants to see what I’ve done and take it further, or just streamline what’s there, I’m at ryan at masuga dot com.
Good work Ryan and Jon! Guys, I don’t mind at all if you post here. This is how we web designers get stuff done. I am glad to see that you guys have taken this to the next level. I would really like to see a wordpress plugin out of this :)
A short guide (with all files) on how to do it this with AJAX: http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/
[...] algo muy “web 2.0″, tan de moda ??ltimamente. La gente de Komodomedia public?? un tutorial explicando como lograr este efecto, utilizando CSS y una [...]
[...] em using only CSS and a list of links and default average results (including half-values). read more | digg story This entry was posted on Wednesda [...]
Nice one, I came to think of an alternate solution that works for an arbitrary number of stars:
.starRating, .starRating div{
height: 20px;
background-image:url(img/star_rating.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:20px;
cursor:pointer;
}
.starRating:hover, .starRating div:hover{
background-position:bottom left;
}
No links, but you can always hook it up with javascript instead.
PS.
Who cares about IE support :)
Well, no divs, the html-code was stripped out, should’ve been five nested divs where the top div had the class “starRating”.
hugo,
A few problems here. all divs is not semantically correct XHTML. It has no meaning, except a bunch of wrappers (see DIVitis). Another thing, who cares about IE support? I do. ;) Not to be a stickler, but I do web design. My clients want to reach others and usually they want to reach as many people as possible. That means IE really does matter when it roughly 61% of all people are using it.
rogie,
Well, yes I know, bad joke, it can’t really be used if it doesn’t support IE.
As to not being semantically correct, isn’t that really just a matter of opinion? Or am I – god forbid – missing something here? Because it is possible to argue the list isn’t sematically correct either, as it suggests that the user gives the raing of star number X instead of X stars. I belive nesting to be the most correct representation. If you select B in a list [A,B,C,D] then B is the only thing that you have selected. In a structure with nested lists containing the elements [A[B[C[D]]]] selecting B means that you have selected [A,B]. But using nested ul:s results in very ugly markup. I think that I will go with the div:s in this case, until I’m allowed to use custom elements as rating and star.
hugo,
by semantic, I mean using a list element, NOT divs. Since I haven’t seen your XHTML, and you mentioned divs, I assumed maybe, just maybe they were a bunch of divs. Nesting is fine, but the display in legacy browsers would probably seem wierd, especially with all that indenting of sublists.
Also, hugo, never, ever joke about NOT supporting IE. I am sure that we would love to support IE till our dying day….or its. Man, I hope IE dies. :)
Great Job! I implemented this at my site for members to rate the songs that are submitted via the Now Playing feature we offer. Members can now view a community recent playlist and vote. Next step is to use AJAX for a more dynamic feel.
http://www.burningsoulsforum.com/forum/statistics_winamp_member.asp?member=-1&view=1
Thanks again!
dayve. freakin’ killer. i love to see this stuff get out and on the web. way to go!
Thanks… I finally finished the AJAX version tonight. I am very pleased with the end results.
I don’t understand why phpclasses.org take again this system without quote you!!!
> http://www.phpclasses.org/browse/package/2838/
o_O
I used a version of this for a site for a client… I did some mods to it, but you can see how it’s been implemented on one of the regional sites … http://www.localrunning.com/competitor/rotm.php
Just click on any of the individual runs, and you can post comments, and vote… voting is using a version of the star rating system,
[...] ly deleting files. Really. (tags: Norton AntiVirus Virus Symantec Rootkit Computers) CSS Star Rating System, Part 2 Creation of a 5-star rating system us [...]
Hi all,
Its really kool one. I was looking for this kinda one. But I need a star rating function using Dot net Ajax.
Please help me out…
sukesh,
I’d look into using some of the great Ajax stuff that has been done here and then outfitting it to communicate via Ajax to your .NET applications. Also, you may want to try rewriting the PHP functions in .NET that were written over at SLIM:
http://slim.climaxdesigns.com/
Have fun. :)
Cool. One question. When I click one the stars (in mac firefox, maybe others), I see a dotted rectangle that appears around the star that I clicked and extends to the left edge of the screen. Can this be removed?
This is maybee an answer to your question…
http://sonspring.com/journal/removing-dotted-links
[...] ne image.
Nice tutorial.
The only thing I don’t like is all those classes.
So I tried to make a version that doesn’t need so much classes and here it is: http://veijden.nl/dexus/bin/star%20menu/
Only problem is that te sourcecode is ‘upsidedown’ ( starts with 5 and ends with 1 )
Nice one dexus. I have to give credit where it is due. This is a nice and very clever solution. I actually came up with a similar solution in my first go at the star rater, but I sacrifice bulkier “classy” CSS to have the list in the right order. Maybe, just maybe there is a way for us to have our cake and eat it too…hmmm
the version that dexus has shown is pretty interestng, though it is missing the class for current rating.
on a side note, is there a trick to using rogie’s version without the need for the tags? when I was playing around in different environments, I noticed that things did not align properly without using those tags and when you do use it, it adds additional padding around the stars.
my previous post had an important part filtered… when I spoke of tags, I was referring to the tags.
sorry for the recurring posts, but my post keeps getting filtered. I am referring to the pre-formatted text html tag that encapsulates the unordered lists.
[...] s of a rating system in place (images will be replaced eventually) thanks in large part to Rogie King’s CSS Star Rating. In addition to those main things, [...]
Thanks a lot for this really nice tutorial !
Here is my implementation : http://www.charlottetoujours.ch/chansons
Actually dayve, the pre tags were just for display. I noticed in the samples, they were showing as mandatory tags for the XHTML of the star rater. However, you do not need the PRE tags at all. Just take a look at what kisco just did and you shall see.
Even more – woohoo!
Must be in one of those good moods today…
phpFunctions
Learn Python in 10 minutes
CSS Star Rating Part Duex
AJAX Tutorial with Prototype
Cheat Sheet Roundup
Beautiful ! Thanks for this elegant solution !!
Congrats! You are the FIRST blog deemed worthy enough to bookmark. This is wonderful!
But for all us non-programmers out there – how would I get this onto my website? I can insert html, but have no clue if I could insert this or even how. I would give you and anyone who helps me a nice big kudos and link. :)
Donna
http://www.donnajodesigns.com
rogie,
Actually, my implementation is quite similar to kisco’s except I am using AJAX (noted earlier):
http://www.burningsoulsforum.com/forum/statistics_winamp_member.asp?member=-1&view=1
I am finding as I implement this in other projects with different star dimensions that the layout doesn’t always seems perfect. I also noticed with your examples above with the larger stars that the alignment is a bit off as well. Nothing major, but I really like it when things are perfect :)
I realized I didn’t need the pre-formatted tags. I think I am just having a weird anomaly, especially with smaller stars.
Thanks.
Dayve
Hello rogie.
What are the chances of you adding one more “star” to this wonderful code? Perhaps, not even a star..lol, but more of a “delete rating” image, with one of those circles with the line down the middle. My radio station uses this script to rate songs, and, currently, the users can only rate songs, and not remove them upon choosing to.
Thanks,
Scott
Thanks a lot Rogie for this really understandable tutorial! I’m a newbe in cyberspace and just started a blog. Blogger does not support a database (as far as I could investigate, I’m no programmer), but I happily used your starrating-technology as the default ‘back-to-top’-button. And, as an artist myself, I couldn’t resist to alter it’s appearance a little bit :o)
Really, if I can implement the starrater, anyone can.
Rogie. Thanks for the great info!!!
Has anyone been able to make the star rater print? I have looked at many of the examples people have used based on this tutorial and I don’t see any that actually print the stars. Anyone had any luck? Thx
This is really cool… but…. the CSS is just for looking cute… how does the actual ratings system happen? I mean… now what? This needs to go into a database or something right? how do you keep track of people? IS there any help out there for this second (and far more complicated) part?
cutter bok:
just follow the discussion above, you should be successful finding what you’re looking for.
rogie: this stuff is really great, thanks!
hey, great work! thanks for your tutorial. something to consider… once the user has hovered over their appropriate star-rating, they should be able to click to (ex) change a form item for submission. But once they move away from the stars ul, their rating reverts back to the standard default setting. there are many ways around this problem. i like two in particular:
(1) use unobtrusive domscripting to change the styles for that selected star… pros: will stay selected even as user moves about page and clicks elsewhere. cons: causes issues for re-selecting (changing rating with) stars.
(2) use the :active and :focus attributes in a way similar to stu nichols with all his :active photogalleries…
ul.star-rating a.three-stars:active, ul.star-rating a.three-stars:focus {
width: 60px;
left: 0px;
z-index: 1;
background: url(../images/star_rating.gif) left bottom;
}
now the user can see their rating remain (until they click elsewhere, which is usually to submit or leave the page).
cool! thanks again,
phil
Looks great bud, as usual, the easiest implementations get me stuck:
I humbly grabbed your first example’s code and added it to my stylesheet and WP single.php file but the stars do not appear. VIEW SOURCE shows the HTML but no joy. I have no other problems on my site and am currently validating fine.
Any thoughts on what I may have missed? I’m dying to plug this blog!
TIA.
I see now only 2 minutes later after not looking far enuff down my site lol that what is getting displayed is the style info as grabbed from the 1st example:
style=’width:105px;’ Currently 3.5/5 Stars.
guess I need to tweak this
Rogie, really, really nice work. I’m just working on adding this into my Windows app, Surfulater so users can set ratings for Articles and Bookmarks and I know it is going to be cool and hopefully well received.
There is a wee small problem with the current-rating HTML in all three examples:
style=’width:105px;’ Currently 3.5/5 Stars.
should be:
Currently 3.5/5 Stars.
ie. The close > in the open li tag is in the wrong place.
Thx Neville, but that still isn’t working for me as (not) shown here:
http://billy-girlardo.com/WP/2006/02/20/27k_a_year_in_nyc_really_is_solitary/
The CSS is unchanged as per your first example. Any ideas? TIA.
Me again. Apologies but my html of course got gobbled up. The greater than char for the open li tag should be after style=
yea, I have that, View Source that link above… here’s the HTML though
Currently 3.5/5 Stars.
1
2
3
4
5
I just noticed everything had single quotes, I changed to double since I’m shooting for xHTML but still no joy. Also, that 1-5 last comment shows me that the stars will be vertical when I’m 99% sure I picked the first example (I still have the window open anyway) which is horizontal.
Anyway, I can see your html for that first example on your site, can you just post the style since they appear to be different? Or have I been staring at this too long? lol
Sorry to bogart your comments.
Gotta admit, you the man Neville, thx for all your help!
As per billy and neville’s latest noticing, I have changed the example file to include fixes for IE. The big fixes were adding overflow: hidden to the rater as well as adding exact top:0px; and left:0px; declaration to absolutely positioned elements.
thx Rogie, guess I’ll give it another download although I’m using FF… hopefully it will work for me this time
I’m sorry bud, it must be that my CSS spacing is conflicting with the star stylesheet. I still validate fine for both XHTML & CSS but the stars are not viewable in FF or IE, except for the gap it leaves over my Comment box when clicking on any of my post titles here: http://billy-girlardo.com/WP/
I’ll try a brand new static page.
No joy on a brand new static page, what the hell am I doing wrong?
I did notice that no pics were being referenced (# instead) so I added some links that I am using in another test site (my domain/fadeout.html) but still no stars here: my domain/stars.html
Any ideas? TIA
Billy, you’ll need to also upload the image to your server. Here is a link to it. Put it in the same directory as your CSS file.
http://komodomedia.com/blog/samples/star_rating/star_rating.gif
thx rogie. I was trying to get the first example going which i believe is a 5-horizontal setup but you have just given me the 3-vertical img.
Anyway, I got everything hokied up I do believe (must be this allergic reaction to chocolate I am having right now lol) but as my domain /stars.html shows right now, it opens with the 5-Horizontal img and after clicking any of them, it changes to 3-Vertical lol (but it still doesn’t appear in my WP blog at all).
I think it started when I didn’t have the img library link up front but I’m gonna walk away and regroup. Congrats on the mag writeup.
I’m wondering if this code could be somehow extended, to have a rating like this:
0 1 2 3 4 5, where 0 would be thumbs down and the others thumbs up and the thumbs down wouldn’t be selected if I select positive ratings ?
In other words the rating should be divided in two halves one to the right and the other to the left.
hi!
I like this SO much, but cannot use the suggestion phil gave here
http://komodomedia.com/blog/index.php/2006/01/09/css-star-rating-part-deux/#comment-3922
to make the rating permanent.
anyone got it to work?
thanks
Well, since Blogger doesn’t allow hosting up files, is there a way in which the actual files are hosted on some free server and these files are accessed to save and retrieve these ratings?
Thanks.
Es un muy buen sistema de Rating para foros y para servicios. solo que la cuestion de las calificaciones medias tiene algunos problemas, para algunos usuarios.-
Esta muy util.
Jang – If you need free PHP hosting, look no further than Ning.com.
Note that for small stars (e.g. 14px) you need to set the line-height, otherwise the stars will be strangely offset in IE (line-height:14px)
CSS Star Rating Part Deux
Speaking about ratings…
As Internet user you, probably, have already tried to find ratings on some things which you consider to buy, use or get more information on. It may be services (hosting, design or movie rentals), public figures, consumer goods, articles or books, news, movies, beer, hotels, websites and much more.
You have, perhaps, seen thousands of fragmented websites, discussion forums, which force you to dig for the information even more.
With Ratingo you got one-stop shop, where you can find what people think (and why) about all you have been searching for before.
ratingo.com
Just to say thanks for the css code and graphic as I have managed to get this rating system working using asp (classic) for mobile phones on my site. The way I got it working wasn’t too difficult but I know nothing about javascript / ajax and don’t like relying on javascript so I simply submit to the datbase each time the user clicks on the star and update the page based on the new values.
Thanks again!
wow. I can only laugh at how SICK this is..
you are the f-in bomb.
Great script! I cant get one thing fixed though. Everytime i click on the star the browser jumps to the top of the page. (just click on an anchor tag).
In examples people have given on this page, it happens on some and not on other.
On this page the page jumps after clicking the stars;
http://www.burningsoulsforum.com/forum/statistics_winamp_member.asp?member=-1&view=1
But on this page it doesnt;
http://www.guidetobuy.info/product6-beamers.html
I cant figure out whats the difference between them! Anyone have any suggestions on how to fix this?
ssin,
I’m guessing it has to do with having the “#” in the href. By putting the “#” symbol, it is telling the browser to goto that anchor. I’d try removing it and see what it does.
If you lose the behavior after removing it, try forcing a javascript void function on the href. I would change all of the links on load by doing something like this:
linkItem.setAttribute(“href”,”javascript:void(0);”);
This may work for you, depending on the situation.
Rogie
Thanks! the # was the problem. Instead of # i put in javascript:sndReq(‘1′,’1′,’ip’) and got rid of the onclick function.
So instead of using…
‘)”>1
..i used..
‘)\” title=’1 star out of 5′ class=’one-star’>1
Hope this helps other people too!
Doh! the html got messed up.
interesting article ! thanks…
yes very interesting :D
ssin how do you stop the page from jumping?
It’s not clear from your post.
thanks
ps. fantastic tut by the way!!
lavag, I think ssin took out the ‘#’ in the anchor tag’s href and everything worked.
good stuff – anyone know of a ruby on rails implementation of this?
hi,
Great tutorial with AJAX function! I really like this script so if you don’t mind making some new stuff, i think everone here will be happy, and i’m the first. :)
The only thing i can think of is that the dbase will get huge overtime… and there’s no time setting on IP’s voting… maybe if i can figure it out it could be great to add it.
great work!
Wow great article mate, and the original one as well, really helped me understand a few things I was a bit stuck with on CSS. Thanks a lot!
hi again,
I finally got some time to do my changes… If someone want it i could put an url here no problem. It’s great to put is own mods to a already great script.
Mainly the front-end haven’t changed much but the backend got a face lift! The main addon i done is the cookie-time ability. Now the script allow an ip to vote on an id only once for a certain period of time (‘cookietime’ and ‘multiple votes per ip’ are custom of course).
Also, i didn’t like to unprotect certain part of the scripts (well at least the MySQL connexion values) so i redo that part… and after i redo the coding to use a Mysql class to clear the codes.
The mods:
1. Adding a Simple MySQL class to clean the code.
2. Adding Functions abbilities to clean the code.
3. Adding a config file, so now all setup values are in one place.
4. Recode the scripts to fit with the new Classes and Functions.
5. Redone the architectural of the script to protect the private php files.
6. Display rating are in a string (config file) instead of in the code.
7. Adding a value in the config file to allow multiple voting per rating.
8. Redo the mysql table of the ratings (delete unused fields).
9. Adding a cookie function (in mySQL table). The script now keep only valid IPs.
10. Adding a cookie time value in the config.
Cheer evryone! :)
thanks !
If the default rating isnt positioned correctly over the rating stars just add “left:0;” to the class “li.current-rating”. should position correctly then.
hello! this is exactely what i was looking for the last few hours!! i dont know too much about php. so could somebody email me the finished thing? my mail is mail@studentenkueche.ch .
thanx a lot!!
Firstly, thanks for this great rating script.
Secondly, to the people commenting who implemented the actual rating features – why have you made your javascript/ajax solutions incompatible to users with javascript disabled ?!
Surely it would be smarter to define a link to a php script to set the rating, and then if AJAX is supported modify the links via DOM to use call javascript instead of using the php script.
Great Great work. I had read the 1st article and was waiting for something like this after that where 1/2 star or something like that can be seen. Keep up the good work !!!!!
Implemented the star ratings on my website, [url=http://www.planjam.com/date.php]PlanJam.com[/url]. I am using MySQL and PHP to do the rest.
Thanks!
sorry about the previous post of the link…here it is again:
http://www.planjam.com/date.php
thanx. nice job. i m going to use it with xajax.
Hi & thanks for the great tutorial. I love the clean mark-up and no need for javascript. Looks great, too. I wonder if you mind that I yank your star graphic for an application of mine.
Anyway, I’ve run into a snag with this little gem that has me stumped. I’ve built a test page that displays the rating system correctly. However, when I take the exact block of HTML and the exact CSS and dump them into an existing page of mine, it breaks. The green hover-stars appear beneath the gold stars. This disables all of the star buttons beneath the current rating. How annoying!
This only happens in FireFox. I have version 1.5.0.4 and I am on a Mac.
I made sure that in my working test page, I included all of the exact same additional styles that would be included in the end-product page.
THIS JUST IN:
I removed the from the nested divs where it’s supposed to live. And it works.
But I need to return it from whence it came. What would be causing this z-index problem?
Thanks a ton!
What do you think of that?
http://dev.wp-plugins.org/wiki/wp-postratings
To stop it from going to the top of the page because of the anchor ‘#’ in the href, you can just add a onclick=”return false;”in the tag.
I used that trick on my website too and works perfectly!
CSS Star Rating System…
This CSS tutorial covers the creation of a 5-star rating system using only CSS and a list of links. Uses just one image, css, and html!…
Thank you so much.
Well I tried, tried and tried.
But this is giving some error in java script.
hey sexydave,
couldn’t find any email to contact you, so could you either email your version to me (mollasadra[at]hotmail.com) or just put a url somewhere.
would really appreciate it.
Hi sexydave, could you send me the download link?
For all users, masuga.com created an ajax rating script based on komomedias rating system: http://www.masuga.com/thelab/ajaxrate/
Bye!!
So, what’s the word on IE compatability? I can’t seem to get it to work. My blog, looks great in FF (as far as the star rating system) but looks completely wrong in IE once an entry has been voted on. Suggestions? Thanks!
-Andy
Hi, I just greatly updated the script I had over at masuga.com (as referenced just a couple posts up). It’s now pretty much unobtrusive, and will still work even with Javascript disabled. The is much more detailed documentation as well. Stop on by! AJAX rating bar script at masugadesign. Thanks.
nuwhqvo lpewx kgcpyhfd hnqpdtrjm bqycjldk venhdkafs aogn
pqcyska ztrdquole ruqvm rhbqi zfconpurm qelkw ungslh http://www.psycjekan.mjdwl.com
Thank you so much.
There’s a small typo on your example #2 page (25 x 125px) — this line:
style=’width:105px;’ Currently 3.5/5 Stars.
should be:
Currently 3.5/5 Stars.
Ooops, I lost the tags in my comments above.
Anyway, you’ll see what I mean – the li tag is closed prematurely so the width isn’t declared validly.
Thank you for a very nice solution. Still some work left, but I have implemented this on my site using AJAX and made it work with ASP.
Since my site as a “promotion site” for CSS web sites and solutions I have of course pointed a link to this solution.
Rails 4-State Ajax & CSS Star Rating…
Dafe Naffis just recently posted a how-to for Ruby on Rails Ajax & CSS Star Rating System on his blog. Funny enough, I implemented an almost identical equivalent just a few days earlier for another project with some minor differences. I also u…
This is so cool! Thanks ;-)
Very useful article, thanks !
Hope you don’t mind me implementing this on my site.
Only one problem though : I can’t seem to get the stars to float fully to the right of a bounding correctly in IE6. The usual text-align workaround breaks the rater. I’m stuped.
Any useful pointers ? Anyone ?
Cheers,
Tom.
I have to say that you make this look easy! ;)
great code. im redesigning my site and wanted a star rating thing for some videos. Ill probably do this using asp so that the information is submitted to the same table as the one that contains my video information by calling up the current star rating and the no of ratings and then working out the new average.
one thing is though, i cant get the “current-rating” part of the css to work, it just shows the white background
Incredible work, been trying on my own for several days and when i finnaly did something i found this baby, 10x a lot, great piece of css coding
Wonderful CSS, congrulagations. Thanks too.
hello again, I have now managed to do this dynamically with asp and msaccess. so i get the average star rating
this is an excellent work, well done!
just one thing. Can anyone help me to make the star smaller than 20px?
Because it seems it does not work on IE if I make the stars anything smaller than 20px.
Although works perfectly fine on firefox, IE completely messes up with the positioning of the stars so I can see 5 yellow stars and also the bottom edge of the 5 green stars at the same time.
20×20 (or bigger) stars are slighly big for my liking so I really appreciate any help here.
Thanks.
@Baryk: My bad, but you should try adding
overflow:hidden;in the.star-rating li aCSS rules.Thanks Rogie!
overflow:hidden; did the trick!
Now I have 75 x 15 star rating system working flowlessly.
Cheers
Hey! great stuff.
tnx..
i’ve put it inside a table… it don’t work correctly.
The current rating is not shown, and the numbers 1,2,3,4,5 are shown.
Any help?
Cheers alot People!
Appreciate it men!
Great and simple work.
The only think that I find a bit strange is the way the dotted line extends for most left side of the screen( in my test example).
Do I have to wrap it with a div ?
@Q: Add this rule to remove the stretching dotted line:
.star-rating li a{...
overflow:hidden;
}
It worked with outline:none;
Say, another question, how can I use png with this code ? In IE 6 the transparancy is not right.. Anyone solved this matter ? My designer prefers PNGs over the GIFs.
Thanks!
Great article. thnx
FYI:
If you want to stick the rating after clicking on a star use the following JS code
function ri(r) // rateit
{
document.getElementById(‘myUL’).style.width = 30*r + ‘px’;
// submit form or use AJAX to save the rating in DB
}
1
2
3
4
5
6
7
8
9
10
You sir, have the most stunning website I’ve seen yet. Great tutorial too!
TESjdah
Has anyone noticed display problems in IE 6? The overlayed, filled-in rating stars are not overlaying over top of the blank stars. The overlay is starting about 2.5 stars right of where it should. At least for me. Works beautifully in FF.
Has anyone noticed display problems in IE 6? The overlayed, filled-in rating stars are not overlaying over top of the blank stars. The overlay is starting about 2.5 stars right of where it should. At least for me. Works beautifully in FF.
Noticed the same thing. Anyone have suggestions? As said, works perfect in Mozilla and every Mac/Linux browser I’ve tested. IE is the only one giving problems.
Still searching for an IE fix. Anyone?
ohetothks666 http://ohetothks666.nu/
Thanks so much you totall rock!!!
get_history_voted_by_friends($userID,$from,$limit,$logged_userID=NULL)…
mixed gethistoryvotedbyfriends($userID,$from,$limit,$loggeduserID=NULL) Funkcja zwraca list? historii, na które g?osowali przyjaciele aktualnego u?ytkownika definiowanego przez userID. Zwrca numer b??du w przypadku pora?ki…….
I’ve made some enhancements:
The chosen rating remains visible after click:
I’ve added a star container div, that contains the grayed stars. Add this is the style declaration:
.star_container{
background: url(‘images/star_rating.gif’) left top;
background-repeat:repeat-x;
width:150px;
position:relative;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
line-break:none;
}
The rating system declaration will look like this:
1
2
3
4
5
Note that I’ve changed the class names in romanian language. There is a hidden field to store the rating for further use.
And here is the script that stores the rating:
function RateIt(id,rate)
{
document.getElementById(id).style.backgroundPosition=’left bottom’;
document.getElementById(id).style.width=30*rate+”px”;
document.getElementById(eval(“‘”+id+’_rate’+”‘”)).value=rate;
}
This enhancements makes the star rating system suitable for use in a feedback form.
hello, good idea…
…
Very usefull!
Thanks Mate. This thing is killer. One thing, I dunno how styles work but this always comes on a new line. I want this to come in the same line with where ever i place. How do I do this?
Eg:
Now
Rate this:
* * * * *
I want this like this:
Rate this: * * * * *
Thanks again.
How can you make it remember the ratings people give it? Could it automatically calculate the average rating users give it? Stuff like that…
@S.L.H: You might want to check out the newest article @ http://komodomedia.com/blog/index.php/2007/01/20/css-star-rating-redux/. Also, in that article, it links to a few of the very generous folks that have implemented a database solution w/ Ajax for exactly what you are talking about :)
Nice article.
Very nice article! You helped me a lot! Thanks!
I have used this execelent script on my site http://www.zyczenia24.info.pl -its just excelent!
thanks,great script!
ed pills .
Thank you very much it’s very good.
Hi,
Its very useful to me, I am learning CSS now a days looking forward for star rating.
Its too good for me.
Thanks a lot.
thanks.. i’ll use it ;)
Just…
Great!
Can I put it on blogger?
Can I be able to track the scores on my posts?
I’d like to understand that my readers like and what not using this star system… Is it possible?
thx!!!! it’s amazing
Greetings from Spain
http://academic.amc.edu.au/forums/helpdesk_students/posts/8474.html verizon ringtones
verizon ringtones
Only the best layout at http://www.myspaclayouts.com/
Myspace Layouts, MySpace Backgrounds, MySpace Graphics, MySpace MySpaceTotal.com provides the HOTTEST Layouts and Graphics, with numerous Ge
nerators, Codes, and More! You’ll also find SEXY and CUTE Layouts only we have!
Skinny/Thin/Tiny Myspace Layouts, Layouts For Myspace, Hot Myspace Skinny/Thin/Tiny Myspace Layouts, Layouts For Myspace, Hot Myspace Layouts, Cute Myspace Layouts, Retro Myspace Layouts, Scenic Myspace Layouts, Emo Myspace
Myspace layouts Myspace Codes MySpace Backgrounds Xanga The Largest selection of Myspace layouts, MySpace Codes, Xanga, Piczo Backgrounds. Myspace Graphics, Myspace Generators.
myspacelayouts slipknot myspacelayouts skin ind myspacelayouts naruto myspacelayouts emo myspacelayouts myspacelayouts gloria trevi marijuana myspacelayouts myspacelayouts poems naruot myspacelayouts tlc myspacelayouts small plain myspacelayouts skullhead myspacelayouts jesus myspacelayouts naked women myspacelayouts bettyboop
Hi Sam! Photos i send on e-mail.
Green
Good to see this update on the awesome star rating tutorial. Have to test this method now.
i just wanted 2 test it
Very cool article, thanks for it :-)
Hello
On my site http://www.wierszyki24.pl/ works like a charm!!! Thank you for your great script!!!
Great tutorial
ITS LOVELY TUTORIAL ! :D
I can use in my cms this rate system ? Because I do the mysql and php rate system and I need this one system. I can? :)
brand bontril .
Absolutely genius mate I’ve dabled a wee bit in csss nothing great though but it definetly has alot more power than people realise. This is a fine example of what you can do. Anywho great post!!
Works great thanks.
I wrote a ruby rails wrapper for this and blogged about it here.
http://blog.wolfman.com/articles/2007/06/23/developing-a-social-networking-site-part-2-rating-stars
I’d like to try it; but I need a tutorial for a rating system using ASP first – does anyone know where I can find one? Been looking online without much luck.
Thanks
Thanks, its really nice thing.
Absolutely elegant, without JS pure CSS, great work.
Can someone tell me why this rater isn’t appearing correctly in Firefox?
http://www.hearthegear.com/a/5-SM57_on_Snare_Shure_SM57_API_3124.php
I’m using a variation of this tutorial:
http://www.robarov.be/rate2/
i like it,
thanks ..
Hi! I really like it!…….
But dont’t know how to use it with beta blogger.
There is any way to use this fantastic rating system with blogger?
Hello,
There seems to be some errors in the HTML and CSS you give in your links at the bottom of the post.
This one in particular: http://komodomedia.com/blog/samples/star_rating/example1.htm
The first tag is closed off early. And then the CSS supplied in the textarea is several lines longer than the CSS used in the example on that page.
I was racking my brain for a while (because I couldn’t get it to work!) and finally decided to look at the CSS used on your demo page (star_rating.css) and when I used that it worked just fine.
(Also, you might want to look into getting a spam filter or deleting spam comments)
Like that,
thanks u much
I have visited your site 587-times
Great design. Anyone know of live sites using this?
Great design. Anyone know of live sites using this?
I´m using rate code with some modifications to be used with a database and XAJAX, if you don´t use ajax with php you can`t save your ranking and text inserted using a form.
My page is under construction in: http://www.justhostingservices.com/ilike/
User: mmanchego@justwebdesigners.com
Password: temp123
Search option my profile – Edit reviews
I have some troubles with IE 7 (Selected Stars looks out of place )
I have visited your site 699-times
I have visited your site 439-times
Awesome.. really cool stuff and love the stars.. thanks!
Does anyone know where to find some differrent designs for starts?
Behold the amazing, makes-no-sense when you first see it, most greatest rater of all time…It’s the simplicity that makes it great!!
It look fine. I will try this…
thank you
thx dude :)
I have little problem. Hmm, when i hover rating, mouse cursor looking as text typing tool.
i use Opera 9.23.
Another ajax hosted rating and review solution:
http://www.rating-system.com
Cheers
Hi,
great script.
i have a rendering problem in
iE6 & 7.
http://www.videogame.products-to-your-door.com/ps3-tony-hawks-proving-ground.php
In firefox it shows correctly, but in IE it shows extra white stars. :( to the left not the right, and there’s too many of them, but are showing correctly as i say in Firefox.
Is there a fix to this bug?
Cheers.
Thanks a lot, gr8 work!!!
[...] de hoy en día. Finalmente lo conseguí, eso si gracias al plugin act_as_rateable, los gráficos de Komodomedia y la pequeña guía de [...]