rater
rater copied to clipboard
iOS support
Hi, is this script supported on iOS browser ? I'm testing it on iPad (http://auxiliary.github.io/rater/) and if there are multiple rating elements on the same page, each click on one rating element resets the others to their default value.
is it normal ?
Rater hasn't been tested on iOS, however, this is a very strange bug and I haven't seen it before. Did you test the rater homepage or did you use the script and made your own test?
I tested both, rater homepage and my own test.
So I tested on a couple of places and it worked on an iPad and an iPhone but it had problems on certain versions of Firefox on Mac OSX. The problem only occurred for some star symbols, meaning that the UTF8 code for those is probably represented in a different way. Did you also see this occur for the heart rating at the bottom of the page?
Yes, this issue occurs also with the heart rating. My IPADs are in IOS 8, i will try to find IOS 9 devices to test it.
Is there any fix for that issue? I have the same probleme on all mobile iOS devices.
@auxiliary Same problem, iOS multiple raters breaks it
I have the same problem, the reason is that mobile iOS treats clicks as hover event. The solution is described here http://stackoverflow.com/questions/7892863/jquery-click-not-working-with-ipad . In rater.js file you need to replace $(this.element).on("click", $.proxy(this.select, this)); with $(this.element).on("click touchstart", $.proxy(this.select, this));
rater.js on iOS can't emmit "change" event.
Change "click" to "click touchstart" works but
$(".rating").on("change", function(ev, data){
console.log(data.from, data.to);
});
shows
0 NaN
NaN 5
Hello. I downloaded examples page. If i touch on one of rating then all other rating to be clean.
Tested on iphone 6.
Yeah, I'm a little screwed. I'm building a mobile web app using rater.js. I had to add multiple raters on one page and I didn't realize until now that mobile safari is broken. Not much time to roll my own solution, but I can't find any workaround. :-( suggestions?
I ended up using a different package called RateYo (http://rateyo.fundoocode.ninja/) - apple and Safari are pretty major browsers and really needs corrected. Sorry for recommending another package @auxiliary but just helping @brandonrich out with a package that works.
Is there a workaround for this issue? Thanks
@rsands2801 same for me and also worked!
@ghost Thanks! It works perfect
I had the same problem on the iPad. I fixed (hacked) the problem like this:
$('.star-rating').rate({
max_value: 5,
step_size: 0.5,
selected_symbol_type: 'fontawesome_star'
}).on('touchend', function(ev) {
var offset = $(this).offset();
var rating = (ev.originalEvent.changedTouches[0].pageX - offset.left) / $(this).width() * 10;
$(this).rate('setValue', Math.ceil(rating)/2);
});
It's not a good solution, but it's working for me.