469,644 Members | 1,746 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,644 developers. It's quick & easy.

Cross browser horizontal overflow

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>&nbsp;";
return false; }
</script>
</body></html>

Nov 5 '06 #1
2 5035
VK
<http://groups.google.com/group/comp.lang.javascript/msg/b2f517d04b0749f5>
If there are comments towards simplification/improvement, please share.
It is a nice code working as intended. I just don't like
"non-structural structures" :-) in documents: thus elements that are
not implied by the document content but used as presentational
workarounds. In this case that would be great to avoid somehow DIV
wrapper in the TD. I realise that it's hardly/not doable. So please
take it as a general wishful comment.

Nov 5 '06 #2
Csaba Gabor wrote:

[snip]
<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>&nbsp;";
return false; }
</script>
</body></html>
This isn't very important, but my Mozilla is not vary happy with it :-)
You're using three reserved keywords as variable names
here:
for (var j in {short:0, long:1}) //line 24 in my cut'n'paste

and here:
for (var final=""; amount; amount>>=1,str+=sep+str) //line 39

--
Riccardo
Nov 6 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

34 posts views Thread by Marian Aldenhövel | last post: by
1 post views Thread by Peter Mount | last post: by
12 posts views Thread by Kepler | last post: by
reply views Thread by Lucas, Todd | last post: by
2 posts views Thread by musicmouse | last post: by
1 post views Thread by Dan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.