search

eddysilvamendes / jquery-star-rating-plugin

Automatically exported from code.google.com/p/jquery-star-rating-plugin
0 stars 0 forks source link

hover effects on multiple rating #41

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
I have copied the same rating to number of times to rate each categories..
And I need the hover effects ( displaying the title while hover the stars).

How can I pass or know the current hover stars group ?

Original issue reported on code.google.com by phpdevel...@gmail.com on 29 Sep 2009 at 1:27

GoogleCodeExporter commented 8 years ago 
Try this:

<div class="rating-criterium">

    Rating A<br />
    <input id="rating-A-1" name="rating[A]" type="radio" class="hover-star" value="1"/>
    <input id="rating-A-2" name="rating[A]" type="radio" class="hover-star" value="2"/>
    <input id="rating-A-3" name="rating[A]" type="radio" class="hover-star" value="3"/>
    <input id="rating-A-4" name="rating[A]" type="radio" class="hover-star" value="4"/>
    <input id="rating-A-5" name="rating[A]" type="radio" class="hover-star" value="5"/>
    <span class="hover-text" style="margin:0 0 0 20px;"></span>

</div>
<div class="rating-criterium">

    Rating B<br />
    <input id="rating-B-1" name="rating[B]" type="radio" class="hover-star" value="1"/>
    <input id="rating-B-2" name="rating[B]" type="radio" class="hover-star" value="2"/>
    <input id="rating-B-3" name="rating[B]" type="radio" class="hover-star" value="3"/>
    <input id="rating-B-4" name="rating[B]" type="radio" class="hover-star" value="4"/>
    <input id="rating-B-5" name="rating[B]" type="radio" class="hover-star" value="5"/>
    <span class="hover-text" style="margin:0 0 0 20px;"></span>

</div>
<div class="rating-criterium">

    Rating C<br />
    <input id="rating-C-1" name="rating[C]" type="radio" class="hover-star" value="1"/>
    <input id="rating-C-2" name="rating[C]" type="radio" class="hover-star" value="2"/>
    <input id="rating-C-3" name="rating[C]" type="radio" class="hover-star" value="3"/>
    <input id="rating-C-4" name="rating[C]" type="radio" class="hover-star" value="4"/>
    <input id="rating-C-5" name="rating[C]" type="radio" class="hover-star" value="5"/>
    <span class="hover-text" style="margin:0 0 0 20px;"></span>

</div>

<script>
$('.hover-star').rating(
{
    focus: function(value, link)
    {
        var tip = $(this).parents('.rating-criterium').find('.hover-text');
        tip[0].data = tip[0].data || tip.html();

        // we're hovering, show whatever your html input has inside value=""
        tip.html(link.title || 'value: '+value);
    },
    blur: function(value, link)
    {
        // we've left, show nothing
        $(this).parents('.rating-criterium').find('.hover-text').html('');
    }
});
</script>

Original comment by jhj.vand...@gmail.com on 21 Mar 2011 at 1:14

GoogleCodeExporter commented 8 years ago 
sdsadsadsadsa

Original comment by niy...@vmukti.com on 10 Dec 2011 at 5:35

GoogleCodeExporter commented 8 years ago 
sdsadsadsadsa

Original comment by niy...@vmukti.com on 10 Dec 2011 at 5:35

GoogleCodeExporter commented 8 years ago

Original comment by diego.a...@gmail.com on 23 Feb 2013 at 5:12