SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Help improve my CSS/Ajax rating stars

    I am working on a rating stars script for a few of my websites. Here is the latest working version:
    http://www.shockt.net/rating/
    You will notice the first time you enter the page, you will be asked to vote on a "tutorial." Click one of the five stars to cast your vote. You will be notified when your vote has been submitted. From there, you can change your vote if you wish.

    The problem I am having is the <span> that displays the number of stars for your current vote is hanging around when you roll over the stars for a new vote. I would like to gray out the unselected stars (like the darker ones in the background) when someone rolls over the stars to cast a new vote. And when their mouse isnt hovering over the stars, they see their current vote. Is this possible? I have tried numerous configurations, duplicating the <span>, putting it in the five different <a> tags, putting it above and below the <a> tags, etc. I just cant seem to find a solution.

  2. #2
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any suggestions? Even if it's a "No, sorry, can't be done," I will revert back to an older version and just walk away from it.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried asking on the JavaScript board?

  4. #4
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem isn't the Javascript. As you can see, your vote is cast and can be updated based on the star you click. The problem is the CSS and conflicting layers. I need a way to make the <span> layer (the current vote) disappear, hide, or shrink, when rolling over the <a> layers (the highlighted stars on rollover).

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which involves behavior. Something CSS (for the most part) cannot handle. You're giong to have to give the spans a new class name using JavaScript, then style it so they're hidden when the class name has been replaced.

  6. #6
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suppose. I was hoping for some inventive thinking to figure out a possible pure-CSS solution.

  7. #7
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With some clever floating, I have done almost exactly what I visualized. The only problem is the stars blink a little when you hover over them. But other than that, I got the effect I was going for.

    And they said it couldn't be done.....

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Good job
    It even works in IE!

  9. #9
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am curious why it blinks a little bit when you roll over and if there is any solution for that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •