NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider

Discussion in 'Javascript' started by mscir, Jun 25, 2005.

  1. mscir

    mscir Guest

    I'm adding text to a div using innerHTML, and watching the width of the
    div using offsetWidth. In IE the offsetWidth increases when the div gets
    wider, but in Netscape 7.2 or Firefox 1.0.3 it doesn't. Is there a way I
    can find when a div increases its width in non-IE browsers?

    TIA,
    Mike
     
    mscir, Jun 25, 2005
    #1
    1. Advertising

  2. Re: NS/FF don't change div offsetWidth when div innerHTML is addedto and div becomes wider

    mscir wrote:

    > I'm adding text to a div using innerHTML, and watching the width of the
    > div using offsetWidth. In IE the offsetWidth increases when the div gets
    > wider, but in Netscape 7.2 or Firefox 1.0.3 it doesn't. Is there a way I
    > can find when a div increases its width in non-IE browsers?


    If you want to add stuff to an element you should using the DOM with
    createElement and appendChild, adding to innerHTML is totally
    inefficient as then the old content is reparsed.

    As for div elements they are block elements so just because you add some
    text to a block element its block width does not change as it it not
    determined by the text content but by the width of the container block.

    And changing the text content of an inline <span> element with Mozilla
    correctly changes its offsetWidth:

    var span = document.createElement('span');
    span.innerHTML = '<strong>Kibology for all.<\/strong>';
    document.body.appendChild(span);
    alert(span.offsetWidth);
    span.innerHTML += '<strong>All for Kibology.<\/strong>';
    alert(span.offsetWidth);


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 26, 2005
    #2
    1. Advertising

  3. mscir

    mscir Guest

    Re: NS/FF don't change div offsetWidth when div innerHTML is addedto and div becomes wider

    Martin Honnen wrote:

    > mscir wrote:

    <snip>

    > If you want to add stuff to an element you should using the DOM with
    > createElement and appendChild, adding to innerHTML is totally
    > inefficient as then the old content is reparsed.
    >
    > As for div elements they are block elements so just because you add some
    > text to a block element its block width does not change as it it not
    > determined by the text content but by the width of the container block.


    I was adding characters to the div and watching for when the div got
    wider than the body.

    > And changing the text content of an inline <span> element with Mozilla
    > correctly changes its offsetWidth:
    >
    > var span = document.createElement('span');
    > span.innerHTML = '<strong>Kibology for all.<\/strong>';
    > document.body.appendChild(span);
    > alert(span.offsetWidth);
    > span.innerHTML += '<strong>All for Kibology.<\/strong>';
    > alert(span.offsetWidth);


    Great!

    Thanks,
    Mike
     
    mscir, Jun 26, 2005
    #3
  4. Re: NS/FF don't change div offsetWidth when div innerHTML is addedto and div becomes wider

    mscir wrote:


    > I was adding characters to the div and watching for when the div got
    > wider than the body.


    I think the div stays as wide as the body (put a border around it to
    see) and the text overflows the width if you really put in a sequence of
    continous characters without space so that the text cannot be broken
    into lines.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 26, 2005
    #4
    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. gorbus

    DIV wider than TD (cell)

    gorbus, Jul 29, 2005, in forum: HTML
    Replies:
    8
    Views:
    4,042
    Noodles Jefferson
    Jul 30, 2005
  2. Replies:
    9
    Views:
    982
    Juha Nieminen
    Aug 22, 2007
  3. Stef Mientki

    and becomes or and or becomes and

    Stef Mientki, May 22, 2011, in forum: Python
    Replies:
    9
    Views:
    318
    Chris Angelico
    May 28, 2011
  4. Ned Baldessin
    Replies:
    1
    Views:
    179
  5. Replies:
    1
    Views:
    152
    Martin Honnen
    May 16, 2005
Loading...

Share This Page