Get the size of div's content

**Gabarieko** · 04-21-2010 09:22 AM

My question is, can I get the actual size of a div's content when div's width is 'auto' and the content is small enough to fit without resizing.

I know there is a way to find the div's actual size after it's loaded - divObj.offsetWidth/Height.

The problem is that this only works for content which is bigger than the div.

For example,

Code:

<div style="width:30px;">A text that will exceed 30px in width</div>

In this case, when the content is loaded the div will be resized and get a new offsetWidth/Height.
There will be lots of new lines after the resizement which posses another problem. After loading, the above example will look like this:

Code:

A
text
that
will
exceed
30px
in
width

Now the example has offsetWidth little more than 30px (~50) and MUCH greater height.

This is not the desired effect. I want the width/height of the content when the div is not resized by the content.

Thanks in advance

**apeg** · 04-21-2010 02:14 PM

I think i understand what you're asking

Code:

<div style="width:30px;">A text that will exceed 30px in width</div>

assuming you want the width of that div BEFORE the text is collapsed to fit the 30px.

add this to the div's styles

Code:

white-space:nowrap

That will prevent the text from breaking into multiple lines, so when you grab divObj.offsetWidth/Height it will give the correct width.

-aPeg

**Gabarieko** · 04-21-2010 03:03 PM

Well, this works as intended and is really what I needed (thank you for which)
but there seems to be a problem -
div's width remains unchanged although content goes out.

Try it with a border...

Code:

<div id="myobj" style="border:red solid 1px;">Some Text</div>
<script type="text/javascript">
var elem = document.getElementById("myobj");
elem.style.width='1'; // Garantee that the div will be resized (since anything will be > 1px)
elem.style.whiteSpace='nowrap';

alert(elem.offsetWidth);
</script>

alerts "3"

Btw, I have another question which might offer a solution.

If we use <span> instead of <div> we have all we wanted above -
span automaticly takes the content's width and resizes correctly.

But I'll need it to maintain that initial width at all time. That sounds easy if it wasn't the following problem:

In Firefox this does not work:

Code:

<span style="width: 200px">Some text < 200px </span>

style.width is just ignored.
In IE it works fine.

**apeg** · 04-21-2010 03:21 PM

Can you give me more detail about what you're looking to get from this div? how come you need the initial width?

I dont think an inline element is the key (span) but first i have to hear more about what you need this div 2 do

-aPeg

**Gabarieko** · 04-22-2010 07:13 AM

If you'd really like to see what I've done I can send you the source (it's about some decorations - effects via javascript)

An element
(which can be any but I'd like to make all usable (the script to work with all))
has an initial text.
That text is then "poured" letter by letter at a set intervals.
Since the element currently changes it's width with each interval, if the element is inline it really makes it bad for the eyes and impossible to read.

Example:

Code:

<div decoration="pour" flags="time:3">Some text</div>

A text with <span decoration="pour" flags="time:2"> only some words</span> being "poured"

In the example above, the second paragraph will be unreadable and confusing for 2 seconds (or other set time). If the element retains it's initial width, this won't be a problem

Anyway, why would in IE span sizing work and not in Firefox

**Gabarieko** · 04-22-2010 08:06 AM

Sorry for double posting...

I found a workaround, using the properties of spans.

Code:

<html>
<head>
   <title>Test</title>
   <script type="text/javascript">
   function getContentSize(ele){
      document.write('<span id="test_obj"></span>');

      var elem     = document.getElementById(ele);
      var test_obj = document.getElementById("test_obj");

      test_obj.innerHTML = elem.innerHTML;

      var width = test_obj.offsetWidth;
      var height= test_obj.offsetHeight;

      test_obj.parentNode.removeChild(test_obj);
      return [width,height];
   }
   </script>
</head>
<body>
   <div id="element" style="border:red solid 1px;">Some Text</div>

   <script type="text/javascript">
      alert(getContentSize('element'));
      document.getElementById('element').style.width = getContentSize('element')[0]+2; //+2 for the border
   </script>
</body>
</html>

Yet I hope there is a solution to the div prob.

**apeg** · 04-22-2010 08:17 AM

No need to send the source to me, just trying to get a better idea what you need from this Div so i can offer some better suggestions.

Let see if i am understanding you right:

Code:

<div>some text to start with</div>

Then from there you are us JS to add words/letters one @ a time:

Code:

<div>some text to start with <span>this is the added text</span></div>

But because the text is being added one letter @ a time its appears distorted until its all displayed?

Assuming i am on the right track:
it sounds like you're in need of a min-width attribute. the problem is IE does not play nice when it comes to min width.

i dont think this is exactly what your looking for but would this not work:

Code:

<div style='width:50px'>
     This is text already in the div
     <span>this is where you add text</span>
</div>

*keep in mind the only thing separating a div from a span is "display:block" <- add that to a span and it will behave like a div (inline VS block)

-aPeg

**apeg** · 04-22-2010 08:26 AM

Haha good solution, i still don't see what your doing with the width. Here is a solution that does not require the temp span creation:

Code:

<html>
<head>
   <title>Test</title>
   <script type="text/javascript">
	   function getContentSize(ele){
		  //document.write('<span id="test_obj"></span>');
	
		  var elem     = document.getElementById(ele);
		  //var test_obj = document.getElementById("test_obj");
	
		  //test_obj.innerHTML = elem.innerHTML;
	
		  var width = elem.offsetWidth;
		  var height= elem.offsetHeight;
	
		  //test_obj.parentNode.removeChild(test_obj);
		  return [width,height];
	   }
   </script>
</head>
<body>
   <div id="element" style="border:red solid 1px; float:left;">Some Text</div>

   <script type="text/javascript">
      alert(getContentSize('element'));
      document.getElementById('element').style.width = getContentSize('element')[0]; //+2 for the border
   </script>
</body>
</html>

float:left is the key

-aPeg

**Gabarieko** · 04-22-2010 08:39 AM

You got it correct.

However, min-width won't do because it is ,yet again, ignored when applied to a span...

About the last solution, works fine and really answers the topic.
But I can't use it because I can only use JS and JS won't handle obj.style.float='left'; (tested it). I can't dynamicly set the float:left ...

Good Job after all!

**apeg** · 04-22-2010 09:03 AM

"float" is already used in JS, here is how you would set it:

Code:

		  elem.style.cssFloat = 'left';
		  elem.style.styleFloat = 'left';

You have to use both because the 1st one does not work with IE and the second one does not work with all other browsers.

i used this page all the time until i found jQuery:
http://codepunk.hardwar.org.uk/css2js.htm

-aPeg

**Gabarieko** · 04-22-2010 09:26 AM

Thanks, my mistake... Works fine now

Made it so that the initial values are not change.
The function should only get (and not change) the element's properties.

So here is the final result:

Code:

<html>
<head>
   <title>Test</title>
   <script type="text/javascript">
	   function getContentSize(ele){
		  var elem     = document.getElementById(ele);

		  var init_float = (typeof elem.style.cssFloat != 'undefined')? elem.style.cssFloat : elem.style.styleFloat;
		
		  elem.style.cssFloat = 'left';
		  elem.style.styleFloat = 'left';
	
		  var width = elem.offsetWidth;
		  var height= elem.offsetHeight;

		  elem.style.cssFloat = init_float;
		  elem.style.styleFloat = init_float;
		
		  return [width,height];
	   }
   </script>
</head>
<body>
   <div id="element" style="border:red solid 1px;">Some Text</div>

   <script type="text/javascript">
      alert(getContentSize('element'));
   </script>
</body>
</html>

Thread: Get the size of div's content

Thread Tools

Display

Get the size of div's content

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions