Need some help with BigStars.

Oct 19, 2012 at 2:58 PM

I simply need the big stars and nothing else. When I put the bigstars inside a form behind a input variable, it clips the stars? Can someone help me please?

Here is the code.


<!DOCTYPE html><html>

<head>    <title>RateIt</title>    <link href="../src/rateit.css" rel="stylesheet" type="text/css">    <script src="" type="text/javascript"></script>    <link href="content/bigstars.css" rel="stylesheet" type="text/css"></head>
<body><form><input type="range" min="0" max="10" value="0" step="1" id="backing2"><div class="rateit bigstars" data-rateit-backingfld="#backing2"></div></form>

<script src="../src/jquery.rateit.js" type="text/javascript"></script></body></html>


Thank you so much.

Oct 19, 2012 at 3:26 PM
You need to set the data-rateit-starwidth and data-rateit-starheight attributes.
Oct 19, 2012 at 3:45 PM
Edited Oct 19, 2012 at 3:53 PM

Thank you so much. It does work. Another quick question (sorry for bugging you). Does this work with jQuery 1.8.2 and jQuery mobile 1.2.0? I have upgraded all my code to this version and want to be aware that that's not going to break rateit. Thanks again. 

Oct 19, 2012 at 5:13 PM
Yes it works with 1.8.2
Oct 19, 2012 at 5:16 PM

Thanks again. I have been testing it and it seems to work but with jQuery mobile, it actually does show the slider and the stars. So I had to put a <div> around the slider and hide it. has this bug been reported before? 

Oct 19, 2012 at 6:26 PM
No, thanks, I will later create a work item out of it and fix it.
Oct 20, 2012 at 10:27 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Oct 20, 2012 at 10:50 AM
Edited Oct 20, 2012 at 10:50 AM

This is a jQuery Mobile issue. You have to add data-role="none" to your input-range element, so that jQuery mobile doesn't enhance it.

<input type="range"id="test"data-role="none" value="1" max="5"/>
<div class="rateit"data-rateit-backingfld="#test"></div>

See: (slider)

Oct 31, 2012 at 11:58 AM

Sorry forgot to thank you for this. This really works with Jquery Mobile. 

Another quick question, How can we build validations? I have done it for text fields and others and have not done it for slider. I do not want 0 stars to be submitted? is it built into rateit or I need to do something separate?

Oct 31, 2012 at 1:39 PM

Validation is not build in. 

I guess if you use any validation framework (like jquery.validate) there should be support for input range validation.

If not, just on submit, check if $('#myrateit').rateit('value')  > 0