We Keep Coding

Button dissapear when value reaches 0 JAVASCRIPT

This my code:
$('.upgrade-strength').on('click', function () {
var strCount = $('#strId');
var points = $('#points');
var userId = $(this).attr('id');
strCount.html(function(i, val) { return val*1+1 });
points.html(function(i, val) {
if(val*1>0){
return val*1-1;
}else{
document.getElementById("strBtn").innerHTML = "";
document.getElementById("dexBtn").innerHTML = "";
document.getElementById("vitBtn").innerHTML = "";
document.getElementById("intBtn").innerHTML = "";
}
});
$.ajax("/upgrade-strength/"+userId,
{
});
});
<p>Available points: <strong><span id="points">{{Auth::user()->points}}</span></strong></p>
When I clicking the button the counter goes down till 0 and then button dissapears. But what happens more is, when the
points.html(function(i, val) reaches zero the button did not dissapear. You have to click one more time tu buttons dissapear. How to solve this ?

Try this it will work:
strCount.html(function(i, val) { return val*1+1 });
points.html(function(i, val) {
if(val*1>0){
val = val*1-1;
if(val == 0){
document.getElementById("strBtn").innerHTML = "";
document.getElementById("dexBtn").innerHTML = "";
document.getElementById("vitBtn").innerHTML = "";
document.getElementById("intBtn").innerHTML = "";
}
return val;
}else{
document.getElementById("strBtn").innerHTML = "";
document.getElementById("dexBtn").innerHTML = "";
document.getElementById("vitBtn").innerHTML = "";
document.getElementById("intBtn").innerHTML = "";
}

When val is 1, look at your code, and see what it's doing:
if(val*1>0) - I don't know why you keep using *1 but never mind that. 1 > 0 is true, so we're in the if block.
return val*1-1; - again, what's the deal with *1? Anyway, this returns 0.
The else block is not run.
The next time you click, if(val*1>0) is false so the else gets run, hiding the buttons.
Instead you should do something like:
If the value is 1, hide the buttons
Either way, return val-1;

How to increase and decrease a counter from one button - click and click again jQuery

This is the code that I am currently using:
<script>
$(".lk").click(function(){
$(this).find("#lke").html(function(i, val) { return val*1+1 });
});
$(".lk").click(function(){
$(this).find("#lke").html(function(i, val) { return val*1-1 });
});
</script>
When the user clicks on the button, the value of #lke increases by 1. When he clicks again, the value decreases by 1. The code that I am currently using does not work so how would I fix this?

You can use an external var to decide if you have to increment o decrement the value
<script>
var increment = true;
$(".lk").click(function(){
var lke = $(this).find("#lke"),
value = parseInt(lke.html()) || 0;
lke.html( increment ? value + 1 : value - 1);
increment = !increment;
});
</script>

Your code doesn't work because you assign two events for every click - one which increases the value and one which decreases it, so nothing happens.
You could use an external variable such as toAdd to determine which action to do:
var toAdd = 1;
$(".lk").click(function(){
newValue = oldValue + toAdd;
toAdd *= -1;
...
});

You put two call of the same object, try this instead
<script>
var val = 0; // Put the original value
var negative = false;
$( document ).ready(function() { // You need to declare document ready
$(".lk").click(function(){
val = val + ((negative) ? -1 : 1); // Change if its positive or negative
negative = (negative) ? false : true;
$("#lke").text(val); // Adjust the html ?
});
});
</script>

Try something like this:
$(".lk").click(function() {
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked'));
$(this).find("#lke").html(function(i, val) { return val*1-1 });
} else {
$(this).addClass('clicked');
$(this).find("#lke").html(function(i, val) { return val*1+1 });
}
});
You could also use a data attribute instead of checking for a class aswell.
Or use toggleClass().
$(".lk").click(function() {
if ($(this).hasClass('clicked')) {
$(this).toggleClass('clicked'));
$(this).find("#lke").html(function(i, val) { return val*1-1 });
} else {
$(this).toggleClass('clicked');
$(this).find("#lke").html(function(i, val) { return val*1+1 });
}
});

Change background color with checkbox, limited number of checkboxes selectable

Desired: User can only click on 2 out of 3 displayed checkboxes; when the user clicks on a checkbox, the checkbox background turns orange.
Currently: The first checkbox selected acts as desired. The second checkbox ticks, but does not change background color. Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected). A 3rd checkbox is not selectable whilst two are already selected.
Requesting: Help to achieve the desired, thank you!
Fiddle: http://jsfiddle.net/0fkn1xs4/
Code:
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
$(this).closest("li").toggleClass("checked", this.checked);
});
A slightly cleaner implementation that does what you want. Check out the JSFiddle

Try this:
$('input.playerCheckbox').on('change', function (event) {
var selectableFriends = 2;
if ($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
} else {
$(this).closest("li").toggleClass("checked");
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
});
Check it out here: JSFIDDLE

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
this.checked = false;
}
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.

DEMO
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
$(this).closest("li").removeClass('checked');
}
});

This works in Fiddler for ya.
$('.playerCheckbox').change(function() {
if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
else{
if( this.checked == true ) {$(this).closest("li").addClass("checked");}
if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
}
});

.each function () for cloned inputs

