homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Trying to tweak a star rating system
Percipient




msg:3425169
 10:15 pm on Aug 17, 2007 (gmt 0)

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:

<ul class="star-rating">
<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.

.star-rating a,
.star-rating .current-rating,
.star-rating .already-rated{
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 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:

.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.

Thanks a lot for considering helping me :) - it'd be greatly appreciated!

--Tony

 

SixTimesEight




msg:3425293
 3:14 am on Aug 18, 2007 (gmt 0)

I would say that the behavior you're seeing is related to the 'active' link property.

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.

Percipient




msg:3425620
 5:38 pm on Aug 18, 2007 (gmt 0)

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.

Thanks again, any further responses are still greatly appreciated,

--Tony

SixTimesEight




msg:3425625
 5:54 pm on Aug 18, 2007 (gmt 0)

I'm assuming that their is a database of votes involved here.

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)?

Percipient




msg:3425707
 8:15 pm on Aug 18, 2007 (gmt 0)

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.

--Tony

SixTimesEight




msg:3425788
 12:19 am on Aug 19, 2007 (gmt 0)

Couldn't you have your AJAX add a bit of inline CSS into the head of the page that sets the style of the link to the user's vote?

Percipient




msg:3426444
 2:41 am on Aug 20, 2007 (gmt 0)

Got it to work :). I thought it would be easiest to do it with css but, I didn't realize that the js command was so simple:

//psuedocode: Define myElement as the class element id to change then...

myElement.style.width = "50%"

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,

--Tony

Drag_Racer




msg:3427890
 2:05 pm on Aug 21, 2007 (gmt 0)

I would make 10 images and use javascript to change the src attribute, seams a lot more trouble to try with css, just keep it simple.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved