Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.


Results 1 to 4 of 4

Thread: Dynamic Text-Width in CSS/Javascript

  1. #1

    Dynamic Text-Width in CSS/Javascript

    I have an input field, and as the user types, I need to to move a span directly underneath it.

    I've got the span directly below it using "making the absolute, relative," but I'm stuck with getting it directly under the position of the last key pressed.

    Is this possible, or am I dreaming?

    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  2. #2
    It might be possible if you have an onchange function in the edit box

    then take the value from the edit box and get it's length, then from the length you should be able to tell how much to move the text beneath it

    think the length option is as simple as


    let me know if that works
    now with blog, click here

  3. #3
    Registered User
    I think you're going to have to create an invisible, not display:none;, span somewhere then as the user types fill your invisible span w/ the text and get its width by document.getElementByID(...).offsetWidth so you know the actual width of the text ...

    or ...

    stick w/ a monospacing font like courier. so u know how wide each letter is

    or ...

    I dont know what you're trying to do
    PHP Code:
    <zip> echo this; </zip

  4. #4
    I think I'll do the first solution you suggested (I'd thought of that before, but was hoping there would be a way to do it with less of a hack).

    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Home About kirupa.com Meet the Moderators Advertise

 Link to Us


Copyright 1999 - 2012