var ehealth = + $('#enemyHealth').text(); // this shows 100
$('.enemy-bar').css('width', function(index, value){
return ehealth - userDmg+"%"; // userDmg can be anything between 0-500
});
Problem is that if userDmg is 50 or more than 50 the enemy-bar width always sets to 0%. How it's possible to solve this ?
try to parse ehealth to integer first, i think type of data is string, its reason cant to calculate
var ehealth = parseInt(ehealth);
return ((ehealth - userDmg)/fullHeath)*100+"%";
Related
The following image will help explain what I am trying to achieve...
The top line (A) is a given calculated JavaScript value, lets call this the input.
The bottom line (B) is the output, so whatever input to (A) is given (will always be within the range) if a line (like the green one shown) were to be drawn I need the value of the output.
I have tried to search for phrases like "linked range", "parallel linked values" and similar but I think half of my problem is not knowing what this kind of calulation is called.
Usually I would be able to show what I have tried but on this one I really dont have a clue where to start.
Any help greatly appreciated.
So get the percentage in A
percentage = A[value] / ( A[max] - A[min] )
Use that to figure out the value in second
result = B[max] - percentage * (B[max] - B[min])
so basic JavaScript
var aMin = 0;
var aMax = 500;
var bMin = 24;
var bMax = 55;
var aValue = 100;
var percentage = aValue / ( aMax - aMin );
var result = bMax - percentage * (bMax - bMin);
console.log(result + "%");
Hello
I'm creating and then animating SVG lines using this code, the first one doesen't work, but all of the rest does, what am I missing?
var newElement = document.createElementNS('http://www.w3.org/2000/svg','line');
newElement.setAttribute('class','travelPath');
newElement.setAttribute('x1',currentCity.x);
newElement.setAttribute('y1',currentCity.y);
newElement.setAttribute('x2',nextCity.x+10);
newElement.setAttribute('y2',nextCity.y+10);
newElement.style.stroke="#3541b1";
$("#theSVG").append(newElement);
var length = newElement.getTotalLength();
$(newElement).css({
'stroke-dasharray': length+1,
'stroke-dashoffset': length+1
});
$(newElement).animate({'stroke-dashoffset': 0}, 3000, mina.bounce);
The length variable comes back as 0 on the first console.log, but when I run it again at a later time, it comes back with the correct value, and animates in.
Almost as if the line hasen't been drawn before it tries to animate.
getTotalLength isn't well supported to my understanding on a 'line' element.
You could convert this over to a path. Eg...
var newElement = document.createElementNS('http://www.w3.org/2000/svg','path');
newElement.setAttribute('class','travelPath');
newElement.setAttribute('d', "M50,50L100,100")
newElement.style.stroke="#3541b1";
$("#theSVG").append(newElement);
var length = newElement.getTotalLength();
console.log( length )
jsfiddle
See if that helps at all.
As you have just a straight line in a Euclidean plane, you can just compute the length directly using:
let length = Math.sqrt(
Math.pow( newCity.x + 10 - currentCity.x, 2 ) +
Math.pow( newCity.y + 10 - currentCity.y, 2 )
);
How can I get element width or height value which would be translated as a pixel number? All I got by using .css('width') are the expressions, not even a percentage number, like calc(-25px + 50%).
Edit
my code here. (Chrome)
var bars_width = element.css('width');
$('.histgram-content').css('width', bars_width);
bars_width = parseInt(bars_width.replace('px', '')) * 0.85;
$('.histgram-bar').css('width', (bars_width/data.length).toFixed(0).toString() + 'px');
/*** average Y ***/
var graph_height = $('.histgram-graph').css('height');
graph_height = parseInt(graph_height.replace('px', ''));
var average_height = $('.average-line').css('top');
average_height = graph_height - parseInt(average_height.replace('px', ''));
The average_height returns the expression I said. The last line got the result of 'NaN'.
You can use any of jQuery's dimension related methods:
width()
height()
outerWidth()
outerHeight()
Working example
Use window.getComputedStyle(),example:
window.getComputedStyle($('div'))['width']
You can height
$('#element-id').height();
You can width
$('#element-id').width();
I have a string value in percent unit that will be assign to height but before assigning I need to deduct another height which got by top() the output result is NaN, My code is as below:
var valHeight = "50%";
var result = valHeight - $("#item").css("top");
$("#AnotherItem").height(result);
as valHeight is string and percent and height is pixel the result will be NaN. How may I solve that issue? the valHeight is percent but top value is pixel. I need to have my result as percent
Let's clarify more:
I want to use calc function of CSS and I guess the below code is correct:
$('#AnotherItem').css('height', valHeight).css('height', '-='+itemOffsetTop);
the only problem is I want to use subtracted value in animate function.
First
valHeight is a string you need to convert that to number.
var varlHeight = parseInt("50px");
Second
Your $("#item").top() is invalid, use this instead.
$("#item").offset().top
Putting them together
var valHeight=parseInt("50px");
var result= valHeight - $("#item").offset().top;
$("#AnotherItem").height(result);
Update
Since you've updated your post with a '50%' value. How about doing this kind of approach instead.
var valHeight="50%";
var itemOffsetTop = $("#item").offset().top;
$('#AnotherItem').css('height', valHeight).css('height', '-='+itemOffsetTop);
I see two issues with your code:
valHeight is a string, not a number. It needs to be a number before using it in a math operation.
It's also not clear where you're getting .top() from. Perhaps you meant to use .offset().top?
Example:
var valHeight = 50;
var result = valHeight - $("#item").offset().top;
$("#AnotherItem").height(result + "px");
Now, you modified your question to use 50% and it doesn't really make sense. If you want the result to be 50% of $("#item").offset().top, then you could use something like this:
var valHeight = 0.5;
var result = $("#item").offset().top * valHeight;
$("#AnotherItem").height(result + "px");
You need to use .offset() as there is no method as .top() in jQuery
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
valHeight should be a number
Code
var valHeight = 50; //Or, parseInt("50px")
var result = valHeight - $("#item").offset().top;
$("#AnotherItem").height(result + "px");
I am working on fixing a website which is coded by someone else. Codes are really messy so I am afraid I can't post it all here but I believe I provided enough information for you to see what could be wrong. Because at this point I am lost.
1. We get min and max limits
parent_id = '<?php echo $parent_id; ?>';
api = '<?php echo $api; ?>';
$.getJSON('getlimits.php', {'id': ""+parent_id+"", 'api': ""+api+""}, function(data) {
// Loop and assign Json (returned value) to our limit variables
$.each(data, function(key, val) {
min_limit = key;
max_limit = val;
});
});
getlimits.php OutPut:
{"10":"15000"}
2. We check the limits
amount = $('#quantity', this).val();
console.log(amount + ' - Max : ' + max_limit + ' Min : ' + min_limit);
if ( amount < min_limit) {
displayError("You can't order less than " + min_limit + " units",2000);
return false;
}
else if ( amount > max_limit ) {
displayError("You can't order more than " + max_limit + " units.",2000);
return false;
}
Logged Results;
800 - Max : 15000 Min : 10
I typed 800 units. It shouldn't give any error but I am getting following error;
You can't order more than 15000 units.
I am truly lost. Log shows correct values, getlimits.php returns correct values but if & else if conditions are not working.
I will be glad if anyone could help me out with this problem.
Thank you in advance.
amount is not an integer when you grab it through .val().
So adjust this line:
amount = $('#quantity', this).val();
to
amount = parseInt($('#quantity', this).val());
As pointed out by Dennis, you will have to parseInt the values you are grabbing from the JSON as well. (min_limit and max_limit).
As Dennis also pointed out, you should add 10 as a second parameter to parseInt to make sure it parses as a decimal number.
So:
$.each(data, function(key, val) {
min_limit = parseInt(key,10);
max_limit = parseInt(val,10);
});
amount = parseInt($('#quantity', this).val(),10);
It's because you are comparing a string to string:
"800" > "15000" === true
You need to convert at least one (preferably both) to a number with parseInt:
$.each(data, function(key, val) {
min_limit = parseInt(key);
max_limit = parseInt(val);
});
amount = parseInt($('#quantity', this).val());
Make sure you call parseInt(number, 10) to get a numeric variable. It looks like you are comparing strings which will give you different results from comparing numbers. The second parameter (10) is the radix, which will make sure you get a decimal value.
You need to do this for min_limit and max_limit, as well as the .val() call, which will always return a string.