jquery - Star rating widget not updating on iPad and iPhone -

-

i have implmented custom star-rating widget in css jquery based on radio inputs. works fine on desktop browsers , android devices it's not working on ipad iphone.

you can see widget in action here.

on ipad (or iphone) when touch star, doesnt' remain checked.

here th full code: a jsfiddle

html

<form id="signup_form" class="custom" enctype="multipart/form-data" method="post" name="signup_form" action="">   <div id="field_2">     <input id="option_221" type="radio" title="very happy" value="actual_job_rate_5" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_220" type="radio" title="happy" value="actual_job_rate_4" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_219" type="radio" title="neutral" value="actual_job_rate_3" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_218" type="radio" title="unhappy" value="actual_job_rate_2" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_217" type="radio" title="very unhappy" value="actual_job_rate_1" name="field_2" style="display: none;">     <span class="custom radio" ></span>   </div> </form>

css

/* star rating radio buttons */  form.custom #field_2:not(old) {   display: inline-block;   width: 9.5em;   height: 1.9em;   overflow: hidden;   vertical-align: bottom;   float: left; }  form.custom #field_2:not(old) > input {   margin-right: -100%;   opacity: 0; }  form.custom #field_2:not(old) > span.custom.radio {   display: block;   float: right;   position: relative;   background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-off.svg');   background-size: contain;   border: 0px;   top: 0px;   left: 0px;   width: 1.9em;   height: 1.9em; }  form.custom #field_2:not(old) > span.custom.radio:before {   content: '';   display: block;   width: 1.9em;   height: 1.9em;   background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-on.svg');   background-size: contain;   opacity: 0;   transition: opacity 0.2s linear;   top: 0px;   left: 0px;   width: 1.9em;   height: 1.9em; }  form.custom #field_2:not(old) > span.custom.radio:hover:before, form.custom #field_2:not(old) > span.custom.radio:hover ~ span.custom.radio:before, form.custom #field_2:not(:hover) >:checked ~ span.custom.radio:before {   opacity: 1; }

jquery

   var toggleradio = function($element) {     var $input = $element.prev(),         $form = $input.closest('form.custom'),         input = $input[0];      if (false === $input.is(':disabled')) {       $form.find('input:radio[name="' + $input.attr('name') + '"]').next().not($element).removeclass('checked');       if ( !$element.hasclass('checked') ) {         $element.toggleclass('checked');       }       input.checked = $element.hasclass('checked');        $input.trigger('change');     }   };   $(document).on('click', 'form.custom span.custom.radio', function (event) {     event.preventdefault();     event.stoppropagation();      toggleradio($(this));   });

thanks !


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more