C
Csaba2000
It is very late, and I've been scratching my hear over this all day
so I apologize if the post isn't clear. This only affects IE 5.5+
since it's about contentEditable.
Nutshell version: I made a DIV in a TABLE contentEditable, and I
want it to be either 1 to 2 lines tall. In essence, I'm manully
attempting to implement .style.maxHeight = "2.46em"
Unfortunately, I'm running into some really odd behaviour,
and I only have an explanation for the first one (though not
yet a clean fix). The basic gist of the test is to have a single
cell in a table with a single word (no spaces). Now fix the
column widths of the table (shouldn't COLGROUP work for
that?) so that any addition causes an overflow and will bump
the height to two lines. Then add a space (no change) and
another letter (should cause vertical overflow). Many interesting
(read unwanted) behaviours are observed (see the part right
below the BODY declaration for the summary).
This page may also be found at http://csaba.org/demos/Flicker.htm
I'm running font size Medium / IE 5.5+ / Win 2K Pro
Comments/Solutions/Ideas in this matter are appreciated.
Thanks,
Csaba Gabor from New York
PS. I've tried to cull out the essence of the problem, so code
for more complicated tables is gone along cut/paste/etc.
event handlers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<TITLE>contentEditable flicker issue</TITLE>
<SCRIPT type="text/javascript">
function prep() {
window.logme = true; // enable logging
var myCell = document.getElementById("myCell");
var mySpan = myCell.childNodes[0]
// var myTab = document.getElementById("myTab");
// var colGrp = document.createElement("COLGROUP");
// colGrp.style.width = mySpan.offsetWidth;
// myTab.insertAdjacentElement("afterBegin", colGrp);
myCell.style.width = mySpan.offsetWidth;
myCell.onresize = function () {var frob=this;window.setTimeout (function(){resetLineSize(frob.childNodes[0])},
20)};
mySpan.onkeyup = function() {resetLineSize(this)}
mySpan.saveText = mySpan.outerText
}
function resetLineSize(elem) {
// sets this element to either one or two lines high, as appropriate
var newHeight = "1.21em"; // one line high
// if we've already seen this element, we may only decrease its height
var restrict = (elem.lastSave&&elem.lastSave==elem.outerText);
var oldHeight = elem.style.height;
var oldHeightFactor = parseInt(elem.style.height); // either 1 or 2
if (elem.outerText!="")
if (elem.scrollHeight >= 1.2*elem.clientHeight/oldHeightFactor)
newHeight = "2.46em"; // two lines high
if (newHeight!=elem.style.height&&(!restrict||newHeight=="1.21em"))
elem.style.height = newHeight;
// debugging - show resultant sizes
msg = "Text: " + elem.lastSave + " ==> " + elem.outerText +
"<BR> " + "oldHeight: " + oldHeight +
", newHeight: " + newHeight + ", restrict: " + restrict +
", finalHeight: " + elem.style.height +
", width: " + elem.parentElement.offsetWidth +
", scrollHeight: " + elem.scrollHeight +
", clientHeight: " + elem.clientHeight + "<BR>";
if (window.logme) document.getElementById("log").insertAdjacentHTML("beforeEnd", msg);
if (!restrict) elem.lastSave = elem.outerText;
}
</SCRIPT>
</HEAD>
<BODY style="margin:5%" onLoad="prep()">
How do you explain the following (must run with IE 5.5+)?<BR><BR>
1) Put cursor at end of ride. Type a space, then an a, then a w.
Note that upon typing the a the entire text is obscured by a horizontal scroll bar.
The DIV expanded to accomodate the a, but there was room added for the vertical
scroll bar (the div got wider). Therefore there was room to fit the entire text
on one line so it collapses again. And gets covered by the horizontal scroll bar.
Without the restrict var, there would be an incessant flickering as the size kept
altering from 1 to 2 lines.<BR><BR>
2) This time, instead of typing ' aw', type a space, then a semicolon, and from
then on any characters (the same effect may be achieved by typing two spaces
and then any character). The semicolon is not wide enough to cause an overflow onto
two lines. But a curious thing that happens is that the cell width gets adjusted,
and it does not recover. This is very strange.<BR><BR>
3) If the myCell.style.width line in prep() is commented out, it should be
replaceable by uncommenting the four lines above it. Ie. using a COLGROUP to
set the width. However, regardless of what is typed, the behaviour seens to
resemble that of the previous section.<BR><BR>
4) If the style of the SPAN is prefixed with "border:solid 1px blue;" then
the cell starts out completely filled with a horizontal gray scrollbar.
<BR><TABLE border id=myTab>
<TR><TD id=myCell><SPAN contentEditable
style="overflow:auto;height:1.21em;width:100%">ride</SPAN></TD></TR>
</TABLE>
<BR>
<BUTTON type=button accesskey=S onclick="window.logme=false"><u>S</u>top logging</BUTTON><BR>
<BR>
<DIV id=log style="overflow:auto;width:10in;height:7in;border:solid 1px yellow">This is the log<BR></DIV>
</BODY>
</HTML>
so I apologize if the post isn't clear. This only affects IE 5.5+
since it's about contentEditable.
Nutshell version: I made a DIV in a TABLE contentEditable, and I
want it to be either 1 to 2 lines tall. In essence, I'm manully
attempting to implement .style.maxHeight = "2.46em"
Unfortunately, I'm running into some really odd behaviour,
and I only have an explanation for the first one (though not
yet a clean fix). The basic gist of the test is to have a single
cell in a table with a single word (no spaces). Now fix the
column widths of the table (shouldn't COLGROUP work for
that?) so that any addition causes an overflow and will bump
the height to two lines. Then add a space (no change) and
another letter (should cause vertical overflow). Many interesting
(read unwanted) behaviours are observed (see the part right
below the BODY declaration for the summary).
This page may also be found at http://csaba.org/demos/Flicker.htm
I'm running font size Medium / IE 5.5+ / Win 2K Pro
Comments/Solutions/Ideas in this matter are appreciated.
Thanks,
Csaba Gabor from New York
PS. I've tried to cull out the essence of the problem, so code
for more complicated tables is gone along cut/paste/etc.
event handlers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<TITLE>contentEditable flicker issue</TITLE>
<SCRIPT type="text/javascript">
function prep() {
window.logme = true; // enable logging
var myCell = document.getElementById("myCell");
var mySpan = myCell.childNodes[0]
// var myTab = document.getElementById("myTab");
// var colGrp = document.createElement("COLGROUP");
// colGrp.style.width = mySpan.offsetWidth;
// myTab.insertAdjacentElement("afterBegin", colGrp);
myCell.style.width = mySpan.offsetWidth;
myCell.onresize = function () {var frob=this;window.setTimeout (function(){resetLineSize(frob.childNodes[0])},
20)};
mySpan.onkeyup = function() {resetLineSize(this)}
mySpan.saveText = mySpan.outerText
}
function resetLineSize(elem) {
// sets this element to either one or two lines high, as appropriate
var newHeight = "1.21em"; // one line high
// if we've already seen this element, we may only decrease its height
var restrict = (elem.lastSave&&elem.lastSave==elem.outerText);
var oldHeight = elem.style.height;
var oldHeightFactor = parseInt(elem.style.height); // either 1 or 2
if (elem.outerText!="")
if (elem.scrollHeight >= 1.2*elem.clientHeight/oldHeightFactor)
newHeight = "2.46em"; // two lines high
if (newHeight!=elem.style.height&&(!restrict||newHeight=="1.21em"))
elem.style.height = newHeight;
// debugging - show resultant sizes
msg = "Text: " + elem.lastSave + " ==> " + elem.outerText +
"<BR> " + "oldHeight: " + oldHeight +
", newHeight: " + newHeight + ", restrict: " + restrict +
", finalHeight: " + elem.style.height +
", width: " + elem.parentElement.offsetWidth +
", scrollHeight: " + elem.scrollHeight +
", clientHeight: " + elem.clientHeight + "<BR>";
if (window.logme) document.getElementById("log").insertAdjacentHTML("beforeEnd", msg);
if (!restrict) elem.lastSave = elem.outerText;
}
</SCRIPT>
</HEAD>
<BODY style="margin:5%" onLoad="prep()">
How do you explain the following (must run with IE 5.5+)?<BR><BR>
1) Put cursor at end of ride. Type a space, then an a, then a w.
Note that upon typing the a the entire text is obscured by a horizontal scroll bar.
The DIV expanded to accomodate the a, but there was room added for the vertical
scroll bar (the div got wider). Therefore there was room to fit the entire text
on one line so it collapses again. And gets covered by the horizontal scroll bar.
Without the restrict var, there would be an incessant flickering as the size kept
altering from 1 to 2 lines.<BR><BR>
2) This time, instead of typing ' aw', type a space, then a semicolon, and from
then on any characters (the same effect may be achieved by typing two spaces
and then any character). The semicolon is not wide enough to cause an overflow onto
two lines. But a curious thing that happens is that the cell width gets adjusted,
and it does not recover. This is very strange.<BR><BR>
3) If the myCell.style.width line in prep() is commented out, it should be
replaceable by uncommenting the four lines above it. Ie. using a COLGROUP to
set the width. However, regardless of what is typed, the behaviour seens to
resemble that of the previous section.<BR><BR>
4) If the style of the SPAN is prefixed with "border:solid 1px blue;" then
the cell starts out completely filled with a horizontal gray scrollbar.
<BR><TABLE border id=myTab>
<TR><TD id=myCell><SPAN contentEditable
style="overflow:auto;height:1.21em;width:100%">ride</SPAN></TD></TR>
</TABLE>
<BR>
<BUTTON type=button accesskey=S onclick="window.logme=false"><u>S</u>top logging</BUTTON><BR>
<BR>
<DIV id=log style="overflow:auto;width:10in;height:7in;border:solid 1px yellow">This is the log<BR></DIV>
</BODY>
</HTML>