Detect Vertical Overflow in a DIV

hoopplaya4 · #1 01-25-2009, 03:14 PM

Hi All:

Hopefully this is an easy question. I'm learning JavaScript right now, and I'd like to know if and how I might use JavaScript to detect the vertical overflow of text in a DIV. I don't want to have to use scrollbars when the text overflows.

For example, right now I have:

Code:

<div id="container">
   <div id="item">This is item 1</div>
   <div id="item">This is item 2</div>
   <div id="item">This is item 3</div>
   <div id="item">This is item 4</div>
</div>

Now, if only item 1, 2, and 3 are visible, I'd like JavaScript to catch the overflow, and then replace the last visible item (item 3), with a new DIV:

Code:

<div id="item><a href='more.html'>More...</a></div>

I found a solution that's similar here. However, my issue pertains to vertical space (whereas the link is with horizontal). I think I'm going to have to user offsetHeight, but I'm not the best at Javascript yet.

Any push in the right direction will be a tremendous help! Thank you.

vwphillips · #2 01-26-2009, 04:36 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.container {
  width:200px;height:50px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Overflow(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 for (var clds=obj.childNodes,nu,cldary=[],z0=0;z0<clds.length;z0++){
  cldary.push(clds[z0]);
  if (clds[z0].offsetTop+clds[z0].offsetHeight<obj.offsetHeight) nu=z0;
 }
 for (var ary=[],z1=nu+1;z1<cldary.length;z1++){
  ary.push(obj.removeChild(cldary[z1]));
 }
 if (ary.length>1){
  var newobj=document.createElement(obj.tagName);
  newobj.className=obj.className;
  obj.parentNode.insertBefore(newobj,obj);
  obj.parentNode.insertBefore(obj,newobj);
  for (var z2=0;z2<ary.length;z2++){
   newobj.appendChild(ary[z2]);
  }
  Overflow(newobj);
 }
}
/*]]>*/
</script>

</head>

<body onload="Overflow('container');" >

Note: id names MUST&nbsp;BE unique.
<div id="container"  class="container">
tom
   <div >This is item 1</div>
   <div >This is item 2</div>
   <div >This is item 3</div>
   <div >This is item 4</div>
   <div >This is item 5</div>
   <div >This is item 6</div>
   <div >This is item 7</div>
   <div >This is item 8</div>
   <div >This is item 9</div>
</div>
</body>

</html>

hoopplaya4 · #3 01-26-2009, 10:18 AM

Thanks VERY much for the reply, vwphillips. However, I guess I'm too much of a newbie to understand it all.

How would I go about inserting my new object with the script you posted?

vwphillips · #4 01-26-2009, 11:29 AM

