C
Csaba Gabor
I have a table that sizes to take up most of the page's width. The
(mostly empty) rightmost cell of a particular row starts off as wide as
it can, but it might be that it gets something that exceeds its initial
width, such as a long web address. In this case, I would like the
horizontal overflow to be active. However, it seems that if I affix
the style overflow-x:auto, then IE6 will cover the bottom line (of the
text) with the horizontal scroll bar upon overflow and FF 1.5 will do
the same if there is only one line involved (thus showing nothing).
Having the scrollbar cover text is not my idea of good horizontal
scrolling.
So the following accomodates various line counts in IE6 and FF 1.5. If
there are comments towards simplification/improvement, please share.
Csaba Gabor from Vienna
<html><head><title>Overflow demo page</title></head>
<body bgcolor=yellow style=margin-left:.4in>
<table id=mytab width="100%" border>
<tr><td width='1%' valign=top><nobr>Row 1</nobr></td>
<td valign=top><div id=mydiv style="overflow-x:auto">
Longer text goes here</mydiv></td></tr>
<tr><td colspan=2>Second line</td></tr>
</table>
<br><br>
<table border id=tblBtns>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td colspan=2 align=center><button
onclick="return changeDiv('broken')"
type=button>Style: broken</button></td></tr>
<script type='text/javascript'>
// install the buttons
var tblBtns = document.getElementById('tblBtns');
for (var i=1;i<=3;++i)
for (var j in {short:0, long:1}) {
var html = "<button type=button " +
"onclick=\"return changeDiv('" +
j + "', " + i + ")\">Lines: " +
i + ", style: " + j + "</button>";
tblBtns.rows[i-1].cells[j=="long" ? 1 : 0]
.innerHTML = html; }
// fix the special div's width to engage overflow handling
var mydiv = document.getElementById('mydiv');
mydiv.setWidth = mydiv.style.width = mydiv.offsetWidth;
function repeat(str, amount, sep) {
// repeat string (str) amount times, separated by sep
if (!sep) sep = "";
for (var final=""; amount; amount>>=1,str+=sep+str)
if (amount&1) final += (!final?"":sep) + str;
return final; }
function changeDiv (style, lineCount) {
// change the text of the top row, right cell
var div=document.getElementById('mydiv');
var aText = ["This", "text", "is", "repeated", 7, "times"];
var separator = (style!="long") ? " " : "_";
var count = (style=="long") ? 10 : 1;
if (style=="broken") lineCount = 25;
aText[4] = count * lineCount;
var baseText = aText.join(separator);
var lineUnit = repeat(baseText, count);
var lineSep = (style=="broken") ? "" : "<br>";
div.innerHTML = repeat(lineUnit, lineCount, lineSep);
if (div.scrollWidth>div.setWidth &&
div.scrollHeight==div.offsetHeight)
div.innerHTML += "<br> ";
return false; }
</script>
</body></html>
(mostly empty) rightmost cell of a particular row starts off as wide as
it can, but it might be that it gets something that exceeds its initial
width, such as a long web address. In this case, I would like the
horizontal overflow to be active. However, it seems that if I affix
the style overflow-x:auto, then IE6 will cover the bottom line (of the
text) with the horizontal scroll bar upon overflow and FF 1.5 will do
the same if there is only one line involved (thus showing nothing).
Having the scrollbar cover text is not my idea of good horizontal
scrolling.
So the following accomodates various line counts in IE6 and FF 1.5. If
there are comments towards simplification/improvement, please share.
Csaba Gabor from Vienna
<html><head><title>Overflow demo page</title></head>
<body bgcolor=yellow style=margin-left:.4in>
<table id=mytab width="100%" border>
<tr><td width='1%' valign=top><nobr>Row 1</nobr></td>
<td valign=top><div id=mydiv style="overflow-x:auto">
Longer text goes here</mydiv></td></tr>
<tr><td colspan=2>Second line</td></tr>
</table>
<br><br>
<table border id=tblBtns>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td colspan=2 align=center><button
onclick="return changeDiv('broken')"
type=button>Style: broken</button></td></tr>
<script type='text/javascript'>
// install the buttons
var tblBtns = document.getElementById('tblBtns');
for (var i=1;i<=3;++i)
for (var j in {short:0, long:1}) {
var html = "<button type=button " +
"onclick=\"return changeDiv('" +
j + "', " + i + ")\">Lines: " +
i + ", style: " + j + "</button>";
tblBtns.rows[i-1].cells[j=="long" ? 1 : 0]
.innerHTML = html; }
// fix the special div's width to engage overflow handling
var mydiv = document.getElementById('mydiv');
mydiv.setWidth = mydiv.style.width = mydiv.offsetWidth;
function repeat(str, amount, sep) {
// repeat string (str) amount times, separated by sep
if (!sep) sep = "";
for (var final=""; amount; amount>>=1,str+=sep+str)
if (amount&1) final += (!final?"":sep) + str;
return final; }
function changeDiv (style, lineCount) {
// change the text of the top row, right cell
var div=document.getElementById('mydiv');
var aText = ["This", "text", "is", "repeated", 7, "times"];
var separator = (style!="long") ? " " : "_";
var count = (style=="long") ? 10 : 1;
if (style=="broken") lineCount = 25;
aText[4] = count * lineCount;
var baseText = aText.join(separator);
var lineUnit = repeat(baseText, count);
var lineSep = (style=="broken") ? "" : "<br>";
div.innerHTML = repeat(lineUnit, lineCount, lineSep);
if (div.scrollWidth>div.setWidth &&
div.scrollHeight==div.offsetHeight)
div.innerHTML += "<br> ";
return false; }
</script>
</body></html>
in documents: thus elements that are