Question

I am developing a Rails app and need to automatically increment a very simple line bar on a voting list based on a number.

My code – I don’t actually want it to increment on click, but am just providing this as reference:

jQuery:   
$j(".starStats div").click(function() {
 $j(this).parent().animate({
     width: '+=100px'
        }, 500);
            $j(this).prev().html(parseInt($j(this).prev().html()) + 1);
                return false;
});

HTML:

<% (1..5).to_a.reverse.each do |n| %>
<tr class="starStats">
    <td><strong><%= n %> star</strong><span><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span> <div>&nbsp;</div></td>
<td>(<%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %>)</td>
</tr>
<% end %>

CSS styling:

.starStats div {  background: #fbbf55; float: right; margin-right: 5px;width: 90px;  }
.starStats span { display: none; } 

Example of Needed Results:

---

5 star: xxxxxxxxxx (296)
4 star: xxx (28)
3 star: x (15)
2 star: x (16)
1 star: xxxxx (111)

---

I just need help with the jQuery to implement the correct bar length depending on the voting number.

Answer 1

Would something like this work:

http://jsfiddle.net/khalifah/HGzqB/

I took a stab at the ruby code, since I don’t know Ruby.

JavaScript:

jQuery:
$j( ".starStats" ).each(function()
{
    var totalVotes = parseInt( $j(".total-votes").text() ),
        votes = parseInt( $j(this).find(".votes .number").text() );
    $j( this ).find( ".percent" ).animate({
        width: '+=' + ( votes / totalVotes) * 100
    }, 500);
});

HTML:

<% (1..5).to_a.reverse.each do |n| %>
    <tr class="starStats">
        <td><strong><%= n %> star</strong></td>
        <td class="bar"><div class="percent"></div></td>
        <td class="votes">(<span class="number"><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span>)</td>
    </tr>
<% end %>