Default
You need just to have a div
to build the Raty.
<div></div>
$('div').raty();
Score
Used when we want stars with a saved rating.
$('div').raty({ score: 3 });
Score callback
If you need the starting score to be based on a dynamic value, you can use a callback for it.
You can pass any value for it, not necessarily a data value, for example, you can use a field value.
<div data-score="1"></div>
$('div').raty({
score: function() {
return 2 * 2;
}
});
Score Name
Changes the name of the hidden score field.
$('div').raty({ scoreName: 'entity[score]' });
Data Support
You can pass any data-*
attribute via HTML and Raty will parse it and use it as an option.
<div data-score="3" data-score-name="teacher[teacher_categories][0][value]"></div>
$('div').raty();
Number
Changes the number of stars.
$('div').raty({ number: 10 });
Number callback
You can receive the number of stars dynamic using a callback to set it.
$('div').raty({
number: function() {
return 3;
}
});
Number Max
Change the max number of stars that can be created.
$('div').raty({
numberMax: 5,
number: 100
});
Read Only
You can prevent users from voting. It can be applied with or without a score and all additional stars will show the "hint" stars.
Move the mouse over the stars to see:
$('div').raty({ readOnly: true, score: 3 });
Read-Only callback
You can decide if the rating will be readOnly dynamically returning true
of false
on callback.
$('div').raty({
readOnly: function() {
return true;
}
});
Not Rated Message
If readOnly is enabled and there is no score, the hint "Not rated yet!" will be shown for all stars. But you can change it.
Hover the mouse over the star to see:
$('div').raty({
readOnly: true,
noRatedMsg: "I'm readOnly and I haven't rated yet!"
});
Half Show
You can represent a float score as a half star icon.
This option is just to show the half star. If you want to enable voting with half stars on mouseover, please check the option half.
The round
options showed below are just for the icon, the score remains a float always.
Enabled
The round
rules are:
- Down: score <= x.25 the star will be rounded down;
- Half: score > x.25 and < x.76 the star will be a half star;
- Up: score >= x.76 the star will be rounded up.
$('div').raty({ score: 1.26 });
Disabled
When halfShow
is disabled, only the option full
(.6
) is checked:
- Down: score < x.6 the star will be rounded down;
- Up: score >= x.6 the star will be rounded up;
$('div').raty({
halfShow: false,
score: 1.59
});
Round
You can customize the round values of the halfShow option.
When halfShow
is enabled, only down
and up
is used for round.
You can specify just the attribute you want to change and keep the others as their defaults.
$('div').raty({
round: { down: .26, up: .76 },
score: 1.26
});
Half
Enables the half star mouseover to make voting with half values possible.
If you want to vote with more precision than a half value, please check the option precision.
$('#star').raty({
half: true,
hints: [['bad 1/2', 'bad'], ['poor 1/2', 'poor'], ['regular 1/2', 'regular'], ['good 1/2', 'good'], ['gorgeous 1/2', 'gorgeous']]
});
Star Half
Changes the name of the half star.
Pay attention, when you want to specify a different icon with a different directory, you must to set the path option to null
to prepending the star's original path to your path. You will then have to specify all other icons with their explicit original path.
$('div').raty({
half: true,
starHalf: 'star-half-mono.png'
});
You can change the star icons.
$('div').raty({
cancelButton: true,
starOff: 'star-off-big.png',
starOn: 'star-on-big.png'
});
Click
You can write a callback to handle the score and the click event
on click events.
You can reference the Raty element (DOM) itself using this
.
$('div').raty({
click: function(score, evt) {
alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
}
});
Click Prevent
If you return false
into the callback, the click event will be prevented.
$('div').raty({
click: function(score, evt) {
alert('Score will not change.')
return false;
}
});
Hints
Changes the hint for each star by it position on array.
If you pass null
, the score value of this star will be the hint.
If you pass undefined
, this position will be ignored and receive the default hint.
$('div').raty({ hints: ['a', null, '', undefined, '*_*']});
Path
Changes the path where your icons are located.
Set it only if you want the same path for all icons.
Don't mind about the last slash of the path, if you don't put it, it will be setted for you.
$('div').raty({ path: 'assets/images' });
Now we have the following full paths: assets/images/star-on.png, assets/images/star-off.png and so.
Path Callback
You can set the path dynamically using callback.
$('div').raty({
path: function() {
return '/assets/vendor/raty';
}
});
Star Off and Star On
Changes the icons.
$('div').raty({
starOff: 'off.png',
starOn: 'on.png'
});
Cancel Button
Add a cancel button on the left side of the stars to cancel the score.
Inside the click callback the argument code receives the value null
when we click on the cancel button.
$('div').raty({ cancelButton: true });
Cancel Button Hint
Like the stars, the cancelButton button has a hint too, and you can change it.
Hover the mouse over the cancel button to see:
$('div').raty({
cancelButton: true,
cancelHint: 'My cancel hint!'
});
Cancel Button Place
Changes the cancelButton button to the right side.
$('div').raty({
cancelButton: true,
cancelPlace: 'right'
});
Cancel off and Cancel On
Changes the on and off icon of the cancel button.
$('div').raty({
cancelButton: true,
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png'
});
Icon Range
Is an array of objects where each one represents a custom icon.
The range
attribute is where the icon will be displayed (out of the five stars).
The on
attribute is the active icon when hovering.
The off
attribute is the default icon.
$('div').raty({
iconRange: [
{ range: 1, on: '1.png', off: '0.png' },
{ range: 2, on: '2.png', off: '0.png' },
{ range: 3, on: '3.png', off: '0.png' },
{ range: 4, on: '4.png', off: '0.png' },
{ range: 5, on: '5.png', off: '0.png' }
]
});
You can use an interval of the same icon jumping some number.
The range
attribute must be in ascending order.
If the value on
or off
is omitted then the attribute starOn
and starOff
will be used.
$('div').raty({
starOff: '0.png',
iconRange: [
{ range: 1, on: '1.png' },
{ range: 3, on: '3.png' },
{ range: 5, on: '5.png' }
]
});
Now we have all off icons as 0.png, icons 1 and 2 as 1.png, icon 3 as 3.png and icons 4 and 5 as 5.png.
Icon Range Same
If you want to use the same icon as the selection in the prior icons, just enable this option.
$('div').raty({
iconRange: [
{ range: 1, on: '1.png', off: '0.png' },
{ range: 2, on: '2.png', off: '0.png' },
{ range: 3, on: '3.png', off: '0.png' },
{ range: 4, on: '4.png', off: '0.png' },
{ range: 5, on: '5.png', off: '0.png' }
],
iconRangeSame: true
});
Target
Displays the hints or the cancelButtonHint.
$('div').raty({
cancelButton: true,
target: '#hint'
});
Your target can be a div
.
<div id="hint"></div>
Your target can be a text
field.
<input id="hint" type="text" />
Your target can be a textarea
.
<textarea id="hint"></textarea>
Your target can be a select
.
<select id="hint">
<option value="">--</option>
<option value="bad">bad</option>
<option value="poor">poor</option>
<option value="regular">regular</option>
<option value="good">good</option>
<option value="gorgeous">gorgeous</option>
</select>
Target Type
You have the options of hint
or score
:
If you choose to see the score instead of the hints using the value score
you will get the numerical value of the star.
For the cancelButton the value is empty.
$('div').raty({
cancelButton: true,
target: '#hint',
targetType: 'score'
});
Target Keep
If you want the score to remain in the hint box after providing the rating, turn on this option.
$('div').raty({
cancelButton: true,
target: '#hint',
targetKeep: true
});
Target Text
Target will blank if you don't use the targetKeep option, after rolling the mouse away from the ratings.
If you want a message to show by default you can use this option.
$('div').raty({
target: '#hint',
targetText: '--'
});
Target Format
You can choose a template to be merged with your hints and displayed in the target.
$('div').raty({
target: '#hint',
targetFormat: 'Rating: {score}'
});
Target Score
You can keep the score value inside the blank element by default or choose where to put it.
If you change the score target, the default score field won't be created.
This is not a target option for display only, it is the real current score data.
$('div').raty({
targetScore: '#target'
});
Mouseover
You can handle events on mouseover.
The arguments are the same as in the click callback.
The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback. You can do it by yourself.
$('div').raty({
mouseover: function(score, evt) {
alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
}
});
Mouseout
You can handle the action on mouseout.
The arguments is the same of the mouseover callback.
$('div').raty({
mouseout: function(score, evt) {
alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
}
});
Precision
You can get the exact position of the cursor to get a precise score.
The score is still represented in full and half stars, but the score is saved as a float.
When you enable this option the half option is automatically enabled and targetType is changed to score
.
$('#precision').raty({
cancelButton: true,
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png',
path: 'raty/demo/images',
starHalf: 'star-half.png',
starOff: 'star-off.png',
starOn: 'star-on.png',
target: '#precision-hint',
targetKeep: true,
precision: true
});
Space
You can remove excess space between stars.
$('#space').raty({ space: false });
Single
You can specify the current star being hovered over should be illuminated, instead all preceding stars.
$('#single').raty({ single: true });
Star Type
Lets you to change the star element type. Changing it from img
to i
, for example, changes from an image to a glyph. There is a sample stylesheet (demo/stylesheets/jquery.raty.css
) using a sample fonts (demo/fonts/jquery.raty.[eot|svg|ttf|woff]
).
To be easier to use, we replaced the dot (.) extension to a hyphen (-), so you do not need to change the original names, just set the names to your fonts. We recommend you use the Ico Moon app which allows you to download only the relevant icons only and rename them.
$('div').raty({
cancelButton: true,
half: true,
starType: 'i'
});
Changing the settings globally
You can change any options globally $.fn.raty.defaults.OPTION = VALUE;
. It must be called before you bind the plugin.
$.raty.cancelButton = true;
$.raty.path = 'assets';
Options
cancelButton: false
Creates a cancel button to cancel the rating.
cancelClass: 'raty-cancel'
Name of cancel's class.
cancelHint: 'Cancel this rating!'
The cancel button's hint.
cancelOff: 'cancel-off.png'
Icon used on active cancel.
cancelOn: 'cancel-on.png'
Icon used inactive cancel.
cancelPlace: 'left'
Cancel's button position.
click: undefined
Callback executed on rating click.
half: false
Enables half star selection.
halfShow: true
Enables half star display.
hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
Hints used on each star.
iconRange: undefined
Object list with position and icon on and off (for mixed icons).
iconRangeSame: false
All icons prior to selection will be the same as the selection.
mouseout: undefined
Callback executed on mouseout.
mouseover: undefined
Callback executed on mouseover.
noRatedMsg: 'Not rated yet!'
Hint for non rated elements when it's readOnly.
number: 5
Number of stars that will be presented.
numberMax: 20
Max number of stars the option number will create.
path: undefined
A global path where the icon will be found.
precision: false
Enables the selection of a precise score.
readOnly: false
Turns the rating read-only.
round: { down: .25, full: .6, up: .76 }
Includes value attributes to do the score rounding math.
score: undefined
Initial rating.
scoreName: 'score'
Name of the hidden field that holds the score value.
single: false
Enables single star selection.
space: true
Puts space between the icons.
starHalf: 'star-half.png'
The name of the half star image.
starOff: 'star-off.png'
Name of the star image off.
starOn: 'star-on.png'
Name of the star image on.
target: undefined
Element selector where the score will be displayed.
targetFormat: '{score}'
Template to interpolate the score in.
targetKeep: false
If the last rating value will be kept on mouseout.
targetText: ''
Default text in a target.
targetType: 'hint'
Choose if target will receive a hint or the score number.
Functions
$('#star').raty('score');
Get the current score.
$('#star').raty('score', number);
Set a score.
$('#star').raty('click', number);
Click on a star.
$('.star').raty('readOnly', boolean);
Change the read-only state.
$('#star').raty('cancel', boolean);
Cancel the rating. The last param force the click callback.
$('#star').raty('move', number);
Move the mouse to the given score point position.
I have detect my error that wan in my website by reading your article,
when i write the html code with jquery, a click function doesn't work $("#div1").html("
");Hi guys, i have implemented this js in phprunner. The stars show up good on view page, but if i export it to pdf the stars doesnt show up.
Any ides whatas goin on?
Thanks in advance
Hello!
Works fine but i have an issue with nested_attributes in a form.
How dow you set "scoreName: ''" for nested_attributes in Rails?
Hi There! How can i set the raty to readonly after click?
Great plugin! Thanks! I'm getting a JS error when mousing over the first star then mousing out to the left. I'm using the font icons. I noticed the error only shows up if I have "half" set to true. Any help would be appreciated.
jquery.raty.js:510 Uncaught TypeError: Cannot set property 'className' of undefined (jquery.raty.js:247)
at HTMLDivElement._setIcon (jquery.raty.js:510)
at HTMLDivElement._roundStars (jquery.raty.js:505)
at HTMLElement.
at HTMLElement.dispatch (jquery-1.11.1.min.js:3)
at HTMLElement.r.handle (jquery-1.11.1.min.js:3)
Hi,
great plugin! I Have a question about hints. How can you set a hints to display as tooltip and not in some container?
Thx!
Washington,
First thanks for this great codes.
One question is, if half is on, then click score is not the value customer clicked.
For instance if we use
$('div').raty({
click: function(score, evt) {
alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
}
});
and set
half: true
then if people click 3 start, it shows 2.677777..
Thanks for your reply.
The default raty rating it can be possible to make it dropdown? because i need is dropdown rating. There's a possibility that the default raty rating make dropdown? Thank you! Anyway. This tutorial is very useful. Keep it up. :)
What is the minimum jquery version to use 2.7.0 of raty.
I used 1.10.4 but raty is not working.
Getting Below Error:
Uncaught TypeError: Cannot read property 'fn' of undefined
Love it. thanks. Here's a sample of using $.post() because it took me a while.
We are trying to use the score method to pull the score using AJAX but it appears that the script doesn't wait on the result and instead shows 0 stars. Any ideas on fixing this? In the meantime we are just using another on load call to change it after the fact.
$('.rateMe').raty({
click: function(score, evt) {
var options = {
'action' : 'addRatingForArticle',
'volNum' : volNum,
'employeeID' : employeeID,
'section' : section,
'rating' : score
};
$.get( "ajax.php", options, function( data ) {
updateNumOfRatingsForArticle( volNum, section );
});
},
path: 'img',
readOnly: function() {
var options = {
'action' : 'employeeHasRatedArticle',
'volNum' : volNum,
'employeeID' : employeeID,
'section' : section
};
$.get( "ajax.php", options, function( data ) {
return Boolean(data);
});
},
score: function() {
var options = {
'action' : 'getRatingOfArticle',
'volNum' : volNum,
'section' : section
};
$.get( "ajax.php", options, function( data ) {
return data;
});
}
});
Thank you for great plugin.
I have a problem.
I want to make start bigger.
You can help me?
Hi Washington!
thank you for your plugin...
Had some trouble to use fonticon option in old android 2.3.3 browser, but I solved it changing some stuff in the css...
Have a look if you want to: http://stackoverflow.com/questions/32124326/font-icon-as-squares-in-android-2-3-3-browser/32124327#32124327
/best
/javier
Does it work with angularjs?
Hi,
Could you help me to remove title attribute from IMG tag
I am trying to use the raty plugin with handlebars
Here is my code
Handlebars Helper
Handlebars.registerHelper('ratingMark', function (id) {
$output = new Handlebars.SafeString($rating);
return $output;
});
HTML
The OutPut is Like:
[object Object]
Hello,
I'm making an ajax request on click event and get new calculated score after rate. I wanted to set the new score inside click event but I was unable to do it. What is the right way to do it?
Hi!
I wonder if we can run raty with rendered stars div like this. In my case, I already rendered html and just want to make raty work with this html. Hope you can help! Many thanks!
How to return the Hint on click?
I'm already returning the score this way:
}
});
I'm having a problem changing scores. Setting the score initially works fine, but on sebsequent score changes, I get opts == null on the following line:
_bindOver: function () {
var that = this,
action = that.opt.half ? 'mousemove.raty' : 'mouseover.raty'; // opt is undefined here
I'm calling $('ctrlName'),raty('score', value);
What js and css files we need to add for raty.
What i done, is giving error - unable to load images at input tag
Hey,
Is there any option to get hint and value both at a same time. as currently one disable the other.
i want to use more icon in wordpress as icon-check, icon star
Hello!
Is it possible to add "height" and "width" attributes to
tags:
...
to make it PageSpeed friendly?
爱的色放
I am using new version of raty v2.7.0. But unable to find touch support to raty. When i press the star using iPod respective click event doesn't get trigger. Do you guys have any solution for this.
Iam a newbie my code look so how i could integrate your code in my page
Hi Washington Botelho,
Its good to see you are helping other and doing good job.
Normally we are using $('div').raty({ number: 3 }) where we can get score of this rating from 1 to 3. In my scenario I have to set values of rating for example I want score in term of 12, 18 or 85. Can you confirm me is it possible to set score value instead of 1 to 3.
Thanks,
Nauman
for my question #807 a little workaround...
hey,
at first: very nice plugin! thanks for it!
how i can disable the hidden input field which will be created on loading ?
thanks!
How to rate the star right to left wise for arabic language.
Srikant, just set this CSS against the container
Double check the ratings come through in reverse, if they don't just change the values in your code.
Thanks, mate Nice plugin, works fine.
The file version v2.7.0 is wrong, there is a website in Chinese
Because my total value is 10, each star is 2, How can i show score * 2 for the targetFormat, I tried targetFormat: '{score}'*2, It is not work.
I'm trying to to use the Star Type one but when I add another option, in my case the targetScore option since I want to populate a hidden field, the cancel stops working.
My final options look something like this:
Is there a way to use a custom icon for each value? i.e. red icon for 1st star, yellow icon for the 2nd star....
Is there way with this plugin, to keep the value with "target score" AND ALSO provide a unique value for target score as well? So that each target score can be sent to my localstorage and not overwritten from a previous click?
thanks
Awesome plugin, thanks :)
With some phones, if you scroll down the page and tap on the star rating changes unintentionally, you can set only one vote and then voting for change is required before the command "cancel"?
Hello,
really cool Jquery Plugin, easy to use fast to implement.
Done for this Website in approx 2 hours, with db save, email ...
how would i set the score callback for a json data? my json data has more than one index so I just need to access the score index on my json.
hi men. I want to install this js www.salontoc.com site but now I do not know where to start. I need support
Hello,Tell me how to get the name of the stars "hints" under the stars at once, when the page loads, not when you move.
Fantastic plugin, However I have aproblem setting it to from right to left. Everything is working fine but when using half option and the mouse hover the stars only it display the half start if the mouse is over the left side of the star and it should be when the mouse over the right side of the star, any help???
Ahmed Ibrahim,
My this comment can help you: http://wbotelhos.com/raty#comment-767
Great library! I am using the Font (i) option, and I want to use the iconRange to have a different color star for each star (1=Blue, 2=Light Blue, 3=Yellow, 4=Orange, 5=Red).
Furthermore, I would love it if I could make all the stars leading up to the selected star that same color. For example, if 3 was selected, Stars 1, 2, and 3 would now be yellow and 4 & 5 would be empty. If 5 was selected, all stars would be red.
Any guidance on how best to do this would be GREATLY appreciated!
Troy,
Do like Vinicius J L said or wait for next version soon.
Troy,
You could apply in raty code the diff patch in https://github.com/wbotelhos/raty/issues/135.
This patch adds the new feature iconRangeSame that should be used together with iconRange.
The iconRangeSame is a boolean feature (default is false), when it is set to true, all icons before the current one (icons at left of current icon) are shown as the current one.
It has the same effect as http://www.htmldrive.net/items/show/170/Colourful-rating-system-with-CSS3-And-jQuery.
Very nice plugin. :)
Just a doubt, how does it get the
readOnly
value?Does
$('.rating').raty('readOnly')
return thereadOnly
value?Vinicius J L,
Does not matter if star is readonly or not, the way to get the score is the same:
Hi Washington,
Trying to use Star Type in 2.7 I set it to 'i' and have your fonts referenced, but getting blank boxes. What else do I need to do?
Bill,
Nothing, since your fonts is been fetched right.
Somethings is good a
command + shift + R
to clean the browser cache.Nice work dude... \m/
Hello Washington Botelho,
i need to show the ranking within 100 score currently there is max score only 5 if i show 5 stars i can have only max 5 score but i want to show 5 stars with max score of 100
is it possible within the options ?
Ashfaq,
Each star has +1 value, then do
100/5 = 20
, so each value will be20
for you.Do this change before save on database.
Hello,
I have created a very simple page. But it doesn't work with score attribute. I cannot find where the problem is. It will show 5 grey stars, but it should show 3 yellow stars.
James,
The options
score
just do the rating.If you want to change the numbe of stars, use the option
number
.Quick tip for anyone who will use Raty in RTL application
you will find that the half star icon will work properly in LTR as it will be flipped in RTL
To fix that don't create a new image just use this snippet:
The previous snippet will flip the image horizontally and it's cross browser.
Happy Coding!
Muhammad Saleh,
Thanks! (:
The click callback is not working with other options. My code is...
Naseer,
First, when you have a doubt try to do a simpler example as possible.
I don't know if some of your dynamic PHP variable is breaking something.
Put some code on a live example on web then pass us the link.
Hi,
How can I start using this Raty? What else do I need other than jquery.js and jquery.raty.js?
Sorry if this question looks silly.
Websun,
The best way to know how to use Raty is check this demo page. But basically is this:
Hi all! How can i set the raty to readonly after click it?
Websun,
You will also need the images for the
star on
star off
star half
and you may skip the fonts ;) I did that
Is it possible to turn off the hints all together?
When I pass null and it shows the 'score', it's not showing the fraction amount. I.e. a score of 3.5 for the hint is showing as 3. As such, I'd like to turn it off.
Tom,
The version 2.7.0 will suport fraction hint.
You can use the code from master to test it before the official release.
Wow, I'm impressed. This is very nice
Hi,
Is it possible to have a different image on hovering and different for a set rating. For example normally if i have a 3 star out of 5 star rating already set as the average user rating, so the 3 stars are yellow. What if while hovering over the stars i want to have orange stars showing your hover selection and when you select it say 4 star you set 4 stars yellow
thanks
Waleed,
The same request of Alex.
Please, open an issue.
Feature Request:
It would be nice if there were 4 states with 4 images. Currently this is used only for ON or OFF, so you can show only what the user has voted for before or what they are voting for now. Many sites have a need to show the average vote across all users as well. In that case you would need 4 states (OFF, ON-USER, ON-COMMUNITY, ON-BOTH). That way you can show both how this particular user voted as well as the average community vote.
alex,
It is a lot more code and I don't know if is a good idea.
The plugins is big enough. But open an issue and lats watch the +1's.
Washington,
First, thank you for writing and sharing this. It has saved me a lot of time and works great!
Second, I do have one small issue with cancel. It seems to work great in non-IE browsers (figures). In IE, it clears the rating when I mouseover the cancel image but as soon as I move my mouse off of the cancel image, my rating is reset to the original. Any ideas?
Thanks again,
Shawn
Shawn,
Could you open an issue?
Hi,
I am trying to change the to readonly onclick but it is not working.
Here is my code (my div's ID is starRating):
What am I doing wrong?
Elad,
I run you code and it works.
Hi,
is it possible to extend plugin so it outputs
<span>
element with starOn and starOff as classes? I'm thinking of using icon font instead of images.Thanks.
Teo Dragovic,
Yes, use the version 2.6.0 with option
starType
.Hi!
I want only the star selected get marked. How can I do that?
Thank you!
Tatiana Perere,
Use the options
single
.Did it changing the js lib.
I suggest to add this feature as an option. Very easy to do it.
Valeu!
Tatiana Perere,
Good job, but it is a option called
single
.But the next time a pull request is a polite thanks.
Washington Botelho,
Hey man, I'm sorry.
I undo those changes and I use the single=true option now.
But the mouseOver behavior was bothering me, so I added the code on
and to have the mark action onclick I added the same mouseOut bind to onClick bind:
Now I have a very different behavior when using SINGLE.
Cheers!
Can i change name of
<input type="hidden">
?i want to assign parent div name to hidden element name
Hussaim,
Yes, use the option
scoreName
.Same question as Jing bellow :)
florin,
Same answer! :)
Hi!
I hope after clicking the star become read-only.
How should do?
Thanks in advance!
Jing,
Inside
click
callback, calls thereadOnly
function.First, thanks for the plugin!
I deployed the plugin, but was having trouble with the validation of the rating. I wanted to use my own element to house the score. I used the scoreName & targetScore, but the plugin always creates an element with the same name as the one I created. Is there a way to tell the plugin to no generate an element?
Thanks!
Joey,
The score element is create only if you don't provide a valid (existent) target score: https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js#L215
when i write the html code with jquery, a click function doesn't work
help me please and excusa me, a dont speak english :D
cesar,
It should be work, since you bind the Raty after the HTML is on body.
Try:
Thank you for the script. Looking great :-)
http://www.rent-aroom.com/rate-our-service
rent-aroom,
Good to hear that.
Great job and thanks! (:
Is there any way to stop the user from submitting another rating after they have already sent one? I am recording these to database and want it to be a one time thing per user. Could I set it to read only after my POST?
John Paul,
You can, but it is just JS, Raty can't do it for you.
You can set it to read-only the time you want, but the time and how you want to do this, is up to you.
Washington Botelho,
I wrote the following code:
José Leite,
Build your HTML elements first, then after apply Raty using class and getting the rating from data attribute, like so:
I tried the mouse over but it did not work. on mouse over call back , I was setting the score in a hidden variable , to get it's value on form post.
Swagata,
Raty already has a hidden field called
score
by default the you can change.Your you can use the new option
scoreTarget
and decide to where send the score.Your you can use your ideia and copy the score for wherever you want.
Hi Washington,
I'm having a styling issue with Raty that I've been unable to solve.
If you take a look at http://recippia.herokuapp.com/test.html you can see that the stars stack vertically rather than displaying inline. I'v tried overriding the img tag formatting in style.css but this doesn't seem to do the trick. Any thoughts as to how to resolve this?
Many thanks in advance,
Marc
Great plugin, BTW!
Marc Stein,
I could not to see the problem.
But you can set
space: off
to avoid empty space and then manipulate the images.I want to display "based on x reviews" after stars. how can do this ?
i tried to modify js function, but does not find exact line to change
Surjit Sidhu,
You need to use the target options.
But if you want to display the number of reviews, you should keep it on database and display it for your own.
Hello sir, nice work.
I have one doubt I am not getting img of stars when I used it in Codeigniter project. Can you tell me where can I provide Base url for img folder??
Thanks.
sudarshan,
The base URL is up to you and your framework.
Raty can't provide it for you, sorry.
sudarshan,
Had the same issue,
if that doesnt work try,
Vlad,
It could work, but the case is not the whole Raty, just the images.
the slash is added programmatically I noticed.
So just 'img' and the stars assets should be loaded correctly. Vlad,
Malek,
It was fixed on version 2.5.1: "The path always was prepend avoiding absolute or different path for each icon."
Any easy way to make the stars smaller? Other than that, what a great plugin, keep up the great work.
Cabel,
You can set a default size for all intances.
But the only way is set the
size
to be possible calculate the right width.Hi.
Now, we can get the score from the callbcak function when the raty was initialized, suck as:
but can we get the score in the other function?
ISEE,
Get the score when it is initialized is on
score
option viafunction() { return 1; }
, not onclick
.On
click
you get the score choosed, like onmouseover
andmouseout
Hi Washington, can I set my own title for each star, such as
'good' => 'Strongly agree'
,'bad' => 'Strongly disagree'
?Thanks for your great work!
Darren Teng,
Yes, you have the options
hints
to do that.I found it now :)
you can set parameter hints.
Ex:
Hi, you can change it in source code. In hints array. I didn't found better solution.
Jirka Kyncl,
The better solution is just override the parameter
hints
.Excelente plugin! Estou usando. Obrigado!
Guilherme Duailibe,
Thank you! (:
Hi Washington, first of all, great plugin, gj!
Secondly, is there a way to enlarge the stars even more then 24px as seen here?
Regards, Daniel.
Daniel Better,
Yes, just use your new icon and set the value of it as px on
size
property.Hi Washington,
I would like to thank you for this plugin. It works flawlessly. Great work.
Regards.
Nishit,
Thanks man! (:
I have a need for multiple ratings on a page. For example, individual ratings for things such as "Price," "Value" and "Quality." Is there a way to specify scoreName for each instance of a rating? Excellent plugin, btw.
In the init function, I have changed:
to
This allows me to pass instance variables via the div. Example:
Perhaps a consideration to add to the master?
Brian,
Could you open a issue to create a
scoreName
callback?This way we can pass a function to
scoreName
and receive it via data or whatever.Thanks.
Hi,
I tried to use your plugin in my blog/web-shop but I got these errors:
Istvan Szollosi,
Check if your jQuery was imported before the Raty call.
Check if you jQuery version has the new method
on
.This problem is about import, about jQuery, not about Raty.
Hi
Is there a way of easily posting the data to a rails application? I have added the call to my application to get the images and the java but every time I post my form my defined attribute doesn't save the the rating to the DB. Heres my code :
Forgive me if it seems basic but I know very little about J query and am at beginner level. The
:review_rating
is my rails attribute that Im trying to commit the score to.Please let me know.
Many Thanks
Mark,
The value send by jQuery Raty is a hidden field, not what you put inside the div.
This content inside the div is ignored, because Raty will override it, then you
<%= :review_rating %>
is useless.By default the hidden field that holds the score is called
score
, but you can change it if you need.Awesome plugin! Super easy to use and dropped right into my rails app for a reviews rating system. Thanks!
Brandon,
Great! (:
Here is a link to a tutorial for ruby on rails. If anyone can get it to fully work let me know! I've been able to only get the update stars to work. (Average rating isn't working)
http://paweljaniak.co.za/2013/07/25/5-star-ratings-with-rails/
Daniel Weller,
Thanks for the contribution.
@Roosevelt: luckily you find the download on his github page as well: https://github.com/wbotelhos/raty
Max,
Thanks for the help. (:
Your download link to the plugin is throwing a 404 error.
Roosevelt P,
I fixed it. Thanks!
Hi,
Is there a way to check and see if a visitor has already voted & if so, then set it to read only?
Also, I would like to store the rating & number of votes in a mySQL database, how could I do that?
Bill,
You can save it into database.
When the user click on star, it actives the click callback, inside it you can get the score and save it via ajax.
Or you can just let the user to vote and create a submit button that will send the value keeped into hidden field named
score
by default.Hi, How to save previous ratings ?? How to download and install this plugin ?
please help
Tj,
To save the last rating, you need to keep it on your database.
To instal, just import the files e use the code showed on this page.
Hi,
how can i add this on a wordpress page? and/or include into a contact form?
If i want the plugin to open up different links or display messages depending on the number of stars the user clicked, how could i manage this
with your plugin?
Thanks in advance
Lanamaja,
You will use the same code. But where put it, I can't help you, because I don't know about wordpress coding.
To open whatever you want, use the callback click, inside it you can get the
score
and do your logic.Hi,
Could you help me with how i can post the rating using ajax.
Amarpreet,
You can do it from inside the click callback.
Get the score value and manipulate it with jQuery.
Ajax POST reference: http://api.jquery.com/jquery.post
first
Washington Botelho,
Die.
Thanks.