This JavaScript program shows how to detect overflow in an element and uses the DOM.
<!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>
// 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;
© 20072024 XoaX.net LLC. All rights reserved.