real text size calculation?

Discussion in 'Javascript' started by grayFalcon, Feb 15, 2004.

  1. grayFalcon

    grayFalcon Guest

    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
    grayFalcon, Feb 15, 2004
    #1
    1. Advertising

  2. grayFalcon

    brotherli Guest

    grayFalcon wrote:
    > 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

    --

    brotherli

    [ mails to won't be read! replace nugs with endless. ]
    brotherli, Feb 16, 2004
    #2
    1. Advertising

  3. On Sun, 15 Feb 2004 21:37:23 +0100, grayFalcon <> wrote:

    [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

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
    Michael Winter, Feb 16, 2004
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. senthil
    Replies:
    5
    Views:
    1,380
    senthil
    Jan 24, 2004
  2. Curious Trigger
    Replies:
    2
    Views:
    1,813
    Curious Trigger
    Sep 9, 2006
  3. Jason Cavett

    Preferred Size, Minimum Size, Size

    Jason Cavett, May 23, 2008, in forum: Java
    Replies:
    5
    Views:
    12,565
    Michael Jung
    May 25, 2008
  4. Phonedude

    vertical size calculation

    Phonedude, Jul 21, 2008, in forum: HTML
    Replies:
    6
    Views:
    422
    Phonedude
    Jul 22, 2008
  5. Gerd
    Replies:
    8
    Views:
    1,308
    Flash Gordon
    Nov 17, 2009
Loading...

Share This Page