Sync scrolling of divs (not frames)

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>
 
K

Kai Grossjohann

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?
Click to expand...

It turns out that overflow:-moz-scrollbars-none works in Mozilla: the
scrollbars are hidden, yet I can scroll programmatically.

So now I have this horrible piece of JavaScript which frobs the DOM to
change the overflow attribute if running in Mozilla. Suggestions for
improvements are most appreciated.

if (topdiv.style.MozAppearance == "") {
// We seem to be running in Mozilla, so let's frob the overflow
attribute.
topdiv.style.overflow = '-moz-scrollbars-none';
}

I'm not sure about the test that finds out if we are running Mozilla.

Cheers,
Kai
 
T

Thomas 'PointedEars' Lahn

Kai said:
It turns out that overflow:-moz-scrollbars-none works in Mozilla: the
scrollbars are hidden, yet I can scroll programmatically.

So now I have this horrible piece of JavaScript which frobs the DOM to
change the overflow attribute if running in Mozilla. Suggestions for
improvements are most appreciated.

if (topdiv.style.MozAppearance == "") {
// We seem to be running in Mozilla, so let's frob the overflow
attribute.
topdiv.style.overflow = '-moz-scrollbars-none';
}

I'm not sure about the test that finds out if we are running Mozilla.
Click to expand...

You are testing the wrong thing. Test if the property is available, then
you can hope for the rest of the `style' property to work as supposed:

if (typeof topdiv.style != "undefined"
&& typeof topdiv.style.MozAppearance != "undefined")
{
...
}

The same goes for your `IE' boolean variable. See
http://pointedears.de.vu/scripts/test/whatami for details.

And please use http://validator.w3.org/, your HTML is far from valid.

Have you ever thought of users without client-side JavaScript support?


PointedEars
 
K

Kai Grossjohann

Thomas 'PointedEars' Lahn said:
Have you ever thought of users without client-side JavaScript support?
Click to expand...

I try not to think of them poor buggers. Makes me feel sad.

Some day, the result will enter the annals of history as the web app
that violates all web and accessibility guidelines in existence.

Please excuse me while I find a rock to hide under,
Kai
 
K

Kai Grossjohann

Thomas 'PointedEars' Lahn said:
You are testing the wrong thing. Test if the property is available, then
you can hope for the rest of the `style' property to work as supposed:

if (typeof topdiv.style != "undefined"
&& typeof topdiv.style.MozAppearance != "undefined")
{
...
}
Click to expand...

Ah, right. I see that I was thinking in the right direction. I will
learn. I've only been doing this JavaScript stuff for two weeks,
before that time I didn't even know how to spell JavaScript...

Thanks for teaching me.
The same goes for your `IE' boolean variable. See
http://pointedears.de.vu/scripts/test/whatami for details.
Click to expand...

Thanks. I copied the IE variable from a tutorial or sample snippet
somewhere. It was good enough for a quick exploration, but I'll
replace it, as I learn more.
And please use http://validator.w3.org/, your HTML is far from valid.
Click to expand...

OK. I guess there is also a command-line version, I've been wanting
to have this for quite a while now. Maybe even somebody has something
for Eclipse...

Kai
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Radio player with now playing 1
Filename undefined for Blob ? 1
Please Help? 0
Need help , Having problem with Drag n Drop ? 9
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with Visual Lightbox: Scripts 2
Slideshow not working properly 2
How do I fix this issue in sqaurespace code block? 1

Members online

No members online now.
Total: 280 (members: 0, guests: 280)
Robots: 335

Forum statistics

Threads
474,432
Messages
2,571,681
Members
48,796
Latest member
Greg L.

Latest Threads

Top