real text size calculation?

G

grayFalcon

Hello!

I've got a small problem here. I'm trying to write some code that would
generate a drop-down menue for me, where I'd just need to enter the
menu- and submenu items into an array. The items are to be displayed as
text. Now, I want to have the layers with the submenues to appear more
or less under the appropriate main menu items. For this I need to be
able to calculate how many pixels a given text uses up on the screen of
the user. That's all fine with IE and an unproportional font like
courier. The problem is, there is this nice setting that allows you to
change the diplay size of the text - which is pretty much disfunctional
in IE, but in mozilla, it works. Which means that I can't just say that
one letter in courier, size 2, is 4 pixels wide and be happy with my
calculation, because then somebody can just pop up with another text
diplay size and *boom* - my calculation is wrong again.

Now, is there a realistic way to find out how many pixels _exactly_ a
piece of text takes up on the user's screen? Or can I make the given
piece of text a DIV and then have some kind of document.divname.left
that gives me the actual location of this text?

Thanks a lot in advance,
-Wojtek
 
B

brotherli

grayFalcon said:
Hello!

I've got a small problem here. I'm trying to write some code that would
generate a drop-down menue for me, where I'd just need to enter the
menu- and submenu items into an array. The items are to be displayed as
text. Now, I want to have the layers with the submenues to appear more
or less under the appropriate main menu items. For this I need to be
able to calculate how many pixels a given text uses up on the screen of
the user. That's all fine with IE and an unproportional font like
courier. The problem is, there is this nice setting that allows you to
change the diplay size of the text - which is pretty much disfunctional
in IE, but in mozilla, it works. Which means that I can't just say that
one letter in courier, size 2, is 4 pixels wide and be happy with my
calculation, because then somebody can just pop up with another text
diplay size and *boom* - my calculation is wrong again.

Now, is there a realistic way to find out how many pixels _exactly_ a
piece of text takes up on the user's screen? Or can I make the given
piece of text a DIV and then have some kind of document.divname.left
that gives me the actual location of this text?

Just put your text in a <span> or <div> (a table cell my also do it).
Once yout get the reference to that object using document.getElementByID
or other DOM commands you can read its size (object.offsetWidth,
object.offsetHeight) and its relative position (object.offsetLeft,
object.offsetTop). Now you have to run up the DOM tree in order to get
the absolute position of your object.

// get position of an object
var obj = document.getElementById('objectname');
var oX = obj.offsetLeft;
var oY = obj.offsetTop;

// add position of the parent object
var parent = obj.offsetParent;
while(parent && parent!=null)
{
oX += parent.offsetLeft;
oY += parent.offsetTop;
parent = parent.offsetParent;
}


Regards, brotherli
 
M

Michael Winter

[snip]
Now, is there a realistic way to find out how many pixels _exactly_
a piece of text takes up on the user's screen? Or can I make the
given piece of text a DIV and then have some kind of
document.divname.left that gives me the actual location of this
text?

It is not possible to get font dimensions using JavaScript. With a fixed
piece of text, and trial and error, you can usually approximate width
using "em" dimensions (1em is the height of line, basically), but this
is of no use dynamically.

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top