this puts the new divs in an existing div

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.container {
  width:200px;height:50px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Overflow(obj,pobj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (!pobj){
  pobj=obj;
  pobj.ary=[];
 }
 for (var clds=obj.childNodes,ary=[],z0=0;z0<clds.length;z0++){
  if (clds[z0].offsetTop+clds[z0].offsetHeight>obj.offsetHeight) ary.push(clds[z0]);
 }
 if (ary.length>0){
  for (var z1=0;z1<ary.length;z1++) obj.removeChild(ary[z1]);
  var newobj=document.createElement(obj.tagName);
  newobj.className=obj.className;
  obj.parentNode.insertBefore(newobj,obj);
  obj.parentNode.insertBefore(obj,newobj);
  for (var z2=0;z2<ary.length;z2++) newobj.appendChild(ary[z2]);
  pobj.ary.push(newobj);
  return Overflow(newobj,pobj);
 }
 else return pobj.ary;
}

function MoveOverflow(objid,newid){
 var overflowdivs=Overflow(objid);
 for (var z0=0;z0<overflowdivs.length;z0++){
  document.getElementById(newid).appendChild(overflowdivs[z0]);
 }

}
/*]]>*/
</script>

</head>

<body onload="MoveOverflow('container','tst2');" >

Note: id names MUST&nbsp;BE unique.
<div id="container"  class="container">
tom
   <div >This is item 1</div>
   <div >This is item 2</div>
   <div >This is item 3</div>
   <div >This is item 4</div>
   <div >This is item 5</div>
   <div >This is item 6</div>
   <div >This is item 7</div>
   <div >This is item 8</div>
   <div >This is item 9</div>
</div>
<br />
<br />
<div id="tst2" ></div>
</body>

</html>

this put the overflow in an existng div

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.container {
  width:200px;height:50px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Overflow(obj,pobj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (!pobj){
  pobj=obj;
  pobj.ary=[];
 }
 for (var clds=obj.childNodes,ary=[],z0=0;z0<clds.length;z0++){
  if (clds[z0].offsetTop+clds[z0].offsetHeight>obj.offsetHeight) ary.push(clds[z0]);
 }
 for (var z1=0;z1<ary.length;z1++) obj.removeChild(ary[z1]);
 return ary;
}

function MoveOverflow(objid,newid){
 var overflowdivs=Overflow(objid);
 for (var z0=0;z0<overflowdivs.length;z0++){
  document.getElementById(newid).appendChild(overflowdivs[z0]);
 }

}
/*]]>*/
</script>

</head>

<body onload="MoveOverflow('container','tst2');" >

Note: id names MUST&nbsp;BE unique.
<div id="container"  class="container">
tom
   <div >This is item 1</div>
   <div >This is item 2</div>
   <div >This is item 3</div>
   <div >This is item 4</div>
   <div >This is item 5</div>
   <div >This is item 6</div>
   <div >This is item 7</div>
   <div >This is item 8</div>
   <div >This is item 9</div>
</div>
<br />
<br />
<div id="tst2" ></div>
</body>

</html>

hoopplaya4 · #5 01-26-2009, 11:44 AM

Great! This is very close to what I need. The only other thing I'd like is:

When items are overflowed into the other DIV, I'd like the "tst2" DIV to be hidden. (Which I know how to do). But then, have a link show up at the bottom of the "container" DIV, that says: "Show More..."

For example, on the event of an overflow:

Code:

<div id="container"  class="container">
tom
   <div >This is item 1</div>
   <div >This is item 2</div>
   <div >This is item 3</div>
   <div >This is item 4</div>
   <div ><a href="some js to change display of 'tst2'">More items...</a></div>

<div id="tst2" style="display:none;"> 
   <div >This is item 5</div>
   <div >This is item 6</div>
   <div >This is item 7</div>
   <div >This is item 8</div>
   <div >This is item 9</div>
</div>
</div>

hoopplaya4 · #6 01-26-2009, 04:17 PM

Do you know how I'd go about doing this sort of thing?

vwphillips · #7 01-27-2009, 05:13 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.container {
  width:200px;height:50px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Overflow(obj,pobj){
 if (!pobj){
  pobj=obj;
  pobj.ary=[];
 }
 for (var clds=obj.childNodes,ary=[],z0=0;z0<clds.length;z0++){
  if (clds[z0].offsetTop+clds[z0].offsetHeight>obj.offsetHeight) ary.push(clds[z0]);
 }
 for (var z1=0;z1<ary.length;z1++) obj.removeChild(ary[z1]);
 return ary;
}

function MoveOverflow(obj,newid,more){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 var ofdivs=Overflow(obj);
 var newobj=document.getElementById(newid);
 for (var z0=0;z0<ofdivs.length;z0++){
  newobj.appendChild(ofdivs[z0]);
 }
 var more=document.getElementById(more);
 if (more){
  if (ofdivs.length>0){
    obj.appendChild(more);
  }
  else {
    obj.removeChild(more);
  }
 }
 var lst=ofdivs[ofdivs.length-1];
 newobj.style.display='none';
}

function Toggle(id,lk){
 var obj=document.getElementById(id);
 obj.style.display=obj.style.display=='none'?'block':'none';
 lk.innerHTML=lk.innerHTML=='More'?'Less':'More';
}

/*]]>*/
</script>

</head>

<body onload="MoveOverflow('container','tst2','more');" >

Note: id names MUST&nbsp;BE unique.
<div id="container"  class="container">
<div ><a id="more" href="#" onclick="Toggle('tst2',this); return false;" >More</a></div>
   <div >This is item 1</div>
   <div >This is item 2</div>
   <div >This is item 3</div>
   <div >This is item 4</div>
   <div >This is item 5</div>
   <div >This is item 6</div>
   <div >This is item 7</div>
   <div >This is item 8</div>
   <div >This is item 9</div>
</div>
<div id="tst2" style="border:solid black 1px;"></div>
</body>

</html>

hoopplaya4 · #8 01-28-2009, 10:55 AM

That was it! Awesome, thank you very much. Learned something new as well.

Pomax · #9 03-12-2009, 08:13 AM

This is a fascinating bit of forum post, and close to a problem I was trying to solve by browsing the internet for solutions - I have a large wad of text in a div, rather than div (or other formatting) elements, and would like to detect at which word in the text overflow occurs, so I can relocate the rest of the text to a next (either predefined or dynamically added) container element.

so turning

<div>
This is some random text with a lot of words and will overflow after the upcoming comma, and then this text should be relocated to a new div
</div>

becoming

<div>
This is some random text with a lot of words and will overflow after the upcoming comma
</div>
<div>
and then this text should be relocated to a new div
</div>

any ideas? (other than wrapping every individual word with a div? =)

- Pomax

Pomax · #10 03-15-2009, 07:59 AM

After a few days of tinkering I figured out how to do what I asked anyway, so for those interested in the result, http://pomax.nihongoresources.com/downloads/bookstyle/

(the relevant js is http://pomax.nihongoresources.com/do...egeneration.js)

- Pomax

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)