kartik-v / bootstrap-star-rating Goto Github PK

View Code? Open in Web Editor NEW

1.1K 66.0 400.0 528 KB

A simple yet powerful JQuery star rating plugin with fractional rating support.

Home Page: http://plugins.krajee.com/star-rating

License: Other

CSS 15.14% JavaScript 84.86%

bootstrap-star-rating rate-control javascript star css rating jquery change-stars star-symbols rtl

bootstrap-star-rating's Introduction

Hi 👋, I'm Kartik Visweswaran

A passionate open source contributor from India

🔭 I’m currently working on Javascript Plugins and Yii2 Extensions
👨‍💻 All of my projects are available at https://krajee.com
📝 Check out my articles on web tips and my blog
💬 Ask me about anything on app development
📫 How to reach me: https://krajee.com/contact

Support

bootstrap-star-rating's People

Contributors

Stargazers

Watchers

Forkers

chiku1992 solowolf21 lsroudi zafisoft renamathai yashilanka thongtran-dev wir juniorriau sebastiaanlubbers multicolordog lukeddy bryant1410 johnulist ainternational davidtecnologia alexuson vinnie777 puripo thebigape rotelando sparkinzy nvdnkpr tuffnerdstuff survivant jacobking omair-akram liuflyfly lukebranch makersunion odoobulgaria nbagonet josicai zyuhel pie-ai bigjoevtrj deepikab ghmarinho igorwc jschnepple dpeabhakar ouyangdage hugcar mars1 agentemily flyingnn retinainc bob76828 staff1990 ppg003 frankie-666 bayramyoldas veerkun cuttingedgehobbies hatake1feng junkystu enjoydevs sirzica nak333 peterzero frederic3476 aayushkumarjarvis addicyassaupej6 ateleshev soulmate2015 syrex88 rowmain rmit-s3443163-quan-do bryanjamesmiller antdream nvsky ptrnov itssalman kristianmandrup renny-xu phamthaithinh lynnsamuelson jackfill hui8473240 shisensen iamlibo alexeiikozachuk impraveen burick irvingyang mzmang tapfumamanhanga daliandragon songoo imargo imanfakhar uqu8 wormlxd signight zenseo alonsudri musicformellons vaishali-ghayal ircham omezzine

bootstrap-star-rating's Issues

Hover not showing correct star

Hi,

I tried using the plugin in a modal window with Bootstrap 3.

The hover does not seem to work correctly. When I hover over the 2nd star, it shows 2.5 stars coloured. And the whole thing is always showing more and more than the star I'm actually hovering on.

The same thing happens no matter the size (currently set to xs), the symbol used, or if it's in a modal window or not.

Any ideas?

Cloned field value sync to be corrected

Correct synchronization of value of cloned original input whenever rating is changed.

3.1.0 tag missing for bower installation?

I do not have too much experience with the bower infrastructure, but the current state of the git repo cannot satisfy a ^3.1.x dependency ("bootstrap-star-rating": "^3.1.x"):

bower bootstrap-star-rating#^3.1.x     ENORESTARGET No tag found that was able to satisfy ^3.1.x

So far, no 3.1.0 tag has been created in the repo. Looks like that is the issue. Likewise, bower install bootstrap-star-rating currently installs 3.0.0.

Add rating.refresh event

Add rating.refresh event that is triggered whenever the rating is refreshed via the refresh method.

IE 8 Support

Hi thnx for the nice plugin.
I have one query is it possible to provide any work around for Older Browser like IE8.

Thanks.

In chrome, with a text type of "number" for start and stars value is X.5, the form error happen

For this field:
input type="number" id="rating" name="rating" class="rating" min=0 max=10 data-show-clear="false", data-show-caption="false", data-size="sm"

if the user clicks on stars, the value can end up being x.5 (6.5 for example, which in my example represent a quarter of a star), in chrome when trying to submit the form, chrome will try to validate the field as number, and doesn't allow float, so the validation will fail. This will cause an error because the field is hidden so chrome cannot show the validation failed text.
"An invalid form control with name='rating' is not focusable. "

Issue doesn't happen in Firefox, even with the same value from the star rating

Hover showing incorrect star value

