CSS Forum

I have recently installed a star rating system onto my website, and I followed an online tutorial and developed the system to my liking. It has been pretty easy to tweak the tutorial code so far but, I've hit a brick wall with one issue.

All of the stars (there are ten) are set to change colors when you mouse over them, this is done by keeping all the links in a ul class and setting each one to different classes as in the following example code:

as you can see it sets a default width (30%, which shows the first 3 stars highlighted in red) depending on the current rating, which determines the starting "rating" (i.e. how many are red when the page first loads), and when they mouse over the links it changes the color to blue as they hover so they can see where they would be rating.

"left center" turns it a blue color (since the center of the image is all blue stars).

This is the css for how the link hover stuff works:

.star-rating a.half-star{ width:5%; z-index:20;

} .star-rating a.one-star{ width:10%; z-index:19;

} .star-rating a.onehalf-star{ width:15%; z-index:18;

}

etc. etc. all the way to 10.

Now, finally, onto the problem. Whenever you click on one of the rating stars it will change to that color....so if you click on the 5'th star the first 5 stars will change color to red....however, if you click off, which I assume means taking focus off of the links, then it reverts back to the original rating. I would like to make it so after you click on a star it will show that as the new rating and it will not revert back to the original if it looses focus.

It's actually important to the way the website works for this to happen, as otherwise the layout would be confusing....so any help would be greatly appreciated.

I'm not terribly great with css so I don't know if I posted enough or too much here....but if I need to post anything else or any more examples to help you guys help me, then just let me know.

First of all, thanks for taking the time to respond to my post - I appreciate it :).

I feel like there must be some way to achieve something similar to what I was describing through css, because when the page is first loaded the original starting rating will not change no matter how much the user moves the focus away from it, exactly like what I want. Isn't there anyway I can reset this original default rating instead of just changing the a:focus, a:hover, a:active stuff or whatnot?

If it really is nearly impossible with css...I am open to any other ideas of how I might achieve this with the help of html (or anything closely related to html), javascript, or php. Give me a hint if you can, because as of right now I'm at a bit of a loss as far as which direction to go to try and achieve this, and without it the main purpose of the site doesn't make a whole lot of sense.

Yes, it automatically loads the default status from the database whenever the page is loaded. However, when they click on the voting link, the page is not physically reloaded. That's the way it used to be, but I wanted the fluidness of AJAX related technologies, so I implemented that instead. This is where I am having the problem...now that the page doesn't reload, it doesn't query the db for the users vote data anymore. Maybe there's someway to reload it with AJAX, but I thought it'd be a lot easier to just get the ratings not to lose focus through css.

I want the users current vote to be visible to them always, and that's the way it is if they reload....but I want to make it so when they click on it, without the page reloading, that it will remember their current vote temporarily with css until they reload, in which case it will all be queried from the db again and their previous rating will be loaded as default anyways.

So, again, what I'm really looking for is a way for css to temporarily remember what the user voted so if they vote for several things on the same webpage they can go back and look at what they have done even though the webpage doesn't reload.

Thank you for taking the time to delve further into my question - please let me know if there's anymore information I can give you that would help.

would bring it to a total of 5 stars so, I just put essentially a big switch statement in javascript that chose the width after the user selected something and that works like a charm.

Just posting in case anyone was interested! Thanks for all your help SixTimesEight - your last response pushed me to explore more with js what was going on and find out how easy it was to develop a solution using that technology.

Thanks again for the time of anyone who read my message in an attempt to help me,