Disable stars highlighting but enable click even for jQuery Raty plugin

Question

I use jQuery Raty plugin. It's great and does most of what I need. I've been searching for a solution to not highlight stars when a user moves cursor over the control. Making it just readOnly: true doesn't help because it disables click event which I need to handle.

I tried to bind to mouseover event:

mouseover: function(score, evt) {
  this.score = 0;
}

But Raty doesn't promote its data (this.score) back to DOM.

I then tried to handle mouseover event to change each image's src attribute:

mouseover: function(score, evt) {
    rateControl.children().each(function(img) {
        img.attr('src', 'star-off.png');
    });
}

Again, no result desirable.

What way should I think to disable star highlighting without disabling click event on Raty?

score 1 · Answer 1 · answered Oct 02 '14 at 07:27

Just found a solution. It seems non-semantic, although it works. And I definitely should have paid more attention to the last few sections of Raty manual.

To disable star highlighting, one needs not actually disable it but substitute highlighted star with default one. To do that, one wants to initiate Raty with params:

$('#raty').Raty({
    starOff: 'star-off.png',
    starOn: 'star-off.png',
    ...
}

Raty will keep handle mouseover events and change stars' src attribute, but as each one's the value stays same, nothing visual happens.

Disable stars highlighting but enable click even for jQuery Raty plugin

1 Answers1