Everything is ok when viewing demos (http://plugins.krajee.com/star-rating/demo), but on my own app the hover is incorrectly determining the star value.

Experienced on Safari 8.0 and Chrome (38.0.2125.104) and Firefox 31.

HTML:

  <input id="rating-input" type="number" />

Initialization code:

   $('#rating-input').rating({
      min: 1,
      max: 5,
      step: 1,
      rtl: false,
      showCaption: true,
      showClear: false,
      size: 'lg'
   });

Result (when hovering over)

I can't even hover over it correctly to select 1 star.

multilanguage support

I'm curious if there is any kind of multi language support planned for this plugin. THX Dominic

Ability to integrate with other font icon CSS frameworks

Add easier support to integrate with Font Icon CSS Frameworks like Font Awesome - by providing usage examples

No correct POST values on mobile devices

Hello,

When I create a simple page with a star rating and submit the form, I get the correct (POST) results on my pc. When I use the same page on a mobile device (iOS 8.3) I only get value 0 from the star rating.

I'm using star rating version 3.5.1.
Mobile browser: Safari, Chrome (41.0.2272.58)
PC browser: Chrome (41.0.2272.118), IE 11 (11.0.9600.17690)

PC output:

Mobile output:

The error occurs in the following code (file name: starrating.php):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link rel="stylesheet"  href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/star-rating.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <?php
    if(isset($_POST['testform'])){
        print_r($_POST);
        echo "<br />";
    }
    ?>

<form method='POST' action='starrating.php'>
    <input id="TEST" name='stars' value="0" type="number" class="rating" data-symbol="" min=0 max=5 step=1 >
    <br /><br />
    <input type='hidden' name='testform' value='1' />
    <input type='submit' value='Submit'>
</form>
</div>
</body>
</html>

How can i apply required for rating

i need a rating as mandatory field how to achieve this.

how to destroy the rating

Hello, is there any myelement.rating("destroy")method for this plugin? Checking this plugin in the context of a Meteor app. Thanks

Printing results in pure black stars no matter the value.

When the user attempts to print the page with star rating on it (eg. a summary report), the stars come out as solid black.

Is there a workaround for this?

rating star bar does'nt size properly when not using 5 stars

Hello,

First thanks for sharing this widget. This is a very good work : smart, configurable, bootstrap 3 compatible. You rock !!!

I was planning tu use it with 4 stars and a 0.5 step, but the rating bar doesn't scale properly with that configuration : it seems its scale is not computed according to the amount of stars.
When I click on the bar for 3 stars, I get dimensions like 70% or 80% while I should get 75%.

Regards

Alban

Code cleanup and restructure for JS lint changes

Code cleanup and restructure for JS lint changes (using JSHint Code cleanup library).

Remove redundant tooltip title on hover of caption element

How would you use this with jQuery Validation?

Hi
I want to use client-side validation on this field.

I would like to validate the rating as non-zero (set to zero at start) in effect making it a required input. How can I do that with jQuery Validation if the input field is "display:none".

What other (client side) validation might be used if it cannot be done with jqv?

wrong bower.json version number

Hello,
I tried your plugin but inside of your bower.json you have still an old version number:
bower mismatch Version declared in the json (1.0.0) is different than the resolved one (2.0.0)
Regards,
Dominic

Add Bower package

http://bower.io

Rating shown two times

Sorry for cross-posting but none was able to help me.
Can you tell me what's wrong at this?

http://stackoverflow.com/questions/30346698/bootstrap-star-rating-shown-two-times

Form loaded through ajax

If I have an input.rating[type="number"] within a form loaded through ajax, and of course it's not detected by the star-rating plugin.

Can the plugin provide a method to scan again the document or just a container to initialize the new DOM elements?

Thanks in advice!

There seems to be a problem with the new plugin

I was using version 1.0.0 previously with Sass-rails 4.0.2. When I updated star-rating to 2.0.0 I'm now getting a problem whereby if there are multiple star rating items selected on the page, it seems to duplicate the field.

For example, the image above shows what it looks like rendered. When I try to submit the form it will try to submit 2 ratings instead of just one for each field.

My selector looks like this:

$('.response_rating input').rating()

I didn't see it documented but by any chance did you change the way selectors are handled from version 1 to version 2?

in jquery on click function i need to disable star rating ( i need to do like toggle)

how to do this
1.intially if i set the value data-readonly="true" it is working fine but if i am doing it in jquery it is not working how to fix it..

Font-awesome instead of glyphicons

Is it possibile to use font-awesome instead of glyphicons?

If not, do you plan to add this feature in the future?

Thank you in advance

Value is not set correct on submit

Hi,

after updating to v2, I have the following problem with an Rails 4.1 app:

This is my generated HTML:

<input autofocus="autofocus" class="form-control rating" data-show-caption="false" data-show-clear="false" id="feedback_company_grade" max="5" min="1" name="feedback[company_grade]" type="number" value="4" />

When I submit the form, it will send the value twice.

This is what is sent to my app (from chrome inspector):

Form data
utf8:✓
feedback[company_grade]:3
feedback[company_grade]:4
feedback[feels_best]:
feedback[change_request]:
button:

I don't know where the duplicate value comes from. In v1 (and correctly) there should only one value and it should be 3 -- as 4 is only the preset.

I'd love to add more information if needed. I think the problem might be in the js, but unfortunately I don't know enough about js to debug it.

Best,

Chris

can not change not rated label

hi
i use bootstrap star rating in not English language, so i want change 'not rated' label but i can't.
please help
THANKS!

Value of a input.rating field ?

Hello,
how can we get the value of an input.rating just when the form is submitted, not on the change event ?

Daniel

Not rated is setting 1 instead of o

Relevant code:

 $("#input-rate").rating({
                starCaptions: { 0:"Not Rated",1: "Very Poor", 2: "Poor", 3: "Ok", 4: "Good", 5: "Very Good" },
                starCaptionClasses: { 1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success" }
            });

When initialized it works as expected.But when the value of the rating is changed and then the (-) button is used,the minimum value defaults to 1 instead of being 0

Add `create` method to create the rating plugin and `destroy` to destroy the plugin

The create method will typically be called after a destroy, to recreate the plugin.

Value calculation slightly off with integral step value

Hi,
The calculation seems a bit off when using step=1.
See: http://cssdeck.com/labs/bnagqglo

The left part of the first star sets the value to zero, which is akin to clicking the "clear" button.
More generally, clicking the left part of the n-th star yields a value of (n-1).
Is this intended behavior?

More correct init of `clear` and `caption` elements

Clear button could (should?) be made generic

As it stands, although designed for use with glyphicons, the iconset used can be customised by css changes/overrides. For the clear button this is not the case and an argument has to be provided in javascript.

Changing the class on the default element inserted in javascript to something lile .rating-clear and providing a default css class would make it easier to use with alternative icon sets are the only customisation required.

Set rating to readonly after change via jQuery

Everything works OK but when I try to do this:
$('#input-id').attr('data-readonly', 'true');
$('#input-id').rating('refresh');

I still can submit another vote. I have the latest version of Bootstrap and jQuery.

Doesn't work on mobile safari or chrome

I got it working on both desktop safari and chrome but it doesn't seem to work on mobile safari or chrome.

When I touch the stars, nothing happens.

I used iOS simulator to debug mobile safari, and it printed this error:
[Error] TypeError: undefined is not an object (evaluating 'e.originalEvent.touches[0].pageX')
setTouch (star-rating.js, line 139)
(anonymous function) (star-rating.js, line 162)
dispatch (jquery.min.js, line 5)
handle (jquery.min.js, line 5)

I tried both version 3.2 and 3.3

How to get value number selected by user for POST request?

I use the star rating within a form as an input to process with POST.
How to get the rating value number selected by user?

When i click on submit it get "undefined".

Here is my jQuery code:

$(document).ready(function() {
$("#addReview").submit(function() {

    var vote = $("#inputRating").val();
    var review = $("#inputReview").val();

    $.post("add.php", { vote: vote, comment: review}, function(data) {
        var result = $.parseJSON(data);
        if (result.error) {
            $('#inputReview').css({"border": "2px solid red", "box-shadow": "0 0 3px red"});
        } else {
            $('#inputReview').css({"border": "2px solid blue", "box-shadow": "0 0 3px blue"});
        }
    });
    event.preventDefault();
});

});

And here is my HTML form:

                <form class="form-horizontal" id="addReview">
                  <div class="form-group">
                    <label for="inputRating" class="control-label col-xs-2">Vote</label>
                    <div class="col-xs-10">
                      <input class="rating" data-min="0" data-max="5" data-step="1" data-size="xs" data-show-clear="false" data-show-caption="false" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputReview" class="control-label col-xs-2">Comment</label>
                    <div class="col-xs-10">
                      <textarea rows="5" class="form-control" id="inputReview" required></textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-offset-2 col-xs-10">
                      <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                  </div>
                </form>

PS: "required" attribute seems not to work with rating input. Is it a bug?
PPS: what is the difference between "data-disabled" and "data-readonly" attributes. Anyway how do I get rid of the hover mouse icon?

Add touch device support to enable touch and slide across stars

Enabled touch devices support (that do not have hover). Users on mobile/touch devices can touch, slide and drag to increase/decrease the rating.

Set `clearValue` to default to `min` if not set

Change state on hover

Great plugin, but it would be nice if the state of the buttons changed when hovering over so that the user knows to click.

It's a common feature of other rating plugins so it would be good to have here.

Setting the starCaptionClass does not work reliably

When setting the star caption class to the following:

      $(element).rating({
        size: starSize,
        disabled: true,
        showClear: false,
        showCaption: true,
        starCaptionClasses: {
              0.5: 'label label-danger',
              1: 'label label-danger',
              1.5: 'label label-warning',
              2: 'label label-warning',
              2.5: 'label label-info',
              3: 'label label-success',
              3.5: 'label label-success',
              4: 'label label-success',
              4.5: 'label label-success',
              5: 'label label-success'
            }
      });

I would expect a value of 4.9 to show the nearest, lower value; it does not; instead it shows the label label-default one that is built in. 4.9 should show 4.5's value, for example.

Mouseleave on clear button is clearing stars

I believe that, since the last update for this plugin (and many thanks by the way), that mousing over the clear button (minus sign), properly clears the stars, but mouseleaving over the clear button is clearing the stars (and not returning them to their originally set value).

More correct minimum value and clear value validation

More correct validation of min value to work in combination with the clearValue.

How to get value of <input> with JSF framwork

Hello,

Thank's for your plugin, i want to integrate it in jsf (j2ee) project

i want to know how to get value of the input in backing bean ?

thank's

Range of allowed ratings

Hello!!
Thank you for this awesome plugin.
Maybe it's my fault but I can't find how to limit the range of allowed ratings.
ATTENTION: the min and max options allow the developer to set the starting/ending values of the stars, but that's not what I'm referring to.
What I would like to do:

5 stars
values range is 0 to 10 (so each star = 2 points)
ALLOWED rating range: if a user is a beginner reviewer he/she can only select between a specific range of values (for example 5-9)

Sure I could set min-max = 5-9 but that would be very confusing (since in the same page there are other read-only star ratings with 5 stars and 0-10 range).

Possible rating refresh issue?

I love this plug-in and am working on a firm review system using it. However, I have implemented a "not applicable" button which grays out the background of the rating and tries to disable the star rating plugin by calling the refresh method as follows:

$question.find(".numerical-response").rating("refresh", { disabled: isNA });

where isNA is simply a boolean whether the question is rated as not applicable by the user or not.

Once I run this command, the "click" events get multiplied so that I get three events, then if I disable it and reenable it, I get six events. This appears to be because the refresh method in the plugin re-calls the "init()" function, which in turn calls the "listen" to re attach all of the events to the elements. However, multiple calls to the refresh method seem to be making multiples of the click events?

Love it... but the example

Man I love it, but man you really need to show the examples with min=0 and max=5.

It is all wrong and you have not verified the examples out on:

http://www.jqueryscript.net/other/Simple-jQuery-Star-Rating-System-For-Bootstrap-3.html

Please update this. I had to spend extra time doing through getValueFromPosition() to realize that your example isnt right for five stars and is setting the width as 25% when it should be min=0 which will calculate correctly with the CSS.

Also it would be nice to have some caller examples without the class of "rating" and with examples of callbacks on rating change because that is the most important one to APIing to the data layer from the javascript widget:


  <script>
    $(document).ready(function () {
        var $input = $('#rating-system'), count = Object.keys($input).length;
        if (count > 0) {
            $input.rating({
              min: 0,
              max: 5,
              step: 1,
              size: 'custom'
            });

            $('#rating-system').on('rating.change', function(e){
              console.log($(e.target).val());
            });
        }

    });
  </script>

refresh break

I'm trying to use the refresh option but it seems is broken. 'refresh' use init function and init has this conditional
if (!this.$elementOrig.is(":visible")) { return; }
I'm not very sure why is here but this break the refresh function. Since init function doesn't run with refresh.

Symbol option

Hi,
Its probably really easy but, I can't use the symbol option. I would like to use the glyphicon glyphicon-asterisk from bootstrap.
I have tried : $("#input-id").rating({'symbol':'glyphicon-asterisk'}); and several variations without success.
Could you provide an example?

Enhance with new hover routine and additional events

New features fractional ratings and configurable CSS

Plugin to be upgraded to support fractional stars and better CSS styling options

How can change ID of input element.

Hi,
I have put the ID in like this ...
"id" => "profileskill-rating-" . $id
It changes the JS ID but not the input ID. Is there anyway to change the input ID. The reason I am asking is because I want two on a page and I want to do it through PHP and not use the JQuery manually.
Any ideas?

kartik-v / bootstrap-star-rating Goto Github PK

bootstrap-star-rating's Introduction

Hi 👋, I'm Kartik Visweswaran

A passionate open source contributor from India

Support

bootstrap-star-rating's People

Contributors

Stargazers

Watchers

Forkers

bootstrap-star-rating's Issues

Recommend Projects

Recommend Topics

Recommend Org