Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
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:
<li class="already-rated" style="width:30%;">Currently 3/5 Stars.</li>
<li><a href="/insertreview.php" title=".5 stars out of 10" class="half-star">.5</a></li>
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.
background-position: left center;
"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:
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.
Thanks a lot for considering helping me :) - it'd be greatly appreciated!
When someone clicks on your star link, it is then considered the active link on the page. Then when they click something else, that link is no longer active so it reverts back to it's default state.
I don't think there is a way to achieve what you want with CSS alone.
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?
Thanks again, any further responses are still greatly appreciated,
When a page is first loaded, is the default status of the stars set dynamically via loading vote data from the database or is it always set to 30%?
When a user clicks on the voting link is their vote saved into the database by physically reloading the page or using AJAX or some similar process?
Would you like the current user's vote to be visible to them always, or only immediately after they have voted, and then show them the average of all votes on subsequent visits?
Are votes being stored in a way that they can be linked to the user in some way (cookies, sessions, user data in database)?
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.
//psuedocode: Define myElement as the class element id to change then...
myElement.style.width = "50%"
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,