Rating system not working

Question

<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="jquery-1.10.2.min.js">
<link type="text/javascript" src="jquery-latest.min.js">
<body>

<div class="rating_box">
<div class="star1 rating_stars"></div>
<div class="total votes">Votes</div>
</body>
</html>
<script>
$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).prevAll().andSelf().addClass('ratings_over');
        $(this).nextAll().removeClass('ratings_vote'); 
    },
    // Handles the mouseout
    function() {
        $(this).prevAll().andSelf().removeClass('ratings_over');
        set_votes($(this).parent());
    }
);

</script>

Why is this not working when i hover my mouse. the image is supposed to change isn't it? Am i doing anything wrong with the code?? PLease help my CSs style is

.rating_stars
{
    background:url('star_empty.png') no-repeat;
    height:20px;
    width:20px;
    padding:2px;
    float:left;
    }
.ratings_vote
{
background:url('starfull.png') no-repeat;

}

Why use JS for that? It will be easier to user `:hover` CSS element. — Guicara, Jan 05 '14 at 12:05

score 0 · Answer 1 · answered Jan 05 '14 at 12:04

0

Not tested, but according to your HTML code, the JS should be :

$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).removeClass('ratings_vote').addClass('ratings_over');
    },
    // Handles the mouseout
    function() {
        $(this).removeClass('ratings_over').addClass('ratings_vote');
    }
);

answered Jan 05 '14 at 12:04

sdespont

13,915
9
56
97

Tried that code .. didnt seem to work for me/.. i have linked the file ... but it doesnot seem to work!! – Sohil Jan 05 '14 at 12:15

Guicara · Accepted Answer · 2014-01-05T13:01:13.270

0

Why use JS for that? It will be easier to user :hover CSS element.

HTML

<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="jquery-1.10.2.min.js">
<link type="text/javascript" src="jquery-latest.min.js">

<body>

<div class="rating_box">
    <div class="star1 rating_stars"></div>
    <div class="total votes">Votes</div>
</div>

</body>
</html>

CSS

.rating_stars {
    background:url('star_empty.png') no-repeat;
    height:20px;
    width:20px;
    padding:2px;
    float:left;
}

.rating_stars:hover {
    background:url('starfull.png') no-repeat;
}

Updated answer:

HTML

<div class="rating_box">
    <a id="star1" class="rating_stars"></a>
    <a id="star2" class="rating_stars"></a>
    <a id="star3"></a>
    <a id="star4"></a>
    <a id="star5"></a>
    <div class="total votes">Votes</div>
</div>

CSS

.rating_box a {
    float:left;
    padding:2px;
    height:20px;
    width:20px;
    background:url('star_empty.png') no-repeat;
}

.rating_stars { background: url('starfull.png') no-repeat; }

jQuery

$(document).ready(function() {
    $('.rating_box a').click(function() {
        if (!$(this).hasClass("rating_stars")) {
            $(this).addClass("rating_stars");

            // Make the AJAX call
            $.ajax({
                ...
            });
        }
    });
});

It's not perfect and not finish, but it can be the start of something usable (I guess).

edited Jan 05 '14 at 13:01

answered Jan 05 '14 at 12:09

Guicara

1,668
2
20
34

It's nice but I guess the next step is to let the user click on the 1st, 2nd, ... star and then call the server to save the vote... JS will be needed, so let JS all the widget. Nop? – farvilain Jan 05 '14 at 12:11
Since you are already using jQuery, then your next step is to build ajax to send to server. Use $.ajax. Here's guide to build one: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php – Faron Jan 05 '14 at 12:15
#Faron When i hover over the star, it should have changed the image , isnt it?? Is the image height defined on the css has to do anything with it?? – Sohil Jan 05 '14 at 12:20
Yes, it is css-related, because these images are first defined by css. To manipulate the image or effects to your liking, play with css styling. To build function around the image (click event to lock the star), use jQuery click event function and tie it to $.ajax. – Faron Jan 05 '14 at 12:37
@Faron well ihavekept differnt images in both the clas.. and to my understanding , it should have changed with the help of jQuery.... I just couldnot understand why it is not working..... – Sohil Jan 05 '14 at 12:43
@farvilain I don't agree with you. I think it's simple to let the CSS for "presentation", and of course, like you said, use jQuery for the rest. – Guicara Jan 05 '14 at 12:47

Rating system not working

2 Answers2