Detecting Overflow

This JavaScript program shows how to detect overflow in an element and uses the DOM.

DetectOverflow.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's JavaScript</title>
    <script type="text/javascript" src="DetectOverflow.js"></script>
  </head>
  <body>
    <div id="idOverflowStatus">
    <h3>idOverflow1</h3>
    <p id="idOverflow1" style="width:400px; height:100px;
      background-color:#FFEEEE; color:#886644; overflow:auto; border:1px solid black;">
1 In the beginning God created heaven, and earth.

2 And the earth was void and empty, and darkness was upon the face of the deep; and the spirit of
God moved over the waters.</p>
    <h3>idOverflow2</h3>
    <p id="idOverflow2" style="width:400px; height:100px;
      background-color:#FFEEEE; color:#886644; overflow:auto; border:1px solid black;">
1 In the beginning God created heaven, and earth.

2 And the earth was void and empty, and darkness was upon the face of the deep; and the spirit of
God moved over the waters.

3 And God said: Be light made. And light was made.

4 And God saw the light that it was good; and he divided the light from the darkness.

5 And he called the light Day, and the darkness Night; and there was evening and morning one day.
</p>
    <h3>idOverflow3</h3>
    <pre id="idOverflow3" style="width:400px; height:100px;
      background-color:#EEEEEE; color:#886644; overflow:auto; border:1px solid black;">
1 In the beginning God created heaven, and earth.

2 And the earth was void and empty, and darkness was upon the face of the deep; and the spirit of
God moved over the waters.</pre>
    <h3>idOverflow4</h3>
    <pre id="idOverflow4" style="width:400px; height:100px;
      background-color:#EEEEEE; color:#886644; overflow:auto; border:1px solid black;">
1 In the beginning God created heaven, and earth.

2 And the earth was void and empty, and darkness was upon the face of the deep; and the spirit of
God moved over the waters.

3 And God said: Be light made. And light was made.

4 And God saw the light that it was good; and he divided the light from the darkness.

5 And he called the light Day, and the darkness Night; and there was evening and morning one day.
</pre>
    </div>
  </body>
</html>

DetectOverflow.js

// This is the function that detects overflow.
function HasOverflow(qpTest) {
  var bHasOverflow = ((qpTest.clientWidth < qpTest.scrollWidth) ||
    (qpTest.clientHeight < qpTest.scrollHeight));
  return bHasOverflow;
}

// This creates the p tags for printing the overflow message.
function Initialize() {
  qpContainer = document.getElementById("idOverflowStatus");
  qpTest1 = document.createElement('p');
  qpContainer.appendChild(qpTest1);
  qpOverflow1 = document.getElementById("idOverflow1");
  qpTest1.innerHTML = "idOverflow1 "+
    (HasOverflow(qpOverflow1) ? "has" : "does not have")+" overflow.";
  qpTest2 = document.createElement('p');
  qpContainer.appendChild(qpTest2);
  qpOverflow2 = document.getElementById("idOverflow2");
  qpTest2.innerHTML = "idOverflow2 "+
    (HasOverflow(qpOverflow2) ? "has" : "does not have")+" overflow.";
  qpTest3 = document.createElement('p');
  qpContainer.appendChild(qpTest3);
  qpOverflow3 = document.getElementById("idOverflow3");
  qpTest3.innerHTML = "idOverflow3 "+
    (HasOverflow(qpOverflow3) ? "has" : "does not have")+" overflow.";
  qpTest4 = document.createElement('p');
  qpContainer.appendChild(qpTest4);
  qpOverflow4 = document.getElementById("idOverflow4");
  qpTest4.innerHTML = "idOverflow4 "+
    (HasOverflow(qpOverflow4) ? "has" : "does not have")+" overflow.";
}

// This will cause the Initialize() function to be called when the page is loaded.
window.onload = Initialize;

Core JavaScript

Detecting Overflow

DetectOverflow.html

DetectOverflow.js

Output