javascript - Change CSS if input value has specfic text ( Using plus minus buttons) -


i have input box plus , minus buttons
want show div pete (display: block) if input box reaches value 50.
tried using keyup works if manually put 50 value , not using plus minus buttons (in case, have disabled input).

js fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <p id="pete" style="display:none;">pete</p> <div class="sp-quantity">    <div class="sp-minus fff"> <a class="ddd" href="#">-</a>   </div>   <div class="sp-input">     <input type="text" class="quntity-input" value="52" disabled />   </div>   <div class="sp-plus fff"> <a class="ddd" href="#">+</a>   </div> </div>

jquery:

$(".ddd").on("click", function() {   var $button = $(this);   var oldvalue = $button.closest('.sp-quantity').find("input.quntity-input").val();    if ($button.text() == "+") {     var newval = parsefloat(oldvalue) + 1;   } else {     // don't allow decrementing below 0     if (oldvalue > 0) {       var newval = parsefloat(oldvalue) - 1;     } else {       newval = 0;     }   }    $button.closest('.sp-quantity').find("input.quntity-input").val(newval);  }); $(".quntity-input").keyup(function() {   if (this.value == "50") {     $("#pete").css("display", "block");   } else {     $("#pete").css("display", "none");   } });

css:

.sp-quantity {   width: 124px;   height: 42px;   font-family: "proximanova bold", helvetica, arial; }  .sp-minus {   width: 40px;   height: 40px;   border: 1px solid #e1e1e1;   float: left;   text-align: center; }  .sp-input {   width: 40px;   height: 40px;   border: 1px solid #e1e1e1;   border-left: 0px solid black;   float: left; }  .sp-plus {   width: 40px;   height: 40px;   border: 1px solid #e1e1e1;   border-left: 0px solid #e1e1e1;   float: left;   text-align: center; }  .sp-input input {   width: 30px;   height: 34px;   text-align: center;   font-family: "proximanova bold", helvetica, arial;   border: none; }  .sp-input input:focus {   border: 1px solid #e1e1e1;   border: none; }  .sp-minus a, .sp-plus {   display: block;   width: 100%;   height: 100%;   padding-top: 5px; }

a few tweaks , you're there. think best achieved via custom event on input. see fiddle.

var $button = $(this); var inputcontrol =  $button.closest('.sp-quantity').find("input.quntity-input"); var oldvalue = inputcontrol.val();  if ($button.text() == "+") {     var newval = parsefloat(oldvalue) + 1; } else {     // don't allow decrementing below 0     if (oldvalue > 0) {         var newval = parsefloat(oldvalue) - 1;     } else {         newval = 0;     } }  if (newval != oldvalue) {     inputcontrol.val(newval);      inputcontrol.trigger( 'value-updated'); }   });  $(".ddd").closest('.sp-quantity').find("input.quntity-input").on( 'value-updated', function() {     if ($(this).val() == "50" ) {     $('p#pete').show();   } else {     $('p#pete').hide();   } });  $(".quntity-input").keyup(function() {     if (this.value == "50") {         $("#pete").css("display", "block");     }     else {         $("#pete").css("display", "none");     } });

Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more