antennaio/jquery-bar-rating

jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings.

jQuery Bar Rating Plugin

Minimal, light-weight jQuery ratings.

How to use

Documentation and examples of use can be found here:

http://antennaio.github.io/jquery-bar-rating/

How to run tests

git clone https://github.com/antennaio/jquery-bar-rating
cd jquery-bar-rating
npm install
npm test

License

This plugin is available under the MIT license.

jquery-bar-rating's Issues

Vertical bar rating

Hello,

would it be possible to add option to rotate Bar Rating vertically?

Dusan

Hover Callbacks

Hi, thanks for the nice plugin.

Is there any way that I can listen to mouse over events? I'd like to capture which value the user is hovering on, and dynamically add classes based on the value, for a parent element.

Let me know.

Star rating not selecting!

Hello.
I'm using chrome v34 on windows 8.1
I cannot select the rating in this case the star rating style.
When i hover on the stars, only the current target gets css hover color, but the ones on the left does not select, and even clicking isn't selecting anything at all. (on IE it works).

I tried to debug it using the minified .js version and what happens is that if I add c=false; right after this line:

---

" c="ontouchstart" in a; "

---

then it will work. It must to be something with the touch, or the way chrome handles it. But for me the c=false Hack to overwrite the previous line does it for me.
Also when i go to chrome flags (chrome://flags) and search for the touch handling "Activate touch events MAc, Windows, Linux, Chrome Os - Force support to touch screens" and set it disable, this issue stops. But in my chrome i had by default the "auto", which in this case produces the issue above.

Add ability to display value on bar rating and text on the side

At the moment it is possible to show the rating on the side of the control.

It would be good to have the possibility to show the value on actual bars and text (description) on the side (use the html select value/text items).

Commercial use

Hi can I use this in my commercial plugin?

doesn't work

just displays a 1 and thats it.

General initial value loading is missing

I think general functionality of preloading default value for each rating trough javascript is missing. Using selected="selected" to choose the default option is causing issue when integrated in modern frameworks as AngularJS

'set' doesn't trigger onSelect

onSelect is not triggered when the 'set' method is used.

Example;
$('#photo-rating').barrating('set',4)

bar rating gets removed after clicking data-filter attribute.

please refer the following site:http://yaazhxenomics.azurewebsites.net/

in this once i moved from All tab the star rating gets removed. I couldn't get why this is happening.Please help.

Rating not clearing after hover

When using POST method in PHP, i

Just one rating

Hi every body,
I'll would like to permit only one rating for each loaded page i.e. once the page is rated the visitors he can't rate it again.
I can't figure out how to setup this using JS or jQuery for example !
Any help would be appreciated.
Rgds
OUPS This morning every things ok, thanks my last night crush out !
jquery-bar-rating is just the most wised plug-in i used, ever !

Sorry guys

Regards

Bootstrap 3 Tooltips ?

Hi all

I'd like to use / display bootstrap tooltips (rather than use an additional 3rd party tooltip library) on individual elements. Any pointers on how / if this can be done ? (I did see a closed thread relating to using tooltipster - but can't apply same method to bootstrap)

TIA

T

Flickering issue when hovering over

Hi @antennaio

This plugin os great right.

So this is the issue,

I'm trying to recreate Yelp rating system. https://www.yelp.com/writeareview/biz/JMuGDIBYLg8QEOwMSBvMEg?return_url=%2Fbiz%2FJMuGDIBYLg8QEOwMSBvMEg

So when you hover over the colors change based on the position of the cursor. This is cool. But with this plugin I can also do this , but the br-active and br-selected classes are added and removed on every hover event.

This gives a flickering effect which is not a smooth experience at all.

Any thoughts Please ?

Form containing select list always posts a value of 1 when used in firefox.

I have a form that uses this plugin to stylize a select list with numbers 1-8. In Chrome, Safari, and Internet Explorer when a user selects an item, the appropriate number is PATCHed to the server. However, every time a form is submitted while a user is using Firefox (Mac, Linux, and Windows) the value that gets submitted is a 1.

Any ideas what could be causing this?

I have a live example, but it takes a couple of steps to get to it:

You can log into my staged app using the following credentials:
username: [email protected]
password: pas5word

The url to the registration page: http://lion.alexander.c66.me/users/sign_in

