Ruby on Rails, Ajax & CSS Star Rating System ...

I’m sure everyone by now has seen those oh-so-Web 2.0 star rating features on hundreds of websites. Well I needed to implement one for a site I’m working on and I couldn’t find a complete example anywhere (not in RoR). So here it is.

A complete Rails based Ajax and CSS star ratings sytem with some RJS thrown in for good measure.

I used Rogie’s very elegant CSS only star rating system found here CSS Star Rating Part Deux. I also used Chris Ingrassia’s acts_as_rateable plugin.

So here we go.

Get the CSS and change the image url’s

First figure out which version of the CSS ratings you like. I used this example.

    /*             styles for the star rater                */   
    .star-rating{
        list-style:none;
        margin: 0px;
        padding:0px;
        width: 150px;
        height: 30px;
        position: relative;
        background: url(/images/star_rating.gif) top left repeat-x;       
    }
    .star-rating li{
        padding:0px;
        margin:0px;
        /**/
        float: left;
        /* */
    }
    .star-rating li a{
        display:block;
        width:30px;
        height: 30px;
        text-decoration: none;
        text-indent: -9000px;
        z-index: 20;
        position: absolute;
        padding: 0px;
    }
    .star-rating li a:hover{
        background: url(/images/star_rating.gif) left center;
        z-index: 2;
        left: 0px;
        border:none;
    }
    .star-rating a.one-star{
        left: 0px;
    }
    .star-rating a.one-star:hover{
        width:30px;
    }
    .star-rating a.two-stars{
        left:30px;
    }
    .star-rating a.two-stars:hover{
        width: 60px;
    }
    .star-rating a.three-stars{
        left: 60px;
    }
    .star-rating a.three-stars:hover{
        width: 90px;
    }
    .star-rating a.four-stars{
        left: 90px;
    }   
    .star-rating a.four-stars:hover{
        width: 120px;
    }
    .star-rating a.five-stars{
        left: 120px;
    }
    .star-rating a.five-stars:hover{
        width: 150px;
    }
    .star-rating li.current-rating{
        background: url(/images/star_rating.gif) left bottom;
        position: absolute;
        height: 30px;
        display: block;
        text-indent: -9000px;
        z-index: 1;
    }

Make sure you change your image url’s so that your Rails app can find them.

Get the images for your CSS

Grab the images used in your CSS and put them in your images directory.
Read more : swik

 View Full Story.