Close, but no ciagar ... NaN error

[Yammaski]

I can't figure out the NaN error in my form.
Type in some text and you'll see the width and heigth (these fields are now visible, but i'll set them on hidden later, I need them for my calculation). The purpose is that you can fill in a new width or height in the empty fields so that the new width/height appears.

See testpage

[jscheuer1]

I've commented the code in one of your functions:

function calHeight(){
	var obj = document.getElementById('newwidth'); // returns object (HTML input element)
	var newW = obj.value; // returns string (input's value)
	var oldW = document.getElementById('widthpx'); // returns object (HTML input element)
	var oldH = document.getElementById('heightpx'); // returns object (HTML input element)
	var newH = Math.round(newW/oldW*oldH); // a string divided by an input object multiplied by an input object will always be NaN
	var obj = document.getElementById('newheight'); // returns object (HTML input element)
	obj.value = Math.round(newH); // Math.anything(NaN) is still NaN
}

Now a string is not a number, but when it is comprised only of characters that represent a number, javascript will usually do automatic type conversion on it, so you should be OK there.

However, an HTML input element object is never a number. What you want in those spots is the value of the input object, like you've done with newW. In fact, if you are only referencing each object once in the code, there's no reason to make so many variables. The main thing though is to make sure you are using numbers, or strings that can easily convert to numbers:

function calHeight(){
	var newW = document.getElementById('newwidth').value;
	var oldW = document.getElementById('widthpx').value;
	var oldH = document.getElementById('heightpx').value;
	var newH = Math.round(newW/oldW*oldH);
	document.getElementById('newheight').value = newH;
}

Something should probably be done to make sure the string values can be converted to numbers and either alert the user, or substitute some default number if they cannot. But assuming the user enters numbers only, the above will work. Also, it could be further simplified code-wise, but I didn't want to change it past all recognition.

[Yammaski]

Ok, Thanks. The NaN is gone, but my calculation doesn't work.
Is it possible that it has to do with the "onkeyup's" in "newwidth" and "newheight" fields ?

[jscheuer1]

It's just doing the math you tell it to do. For example, if you type in:

What?

for the text, you see something like:

width: 86 height: 30

Those are the widthpx and heightpx fields respectively. The newwidth and newheight fields are blank (zero in javascript when converted to a number). Then say you type in a 3 for the newheight field, it runs this function (commented with the values it's using/getting):

function calHeight(){
	var newW = document.getElementById('newwidth').value; // 0
	var oldW = document.getElementById('widthpx').value; // 86
	var oldH = document.getElementById('heightpx').value; // 30
	var newH = Math.round(newW/oldW*oldH); // 0 divided by 30, the result multiplied by 86 equals 0
	document.getElementById('newheight').value = newH; // 0
}

That's always going to happen because the first value will always be 0. Same thing with the other function (calWidth), and 0 divided by anything is 0, and 0 times anything is 0. If you want different results, do different math, and/or do it with different values.

[Yammaski]

Thanks John, now I see it's you ... you were a great help before !

As you see I'am trying to get the sizes of the input-text to calculate new sizes. But it seems impossible this way !
Isn't their a more simple way to detect the sizes of a text. Text gives always the height included ascenders (l-t-k-...) and descenders (j-y-g-...). I tried to make a png or gif from the text (see text2png), but here I also stucked. I'am not a programmer. I also found a nice example : Textomage.

[jscheuer1]

I'm not really all that clear on what you are trying to do. Your widthpx and heightpx fields are being populated with the dimensions of the box that the text appears in (the span). These are larger than the actual text. But do represent an area required to fit the text in. If you want the actual pixel dimensions of the text you need to know what those are for that font. These should be listed somewhere for each font. But it may be complicated. The listed sizes may be in points - a printer's measure, rather than pixels - measurements for the screen. There is no direct correlation, it depends upon the resolution. What exactly are you trying to get at? Isn't this for printing on a T-shirt or some other product? If so, I imagine you can make some correlation between the span dimensions you already have with the amount of space required on the product. Even if you need to do a little trial and error, it should become apparent rather quickly. You may have to make some assumptions, but that's OK as long as you are consistent with those assumptions and they have the desired effect in all cases.

[Yammaski]

I'm not really all that clear on what you are trying to do. Your widthpx and heightpx fields are being populated with the dimensions of the box that the text appears in (the span). These are larger than the actual text

That box is the culprit, you can't measure the real pixels that the text takes.
But that's "typography", you have to live with it.
The size without box, I figured out with Adobe Illustrator (text to outlines), then you have the real pixels.
The (width -11) is the width without the whitespace that the font (here Arial) adds, 2 px in front and 9 px on the end. For the height that box stays the same for upper and/or lowercase. I don't had the descenders (j, g, p, ...) in my mind, so my idea won't work, it's impossible to give the right height !

My purpose was : the customer fills in the size he wants for the width or height and then the according width or heigth appears.
Points, pixels, pica's, ... this all doesn't matter, I just need a reference for width/height to calculate a new width/height.
BTW : the products I sell are stickers/decals.

I just found this, they make a .jpg of the text and returns it with the dimensioning.
I checked it and it's really correct. How do they do that ???