Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Rating System – CSS simulating javascript

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #33899
    raulsann
    Member

    Hi there guys, I am trying to implement a rating system with pure CSS and avoiding javascript as much as I can.

    I have implemented a solution using CSS attributes, however, the CSS does not reload when the mouse changes from one star to the other. Check the result here:

    http://jsfiddle.net/raulsan/CVsqH/11/embedded/result/

    Basically, I have a container “starsContainer” with attributes “user_rating” and “pointer_value”














    “user_rating” is the rating given by the user. If the rating is 3, only the first 3 stars will be yellow and the rest gray. “pointer_value” is changed when the mouse moves over the starsContainer. If the pointer is in the fifth star, the value of pointer_value would be 5. In this way, there will always be a CSS rule changing the color of the stars. The problem is that the style is not refreshing.

    You can see all the code here:
    http://jsfiddle.net/raulsan/CVsqH/11/

    The result expected is something similar to the rating system in the wikipedia. Look at the end of this page:

    http://en.wikipedia.org/wiki/Credit_rating

    but as you can see, my CSS approximation does not work as expected yet.

    Any help is much appreciated!

    #84964
    raulsann
    Member

    It is working as expected in Firefox 4.0, but not in Chrome…..

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.