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

M

mscir

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
 
M

Martin Honnen

mscir said:
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);
 
M

mscir

Martin said:
mscir wrote:
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
 
M

Martin Honnen

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.
 

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,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top