jQuery add two CSS property values - javascript

I was trying to get the top position of the element and the margin-bottom value.
that worked:
var top = -$('elem').postion().top; // lets say its -54
var margin = $('elem').css('margin-top'); // lets say its 0
Bud I need to add these up for my animate function. so top+margin but jQuery gives -540 px but it need to return -54 px.. or when its negative it just gives -54-10px when I need -64 px.
Is there someting to get this fixed? I can't come up with it and it annoys me!
My code:
var top = -$('#id1').position().top;
var margin = $('.scrollable').css('margin-top');
var combine = top+margin;
$('.animate').animate({'margin-top' : combine});

Bud i need to add these up for my animate function. so top+margin but jQuery gives 540 p
css values are strings, so since one of your operands is a string, the + is being interpreted as a concatenation operator (54 + "0" = "540"), not an addition operator. (Details) To turn them into numbers, use parseInt(str, 10), e.g.:
// I believe `top` will already be a number; check and if not, use parseInt here too,
// e.g. var top = -parseInt($('#id1').position().top, 10);
var top = -$('#id1').position().top;
// This will definitely be a string that needs parsing; note that we're assuming
// here that the margin has been given in `px` units.
var margin = parseInt($('.scrollable').css('margin-top'), 10);
// Now this + is an addition, not a concatenation
var combine = top+margin;
$('.animate').animate({'margin-top' : -combine});

It's because it returns the values as strings, and using the + operator on them concatenates. You can use parseInt to get a number from a string. It'll even work if there is a px suffix, though it will stop at that.
var top = $('elem').postion().top;
var margin = $('elem').css('margin-top');
var total = parseInt(top, 10) + parseInt(margin, 10);

Try this
var combine = parseInt(top) + parseInt(margin);

Related

jQuery removing numbers after the point

I would like my result to show the whole number as 1500, not 1500.00. I tried round () and toFixed () but it doesn't change my result and it doesn't round. Where do I go wrong?
var applying_credit_final = "applying_credit";
var applying_credit = thisPointer.entity['applying_credit'];
applying_credit_final = parseFloat(applying_credit_final);
applying_credit = parseFloat(applying_credit);
if (!isNaN(applying_credit_final) && !isNaN(applying_credit)) {
var resultUNi = Number((applying_credit / 1000).toFixed())
var numeralValUni = numeral(resultUNi)._value;
numeralValUnit.toFixed()
My source
https://jsfiddle.net/Palucci92/jueL50hb/4/
To remove excessive decimals you need to specify the number of digits to keep as parameter on toFixed:
var resultUNi = Number((applying_credit / 1000).toFixed(0))
Notice 0 as parameter in toFixed(0) resulting in an integer. You can also leave the parameter out if its zero because it defaults to it.

apply negative value with variable using .css with jquery

I have a syntax issue as I want to do something quite simple. Apply a negative value to a variable using .css.
Here yo have the code:
var figureImage = $('.js-image-centering');
var figureImageHeight = figureImage.height();
var figureImageWidth = figureImage.width();
var figureImageMarginLeft = (0-(figureImageWidth/2));
var figureImageMarginTop = (0-(figureImageHeight/2));
figureImage.css('margin-left', figureImageMarginLeft);
figureImage.css('margin-top', figureImageMarginTop);
I would like to forget about figureImageMarginLeft and figureImageMarginTop. So, its it possible to something like this?
figureImage.css('margin-left', -figureImageMarginLeft);
How do you write it correctly?
Yes Absolutely. If you do,
var a = 100;
$(".stuff").css("margin-left",-a)
the element would get the rule: margin-left: -100px
What about figureImage.css('margin-left', "-" + figureImageMarginLeft + 'px');?
You can just do this:
var mL = -30;
$("div").css("marginLeft", mL + "px");
Fiddle
That will do the trick (will make positive values negative and negatives positiv):
figureImage.css('margin-left', -figureImageMarginLeft+"px");
or, if you want it to be always negative:
figureImage.css('margin-left', -Math.abs(figureImageMarginLeft)+"px");
always positiv:
figureImage.css('margin-left', Math.abs(figureImageMarginLeft)+"px");
example: http://jsfiddle.net/rN3cw/

Add strings together in jQuery

i need to get a string in jQuery to determine an integer value, then add the letters "px" to the string.
So, this is what I have:
$(function(){
var embed_height = $('.embedheight').height();
if( embed_height < 160 )
{
var imheight = embed_height-10;
var infowidth = imheight+10+"px";
$('.embedinfo').css('left','infow');
}
});
what i need is the variable infowidth to say for example 135px
currently, that jQuery function is not working
Why? jQuery will automatically cast units (px) on to an integer:
var infowidth = imheight+10;
$('.embedinfo').css('left', infowidth);
Fiddle here to play with it.

Performing mathematical operations on attribute value

I am attempting to perform mathematical operations with JavaScript on values obtained from an attribute. The attribute is created via a PHP loop. I will give an example of one of the html tags containing the attributes, but keep in mind that there are many of these tags which contain unique attribute values.
The HTML:
The JavaScript(jQuery):
$("a[href^='secondary_imgs.php']").click(function(){
var pageWidth = $(window).width();
var maxshadowWidth = (Math.floor(pageWidth * 0.91808874)) - 2;
var mWidth = $(this).attr("mwidth");
var maxSecondaryWidth = mWidth + 60;
alert (maxSecondaryWidth);
if(maxSecondaryWidth <= maxshadowWidth) {
var shadowWidth = maxSecondaryWidth;
} else {
var shadowWidth = maxshadowWidth;
}
var shadowboxrel = 'shadowbox;width=' + shadowWidth;
$(this).attr('rel', shadowboxrel);
The operation doesn't seem to be working, and I have a feeling it has to do with my lack of experience using mathematical operations in javascript. In this case, I think something is wrong with my method of using the attribute value, in the mathematical operation.
For example, the above width attribute is defined as 593. I define the maxSecondaryWidth as mWidth + 60. I fired an alert to see what value I was getting. It should have been shown as 653, yet the value that is 'alerted' is 59360. Obviously I don't understand how to add, as the + is concatenating the two values, as opposed to adding them together. Could it have to do with needing to transform the attribute value from a string into an integer?
You have to convert to a number using parseInt(), otherwise + will do string concatenation:
var mWidth = parseInt($(this).attr("mwidth"), 10);
If the attribute can also be a float, use parseFloat() instead of parseInt().
Do this to make sure mwidth is a number:
var mWidth = parseInt($(this).attr("mwidth"), 10);
Otherwise, + will perform a string concatenation. Alternatively, if you need mwidth to be a floating point number, do this:
var mWidth = parseFloat($(this).attr("mwidth"));
You can do a couple things:
parseInt(mWidth, 10); // int
parseFloat(mWidth); // float
Number(mWidth); // number
otherwise javascript will believe it's a string.
Some less common conversions:
mWidth | 0; // int (javascript bitwise operations are 32-bit signed intergers)
+mWidth; // force Number
i think that you must do something safer (as it is always better);
You should check if it is a number or not:
DOM:
JS:
$("a[mwidth]").each(function(){
var $attr = $(this).attr('mwidth');
if(!isNaN($attr)){
sum += (parseInt($attr));
}
});
If you remove the condition the results will be NaN
Take a look at : http://jsfiddle.net/zVwYB/

jQuery / javascript variable in if statement not working

I have a variable as such:
var is_last = $('.paging a:last').attr('rel');
this returns '-400' which is correct.
However, i need to add 200 to this so the answer is '-200'
if i do this:
var is_last = $('.paging a:last').attr('rel')+200;
the variable is now '-400200'
How can i pass the variable as a value?
A.
You need to parse the output of .attr(), it to an integer first using parseInt() so you're dealing with a number (and not a string), like this:
var is_last = parseInt($('.paging a:last').attr('rel'), 10) + 200;
I reckon that #Nick Craver is correct and that parseInt is the more correct answer, but as a quick-and-dirty alternative you can also convince javascript that a variable is a number and not a string by multiplying by 1:
var x = parseInt("-400", 10) + 200;
var y = ("-400" * 1) + 200;
alert(x);
alert(y);

Categories

Resources