We Keep Coding

Is it needed to add "px" when setting sizes via javascript?

I am maintaining a project and I am seeing lots of parts that set size values this way:
var position = 500; // This value was calculated in some different way.
$someElement.css({
left: position.toString() + "px"
});
I see that if I change it to
$someElement.css({
left: position
});
it just works fine, but I can't find any documentation regarding older browsers, or some corner cases in which this won't work.
For me, it seems that adding the "px" adds a lot of noise to the code, but I am not sure if it is safe to remove.
I would like to know if there is any case in which this change won't work.

It depends on what version of jQuery you're using. Older versions need a unit, but now they return the number itself. Usually in newer libraries when working in code you won't need to include px, and if it's working and not returning something like "(initial value)px+500" you're probably using a newer version. Just make sure the code isn't using vh, vw, rem, % or another sort of unit!
Check this other question out that might help you

Phaser Weapon plugin, set the kill_DISTANCE

I'm using the phaser weapon plugin, and i've set the kill type to kill_distance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
But, it is automatically set to 2, which doesn't really allow it to travel very far. I'm wondering how i can set it to a larger number
thanks in advance

You can just set the bulletKillDistance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
weapon.bulletKillDistance = 50;
This strikes me as an oversight in the documentation.
Update
This has been updated in the documentation source, and should be updated online once there's a release/deployment.

[static] KILL_DISTANCE : integer
A bulletKillType constant that automatically kills the bullets after they
exceed the bulletDistance from their original firing position.
Unfortunately, I tried searching in documents, but I could not find "bulletDistance". For example, if you use KILL_LIFESPAN, you can change bulletLifespan variable, but there are no "bulletDistance" in document. This is either not implemented or they forgot it in the docs. Try this and it may/may not work.

Simple Collision Detection in Javascript / Jquery?

I am working on a portion of a project that I am trying to detect when certain divs hit each other. In the code that I made, that doesn't work, I basically say take the first div's left amount, compare it to the other div's left amount, if they are within a certain amount it triggers an alert. If I get that much to work I am going to implant a way to say that if the distance between the two divs is 0 then it will run a certain function. I am afraid the scope of this project is too big for me, even though I am basically at the last part, because I have spent hours researching a simple way to add collision detection, but everything I find looks like rocket science to me, that is why I tried to create my own way below. So in summary, what I want to know is why my collision detection code doesn't work, how I can make it work if possible, and if not possible what is the next best option that I should use.
//Collision
function collision(){
var tri = $('#triangle');
var enemyPos = $('.object1').css('left');
var minHit = enemyPos - 32.5;
var maxHit = enemyPos + 32.5;
var triLoc = tri.css('left');
if(triLoc > minHit && triLoc < maxHit){
alert('hit');
}
}
collision();
}
}
full code: https://jsfiddle.net/kc59vzpy/

If the code you have above is definitely where the problem is, then you need to look at the enemyPos variable. Getting the left position also adds px, so enemyPos is 100px or something like that. When you add 32.5, you get 100px32.5 and when you subtract you get NaN, neither of which you want.
Before you add or subtract, use enemyPos = parseInt($('.object1').css('left')); to turn it into an actual number.

Can you use jQuery's outerHeight function with an int parameter?

I'm working on a jQuery function to set the height of a div based on the height of the window and some other elements, and I noticed something strange. The outerHeight() function seems to accept an integer parameter, even though the documentation doesn't specify that one is allowed.
So this seems to work in both Chrome and Firefox:
var o_height = $("#content").outerHeight();
var n_height = $(window).outerHeight() - $("#nav").outerHeight();
if (n_height > o_height) {
$("#content").outerHeight(n_height);
}
The alternative is to calculate the padding and then subtract it, which is a few lines longer:
var o_height = $("#content").outerHeight();
var n_height = $(window).outerHeight() - $("#nav").outerHeight();
if (n_height > o_height) {
var padding = $("#content").outerHeight() - $("#content").height();
$("#content").height(n_height - padding);
}
What I'm wondering is whether it's safe to use the shorter version. I'll be doing stuff like this several times, so I'd rather cut down on the length of the script, but not at the cost of stability. Is this a stable, but undocumented feature, or do I just need to accept the extra weight in the function?

In case anybody else stumbles upon this, it appears that this functionality was actually added all the way back in 1.8.0 for both outerHeight and outerWidth, but that despite frequent reports, the documentation still hasn't been updated.

Why is element.style.left returning NaN?

I'm getting a weird error where in Internet Explorer 7, when I call Math.round on a float it gives me an "Invalid Argument" error. Consider the following:
var elementLeft = parseInt(element.style.left); // Here we're actually getting NaN
function Foo(x) {
this.x = x;
this.apply = function(element) {
element.style.left = Math.round(this.x) + 'px';
};
}
Foo(elementLeft);
In this case x is a non-negative number and element is just a DOM element in my page (a div, in fact).
Any ideas?
EDIT: The variable passed in as the x parameter is actually initialized earlier as parseInt(element.style.left). It appears that the first time I try to read element.style.left, IE is actually giving back NaN. I have updated the code to reflect this. Anyone know any workarounds for this?

It appears that the first time I try to read element.style.left, IE is actually giving back NaN.
The first time you read element.style.left, is there actually any left style set on the element? Remember element.style only reflects style properties set in the inline style="..." attribute and not those applied by stylesheets.
If you haven't set an inline style, style.left will give you the undefined object, which does indeed parseInt to NaN.

Is IE defaulting x to a bad value?
Scroll down to Item 10 on this page:
Everything was working fine in
Firefox, Google Chrome etal. But I was
having problems with IE (of all
flavours). No selection tool would be
presented and a javascript warning was
produced which told me about an
'Invalid argument' being submitted to
the Math.round function.
The cause was that when you first
click on the image to start your
selection, the scaleX and scaleY
variables in the javascript on the
page result in a value of Infinity.
Firefox and every other browser seems
to silently step over this and carry
on processing as normal. IE of course
did not.
The solution was to add the following
line after the initial scaleX and
scaleY variables are calculated. This
appears to have solved the problem
fully. if(scaleX == Infinity || scaleY
== Infinity) return false; I hope this helps someone else and saves them the
hour of hunting it cost me ;o)

I don't think it's Math.round() that's giving you the error. It's probably the CSS subsystem. Try an alert() on the value that you're getting.

Some frameworks such as jQuery have facilities to read the calculated position of elements -- without requiring you to have explicitly set CSS position properties on them. Try reading the position of your element through jQuery. It might work.

For some reasons Javascript only works for the inline styling.
For example
<div style="left:500px;"></div>
if you wish to work on the position of an element, try setting the initial position in Java Script file, example:
function Xyz() {
var elem = document.getElementById('id');
elem.style.left = 500px;
numberLeft = 500;
//Now you can manipulate the position
var increment= 50;
var newLeft = numberLeft + increment;
elem.style.left = newLeft + 'px';
}
You get the idea. Put your logic in.