You can then navigate to: http://lion.alexander.c66.me/user_relations/3
Where you will see a "Skill List" toward the bottom of the page:

Select a value other than 1 in any of the three fields and select "update" . The page will refresh and you will see a value of 1 if you used Firefox (as mentioned before, all other browsers work as expected).

What's going on here?

ratings does not showing while clicking browser back button( in safari)

it display as select tag while clicking back button in browser, this is happening in safari

Select half value

Should be possible to select 4.5 on star rating for example.

See example here: http://plugins.learningjquery.com/half-star-rating/

Thanks in advance and great job!

HTML content not shown

Hi there

I am using Bootstrap / Font-Awesome and was hoping to use icons within the rating - but the HTML is stripped out leaving empty tags. Is there a means to incorporate these ?

TIA

Update:
I've modified JS to look for HTML content in 'data-html' attribute and then use html insertion (there isn't any error checking etc):

// create ratings - but only if val is defined
                        if (val) {
                            text = $(this).text();
                            html = $(this).data('html'); // added this
                            if (html){ text = html }; // and this

                            $a = $('<a />', { href:'#', 'data-rating-value':val, 'data-rating-text':text });
                            $span = $('<span />', { html:(userOptions.showValues) ? text : '' }); //changed to html

                            $widget.append($a.append($span));

Page Reload Issue

i am trying to insert jquery bar rating then auto page reloading issue is happening

Move demo to gh-pages branch

Might be an nice idea? That will also mean people can contribute to that branch.

$.data

The plugin makes heavy use of storing data inside $.data such as .currentRatingValue .currentRatingText .userOptions is there any significant reason why this can't be stored on the BarRating instance itself?

I'm happy to do a PR to change this but just wondered if this is a design preference or some use for accessing these values directly from .data as oppose to through the plugin API itself?

Needs features

Missing such basic things like ability to set to readonly AFTER a rating is selected. Seems you can only set readonly on initializing. huh? Not being able to provide decimal values is odd. Sure u can't see the results of decimals (e.g. 4.5/5) but to ignore it instead of just using a floor/ceiling on the value is like no one is even working on this project. No need to fork, this project hasnt even begun. Off to the next ones. bye.

How to set rating from script?

Hi! Please, how to set rating value after barrating from script?

I try
$("#sel1").barrating({onSelect:function(value, text){alert(value);}});

// bla..bla..
$("#sel1").prop("value", "3"); // no effect
$("#sel1").prop("value", "3"); // no effect
$("#sel1").prop("rating", "3"); // no effect

need support

How can click rating and disbale rating after click?
I already add class 'br-readonly' and prevent click event but not working.
Please help me solve it. Thank you very much.

How to use this plugin?

I don't really get how to use this plugin. I included the .min.js file and added

$(function() {
    $('.barrating').barrating();
});

to my site. Now I added some select fields with class="barrating" but the only thing that happens is that the regular select field disappears. Do I have to add all the CSS stuff as seen in examples/css/examples.css as well?

Not Working in firefox 27.0

I am not able make selection stars in Firefox 27.0 in chrome and IE it is working fine.

Disable/Read-Only?

Is there a way to disable input and just show the current value?

How to fix the bar rating when clicked by user?

The recent demos at http://antenna.io/demo/jquery-bar-rating/examples/ show only the changes of values when the user moves his mouse on the fields.

The "normal" user case that s/he clicks on the selected item and then moves out the mouse cannot be found. But it is needed. Reason: When the user clicks on 3 / 5 he expects the value to be fixed, but when he moves the mouse outside, the value is changing.

1. So how can I fix the value of the bar as soon as a click appears?
2. And how to reapply another value when another click appears?
3. Woraround could be to only react on clicks.

Thanks for your help.

InitialRating cannot be zero?

Hi, I just tested your plugin and it works perfectly fine.

I just have one concern about the initial rating. Can we set the initial rating to zero? Or all the stars are not highlighted if the rating is zero?

Thanks

Not working in chrome browser

Browser : Chrome - Version 31.0.1650.63 m
OS - Window 8
URL - http://netboy.pl/demo/jquery-bar-rating/examples/

Themes

It would be cool to add a themes folder which contains various CSS files for different themes. One for FontAwesome, Bootstrap 3, CSS3, etc.

That would solve the only tedious thing about this plugin (that you have to manually write CSS just to make it useable, or copy example from the docs, manual work involved.)

I know themes is subjective, but at least have some 'sane' defaults so people can see and make it easier to get going straight out the box? What do you think? 😄

Use images instead of backgrounds

Hello! This is the best plugin I've seen for ratings, but it would be very cool to add support for using images instead of backgrounds. I need it because backgrounds don't get printed and I have to force all graphic to images... I made changes to plugin but it looks rather ugly and I'd like to use the latest version of your plugin in future...

Add bower.json

Add support for bower will be nice.

When using "set" method the colors are reversed

When I use the "set"method to specify a value for a widget e.g. $('#example-horizontal').barrating('set',9) , while the value is set the color scheme is reversed.

Expected behaviour: When the set method is used, especially for horizontal widget, the colors should not be reverted.

Save rate

A way to add hints when you hover over

Hi,

It would be amazing to have a way to add hints.

Please let me know if this is planned.

Thanks @antennaio

New release

Are you planning on releasing a new version for the changes in master (themes?) 😄

Initialize plugin from pre generated DOM

I'm dealing with a very slow internet connection and the issue is that users see a dropdown or an empty area before page scripts are downloaded. I was wondering if I could generate the markup my self in my back end and ask jquery-bar-rating to initialize from existing HTML.
Any way I tried to write a test myself but unfortunately it didn't work if my issue is not clear please let me know.

Half points for starvotes

can you add please the option for half star in the starvoting function ?

Page reload issue when using the plugin on aspx pages

Hi,

When i implent this plugin in my .net application, the aspx page gets looped inside the page load function.
When I implement the plugin inside a html document, i don't have this issue.

Do you know what could cause this?

Thank You

Switch to karma and use Phantom.js

For the love of us windows users. Also because karma and phantom.js are awesome.

Center Example A?

I am struggeling to center Example A?

Any tips for me?

Should the select control update inside "ratingchange" event callback?

$elem.find('option[value="' + value + '"]').prop('selected', true);

Click doesn't fire onSelect, after changing readonly to true and then revert to false

I fixed this changing line 241 in jquery.barrating.js file from

self.options.onSelect.call(

to

var options = getData('userOptions');
options.onSelect.call(

I don't know if this is the best solution, but it works.
Does anyone knows why self.options.onSelect shows an empty function after changing readonly values to true and then to false?

Add ability to have no rating

At the moment when you initialize the rating it will always show as e.g. 1 star selected. This gives a false impression that the user has already rated when in fact they haven't.

You can get around this by adding a hidden option that is selected like:

<select>
    <option value="" selected disabled hidden></option>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
</select>

But this feels a bit clunky, it should be easier to do in the plugin itself. Maybe a new option like allowEmpty could simulate the above in the plugin itself. What do you think?

jQuery.create

I'm curious where the jQuery.create method came from as described in this line.

Make callback optional when using set method

Hello! I show user some rating with pre-initialized values. I initialize them using ('select').barrating('set', value); method and I don't want it to trigger any callback, I need callback only when user himself clicks rating. Could you make an option to disable callback when using $('select').barrating('set', value); metod?

jQuery Bar Rating added to twittstrap resources list

Hello,
we have just add jQuery Bar Rating to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-bar-rating
Under : Components
Regards

Make it work with form validation aka .validate()

Because the real field is hidden, jQuery validation don't work. So I temporary changed this line:

self.$elem.hide();

With this maybe ugly code:

self.$elem.css('position', 'absolute');
self.$elem.css('left','-9999px');

Then now the field is not visible, but not hidden and the validation works.

Maybe you'll have a better way?

Thanks

Accessibility: allow tabbing to update text

Hi.
Currently, when using TAB to navigate, the widget does allow us to select bars and set them but it doesn't also update the text.

Suggest something like the following to enable this (line 212)

 // handle mouseenter events

        var attachMouseEnterHandler = function($all) {
            $all.on({
                mouseenter: function() {
                    ...
                },
                focus: function() {
                    $(this).trigger("mouseenter");
                },
                blur: function() {
                    $(this).trigger("mouseleave");
                }
            });
        };

Request For decimals

@antennaio
Thanks for the wonderful plugin :) i really love it.

i am just using your plugin in one of my free plugin.
i just wanted to know its possible to set decimals rating. as my plugin requires decimals rating.
if not can you just give me a patch code for it ?

But i really love your work :)
Thanks
varun s