Question

I need to know how one can get the maximum possible width of a div. Generally, a <div>‘s width is limited by it’s parent, meaning that it can not be larger than a certain amount. How that certain amount can be calculated?

I need this to calculate if the text inside the current <div> has overflown, (since the only way to detect a text overflow is to compare it’s current width to its current clientWidth).

Thanks!

Answer 1

A couple ways to do this, let’s start with your div…

<div id='mr_cleaver'>
  <div id='beaver'>Blah</div>
</div>

…and then someJavascript:

//Method One: Find the width of the div's parent
var max_beaver_width = $('mr_cleaver').offsetWidth

//Method Two: Max out the div, find length, return to original size.
var beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = "100%";
var max_beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = beaver_width + 'px';

//Method Three: Check for overflow
$('beaver').scrollWidth > $('beaver').offsetWidth ? alert("Over") : alert("Within")