CODEWITHSUNDEEP
javascriptrating
Sarah A
Sarah A

Reputation: 1233

Javascript rating system

I am not a javascript guru so please be patient with me.

I was looking for a good rating with js and I ran to the his blog:

http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html

The author has a demo and has provided the code to download.

it looks really nice except the fact that it doesn't have the example for saving the colors. Therefore the colors are back to black (default color) once user moves the mouse away.

any idea how to have the colors fixed?

Upvotes: 3

Views: 2085

Answers (3)

Sarah A
Sarah A

Reputation: 1233

In addition to the code TimDog has added:

adding

_rated = false;

to 

$(".fav_rating li label").hover(function() {

resets the colors every time user hovers over the ratings. Then when they click _rated is set to true and therefore prevents the color change

in addition, i used a hidden input in my form that will contain the value of the rating. To do this my .click looks like following:

$(".fav_rating li label").click(function(e) {
    e.preventDefault();
    _rated = true;
    $("#item_fav_rating").val($(this).parent().index() + 1)
});

Upvotes: 2

TimDog
TimDog

Reputation: 8918

Here's one way -- I took a closer look at the script.js in the example code:

Add this global variable under animationTime

var _rated = false;

The colors are reset here -- see how I've used the _rated variable?

// Restore all the rating to their original colours
if (_rated) $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);

Then in your click handler:

//Prevent the click event and show the rating
$("#rating li a").click(function (e) {
    e.preventDefault();
    _rated = true;
    //alert("You voted on item number " + ($(this).parent().index() + 1));
});

This will keep the colors highlighted. It will be reset when you refresh the page or rerun the reset animation line above.

Hope this helps.

Upvotes: 1

amrit_neo
amrit_neo

Reputation: 1759

I havent seen the code of the blog you mentioned, but it seems when user clicks on any button it is showing alert ie, onclick() is used. so you can have one global variable which will save the number and there itself you can add code to keep the color.

Upvotes: 0

Related Questions