<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
var initial_text=
'Floating point precision. \nFloating point numbers have limited precision. Although it depends on the system, PHP typically uses the IEEE 754 double precision format, which will give a maximum relative error due to rounding in the order of 1.11e-16. Non elementary arithmetic operations may give larger errors, and, of course, error progragation must be considered when several operations are compounded. \n Additionally, rational numbers that are exactly representable as floating point numbers in base 10, like 0.1 or 0.7, do not have an exact representation as floating point numbers in base 2, which is used internally, no matter the size of the mantissa. Hence, they cannot be converted into their internal binary counterparts without a small loss of precision. This can lead to confusing results: for example, floor((0.1+0.7)*10) will usually return 7 instead of the expected 8, since the internal representation will be something like 7.9999999999999991118.... \n So never trust floating number results to the last digit, and never compare floating point numbers for equality. If higher precision is necessary, the arbitrary precision math functions and gmp functions are available. ';
function set_text( id_label, id_div, txt )
{
var labels=id_label.length;
var divs=id_div.length;
for( var i=0; i<labels; i++)
document.getElementById( id_label[i] ).innerText='';
if( labels == 0 || divs == 0 || labels != divs )
return;
var curr_element=0;
var label=document.getElementById( id_label[0] );
var div=document.getElementById( id_div[0] );
var word=txt.split( ' ' );
var c=word.length;
var prev_text='';
var curr_text='';
div.style.overflow='auto';
for( var i=0; i<c; i++)
{
curr_text = curr_text + word[i] + ' ';
label.innerText=curr_text;
if( div.clientHeight == div.scrollHeight && div.clientWidth == div.scrollWidth )
{
prev_text=curr_text;
continue;
}
i--;
div.style.overflow='hidden';
label.innerText=prev_text;
if( curr_element++ >= divs )
break;
curr_text='';
label=document.getElementById( id_label[curr_element] );
div=document.getElementById( id_div[curr_element] );
div.style.overflow='auto';
}
}
var info_list = new Array( 'info1', 'info2', 'info3', 'info4');
var div_list = new Array( 'div1', 'div2', 'div3', 'div4');
function set_info()
{
set_text( info_list, div_list, initial_text );
}
</script>
</head>
<body onload="set_info()" onresize="set_info()">
<div id="div1" style="width:45%; height: 150px; background-color:#66FF99; ">
<label id="info1"></label>
</div>
<div id="div2" style="width:45%; height: 150px; background-color:#6699CC; position:absolute; right:40px; top:55px; ">
<label id="info2"></label>
</div>
<div id="div3" style="width:75%; height: 150px; background-color:#FF9999; position:absolute; left:100px; top:250px; ">
<label id="info3"></label>
</div>
<div id="div4" style="width:75%; height: 50px; background-color:#99CC00; position:absolute; left:100px; top:450px; ">
<label id="info4"></label>
</div>
</body>
</html>