K
Kai Grossjohann
I'm trying to synchronize the scrolling of two <div> elements. The
top element is for showing column headers, the bottom div shows the
table rows.
I consed up the following HTML/JavaScript concoction which does
something useful in IE and also in Mozilla 1.4.
However, the problem is that it only works in Mozilla if I say
overflow:auto in the top frame, it ceases working if I say
overflow:hidden. But saying overflow:hidden is desirable because it
eliminates a superfluous scrollbar. overflow:hidden works in IE.
Any suggestions on getting rid of the scrollbars in Mozilla, too?
tia,
Kai
<html>
<head>
<title>Testing div scrolling</title>
<script language="JavaScript">
<!-- // Begins
var topdiv;
var bottomdiv;
IE = (document.all) ? true : false;
last_x = 0;
last_y = 0;
function synchronizeScroll() {
if (bottomdiv.scrollLeft) {
topdiv.scrollLeft = bottomdiv.scrollLeft;
}
}
// Ends -->
</script>
</head>
<body onScroll="synchronizeScroll()"
onLoad="if (!IE) window.setInterval('synchronizeScroll()',
100);">
<div id="topdiv" style="width:200px;overflow:auto">
<pre>123456789|123456789|123456789|123456789|123456789|123456789|123456789|</pre></div>
<hr>
<div onScroll="synchronizeScroll()"
id="bottomdiv" style="width:200px;height:100px;overflow:scroll">
<pre>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</pre>
</div>
<script language="JavaScript">
topdiv = document.getElementById('topdiv');
bottomdiv = document.getElementById('bottomdiv');
</script>
</body>
</html>
top element is for showing column headers, the bottom div shows the
table rows.
I consed up the following HTML/JavaScript concoction which does
something useful in IE and also in Mozilla 1.4.
However, the problem is that it only works in Mozilla if I say
overflow:auto in the top frame, it ceases working if I say
overflow:hidden. But saying overflow:hidden is desirable because it
eliminates a superfluous scrollbar. overflow:hidden works in IE.
Any suggestions on getting rid of the scrollbars in Mozilla, too?
tia,
Kai
<html>
<head>
<title>Testing div scrolling</title>
<script language="JavaScript">
<!-- // Begins
var topdiv;
var bottomdiv;
IE = (document.all) ? true : false;
last_x = 0;
last_y = 0;
function synchronizeScroll() {
if (bottomdiv.scrollLeft) {
topdiv.scrollLeft = bottomdiv.scrollLeft;
}
}
// Ends -->
</script>
</head>
<body onScroll="synchronizeScroll()"
onLoad="if (!IE) window.setInterval('synchronizeScroll()',
100);">
<div id="topdiv" style="width:200px;overflow:auto">
<pre>123456789|123456789|123456789|123456789|123456789|123456789|123456789|</pre></div>
<hr>
<div onScroll="synchronizeScroll()"
id="bottomdiv" style="width:200px;height:100px;overflow:scroll">
<pre>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
</pre>
</div>
<script language="JavaScript">
topdiv = document.getElementById('topdiv');
bottomdiv = document.getElementById('bottomdiv');
</script>
</body>
</html>