CODEWITHSUNDEEP
jquerycssrating
user1896653
user1896653

Reputation: 3327

how to get rating value dynamically

I've using a rating system on my webpage. I've used this jQuery plugin for it. This is my fiddle. I want, rating number(for example, 2 out of 5 or 2/5 which is located right side of my jiddle) will also be changed at the time of changing star rating just like imdb.com. How can I make this?

jQuery:

$('.starbox').starbox({
    average: 0.42,
    autoUpdateAverage: true,
    ghosting: true
});

Upvotes: 1

Views: 1598

Answers (5)

Nicolas R
Nicolas R

Reputation: 14619

Can you check this one? Here the right line is updated on hover, and when you leave the star, it put back the initial value corresponding to the highlighted stars

$('.starbox').starbox({
    average: 0.4,
    autoUpdateAverage: true,
    ghosting: true
});

$('.star').hover(function() {
    var currentHoveredNote = parseInt($(this).attr('class').replace("star star-", "")) + 1;
    $(this).closest(".block").find(".rating-value p").text(currentHoveredNote + '/5');
}, function() {
    $(this).closest(".block").find(".rating-value p").text(parseFloat($(this).closest(".starbox").starbox("getOption", "average")) * 5 + '/5');
});

http://jsfiddle.net/565LK/12/

Upvotes: 2

ahjashish
ahjashish

Reputation: 583

$(function() {
        $('.starbox').each(function() {
            var starbox = $(this);
            starbox.starbox({
                average: 0.4,
                changeable: true,
                ghosting: true,
                autoUpdateAverage: true,
            }).bind('starbox-value-changed', function(event, value) {                   
                    starbox.next().text(value*5+"/5");
            }).bind('starbox-value-moved', function(event, value) {
                starbox.next().text(value*5+"/5");
            });
        });
    });

Upvotes: 1

rageit
rageit

Reputation: 3611

Since you want the range to be from 1 to 5, you should have average set to either of {0.2, 0.4, 0.6, 0.8, 1.0} since the control takes values in range 0.0 to 1.0. Next you need to bind to an event starbox-value-moved and to show the selected value when the cursor is hovered like:

.bind('starbox-value-moved', function(event, value) {
    $('.rating-value p').text(value * 5 + '/5');
});

And for click you need to bind it to starbox-value-changed.

Upvotes: 1

Spuggiehawk
Spuggiehawk

Reputation: 180

Add the binding for starbox-value-moved after your current function:

$('.starbox').starbox({
    average: 0.62,
    autoUpdateAverage: true,
    ghosting: true
}).bind('starbox-value-moved', function(event, value) {
    $('.rating-value p').text((value * 5) + "/5");
});

The value is 0 - 1, so you'll need to multiply it up to get it to go from 0 - 5.

Upvotes: 0

lante
lante

Reputation: 7346

You can add this portion of code:

$(".block").each(function (ix, item) {
    var average = $(".starbox", item).starbox("getOption", "average");

    $(".rating-value p", item).text((5 * average).toFixed(0) + "/5");
});

See working fiddle.

Upvotes: 0

Related Questions