Trying to create the Preview form and do not understand why each function () not working in this script. Or works but only for the last cloned row and ignore the zero values ​​in the previously cloned inputs.
$('input[id^=Mult_factor_]').each(function () {
var MultFactor = $(this).val();
var TotPoints = $('#Tot_points').val();
var exp1 = "Overload";
var exp2 = "Load is: ";
if (MultFactor < 1 || TotPoints > 100) {
$('#ExemptionLimitsText').text(exp1).show();
$('#PrwTotPointsText').hide();
} else {
$('#ExemptionLimitsText').text(exp2).show();
$('#PrwTotPointsText').text($('#Tot_points').val()).show();
}
});
JSfiddle
I need: If at least one of cloned MultiFactor value is zero show "Overload"

Based on your comment, you want to display the word "Overload" if either the "Additional" field is over 100 or if any of the multifactor fields is 0.
However, your loop continues to process if either of these conditions are met.
Do not use a loop, instead search specifically for a multifaktor value of 0.
var totalPoints = parseInt($('#Tot_points').val());
if(totalPoints > 100 || $('input[name="MultFaktor"]').filter(function(){return this.value=='0'}).length > 0) {
$('#ExemptionLimitsText').text("Overload").show();
$('#PrwTotPointsText').hide();
} else {
$('#ExemptionLimitsText').text("Load is: ").show();
$('#PrwTotPointsText').text(totalPoints).show();
}

Return false on overload
var valid = true;
var exp1 = "Overload";
var exp2 = "Load is: ";
var TotPoints = $('#Tot_points').val();
$('input[name=MultFaktor]').each(function () {
var $this = $(this);
if ($.trim($(this).val()) == '0' || TotPoints > 100) {
valid = false;
} else {
$('#ExemptionLimitsText').text(exp2).show();
$('#PrwTotPointsText').text($('#Tot_points').val()).show();
}
});
if (valid == false) {
e.preventDefault();
$('#ExemptionLimitsText').text(exp1).show();
$('#PrwTotPointsText').hide();
}

how to convert mouse events and touch events using java script

Any idea about about how to use double click event in tablets or ipad. Like 'onmousedown' is equivalent to 'touchstart'.

maybe the hammer.js library for multi-touch gestures could interest you too: http://eightmedia.github.com/hammer.js/

I guess a quick google search would solve your problem, the short answer is yes there are. the long answer is you better of using a framework like jQuery-mobile can handle that for you, giving you ontouch, scroll etc events..
also look into energize.js that make those clicks events faster
also similiar to this stackvoverflow answer

To Detect long press you can simply use like this.
<div id="element" style="width:200px;height:200px; border:1px solid red;"> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<!------------ Javascript Code ---------->
$('#element').each(function() {
var timeout, longtouch;
$(this).mousedown(function() {
timeout = setTimeout(function() {
longtouch = true;
}, 1000);
}).mouseup(function() {
if (longtouch) {
alert('long touch');
} else {
alert('short touch');
}
longtouch = false;
clearTimeout(timeout);
});
});​

Aged topic, but not marked as answered yet, so I thought I'd give it a shot.
For most cases, a JavaScript framework that adds an abstraction layer to the events would help. (As others have pointed out.) But for the cases where you can't, try this.
var el = document.getElementById('myelement');
var numClicks = 0; // count the number of recent clicks
var lastClickTime = 0; // time of last click in milliseconds
var threshold = 50; // you need to set this to a reasonable value
function isDoubleClick() {
var r;
if( numClicks == 0 ) {
numClicks++; // first click never counts
r = false;
} else if( new Date().getTime() - lastClickTime > threshold ) {
numClicks = 1; // too long time has passed since lsat click, reset the count
r = false;
} else {
numClicks++; // note: reset numClicks here if you want to treat triple-clicks and beyond differently
r = true;
}
lastClickTime = new Date().getTime();
return r;
}
var myClickFunction = function (event) {
if( isDoubleClick() ) {
// your double-click code
} else {
// plain click code
}
}
// bind your own click function to the mouse click event
el.addEventListener("mouseclick", myClickFunction, false);

Try to implement doubleTap you can use this code.
(function($){
// Determine if we on iPhone or iPad
var isiOS = false;
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
isiOS = true;
}
$.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
var eventName, action;
delay = delay == null? 500 : delay;
eventName = isiOS == true? 'touchend' : 'click';
$(this).bind(eventName, function(event){
var now = new Date().getTime();
var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
var delta = now - lastTouch;
clearTimeout(action);
if(delta<500 && delta>0){
if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
onDoubleTapCallback(event);
}
}else{
$(this).data('lastTouch', now);
action = setTimeout(function(evt){
if(onTapCallback != null && typeof onTapCallback == 'function'){
onTapCallback(evt);
}
clearTimeout(action); // clear the timeout
}, delay, [event]);
}
$(this).data('lastTouch', now);
});
};
})(jQuery);
and to use doubleTap event
$(selector).doubletap(
/** doubletap-dblclick callback */
function(event){
alert('double-tap');
},
/** touch-click callback (touch) */
function(event){
alert('single-tap');
},
/** doubletap-dblclick delay (default is 500 ms) */
400
);

I tried something like this :
<------java script and jquery ------>
var startTime,endTime;
$('#main-content').mousedown(function(event){
startTime = new Date().getTime();
//any other action
});
$('#main-content').mouseup(function(event){
endTime = new Date().getTime();
if(isTouchDevice()){
if((endTime-startTime)>200 && (endTime-startTime)<1000 ){
alert('long touch')
}
}
});
function isTouchDevice(){
return (typeof(window.ontouchstart) != 'undefined') ? true : false;
}