Disable rating with Progressive enhacement

Jul 5, 2012 at 10:21 AM

First off, congratulate you for your work. Easy to implement and functional.

 

I am using it in an ASP.NET WebForms application to "decorate" a server-side drop-down list with a custom star icon and it works flawlessly.

 

I'd like to ask for a couple of features:

disable the control (no hover, no selection) when the backing control is disabled, just show the non-selected icon for all of them and prevent changing it

An example to rate with one and only one of the icons. In my case I am rating by color, so if a higher color is selected, lower (and upper) values are not selected.

 

Thanks again for your plugin

Jul 5, 2012 at 4:18 PM

Hi,

Thanks for you kind words.

About your questions:

- I guess you only want to check if the backingfield is disabled when the rateit control is instantiated? This would be a good feature to add. 

- Good you maybe show me an image on how this should look like?

bye,

Gidon

Jul 6, 2012 at 8:32 AM

Hi,

Answers for your answers ;-)

  • in my case, checking whether the select control is disabled once (when the rating is instantiated) is sufficient, as I do not disable my select client side. But do you think it would be difficult to add a method that disables the rating? That way we could support those guys that could disable selects via script.
  • here is how it looks like now when the third option is selected (note how the previous two options appear selected as well):  .And here is how I would like it to look (note how the previous two options do not appear selected): .
    Furthermore when we hover one value I would like only that value to be highlighted, not the previous ones. This is how it look like now when we hover the fourth value:  and this is how I would prefer to look like when hovering the same value: 

I hope this clarifies the features I would love rateit to have.

 

Many thanks in advance

Jul 6, 2012 at 4:21 PM

I've updated RateIt with your first request. You can find the updated package also in NuGet or download it from this website.

Now about your second request, I understand what you want to do (don't really understand the UX part of it).

This is what you need to do:

Create 11 images:

1 - none selected (the background)
5 - where each time one different one is in the hover state.
5 - where each time one different one is in the rated state. 

In order to save make the images as small as possible, the 10 hover/rated images can be transparent, besides the one that is in the hover/rated state.

Now in javascript we add one line of code:

 

$(".rateit").bind('over', function (e, v) { $(this).removeClass('r1 r2 r3 r4 r5'); if (v) { $(this).addClass('r' + v); }});


This will give us the ability to change the image in css based on the rating.

Now at the end of your css file, you will add something like this:

div.rateit div.rateit-hover.r1
{
    background: url(hover1.png) left;
}                                 
                                  
div.rateit div.rateit-hover.r2    
{                                 
    background: url(hover2.png) left;
}                                 
                                  
div.rateit div.rateit-hover.r3    
{                                 
    background: url(hover3.png) left;
}                                 
                                  
div.rateit div.rateit-hover.r4    
{                                 
    background: url(hover4.png) left;
}                                 
                                  
                                  
div.rateit div.rateit-hover.r5    
{                                 
    background: url(hover5.png) left;
}

div.rateit div.rateit-selected.r1
{
    background: url(selected1.png) left;
}                                 
                                  
div.rateit div.rateit-selected.r2    
{                                 
    background: url(selected2.png) left;
}                                 
                                  
div.rateit div.rateit-selected.r3    
{                                 
    background: url(selected3.png) left;
}                                 
                                  
div.rateit div.rateit-selected.r4    
{                                 
    background: url(selected4.png) left;
}                                 
                                  
                                  
div.rateit div.rateit-selected.r5    
{                                 
    background: url(selected5.png) left;
}

And that should be it.

If you allow me to post it on the sample page, you could send me the eleven pictures, and I'll create a working sample.

Else, if you need anymore help, just ask.

Good luck,

Gidon

Jul 8, 2012 at 3:32 PM

Wicked!

Thank you so much for adding such feature, Looking forward to checking it!

I will also give a spin to your idea to implement the second. I cannot see why it could not work

 

Cheers