By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

Sync scrolling of divs (not frames)

P: n/a
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|12345 6789|123456789|123456789|</pre></div>
<hr>
<div onScroll="synchronizeScroll()"
id="bottomdiv" style="width:200px;height:100px;overflow:scroll">
<pre>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
</pre>
</div>
<script language="JavaScript">
topdiv = document.getElementById('topdiv');
bottomdiv = document.getElementById('bottomdiv');
</script>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Ka*************@gmx.net (Kai Grossjohann) wrote in message news:<e8**************************@posting.google. com>...

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?


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
Jul 20 '05 #2

P: n/a
Kai Grossjohann wrote:
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.


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
Jul 20 '05 #3

P: n/a
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Have you ever thought of users without client-side JavaScript support?


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
Jul 20 '05 #4

P: n/a
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
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")
{
...
}
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.
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.


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

Jul 20 '05 #5

P: n/a
Kai Grossjohann wrote:
Thomas 'PointedEars' Lahn [...] writes:
And please use http://validator.w3.org/, your HTML is far from valid.
OK. I guess there is also a command-line version, I've been wanting
to have this for quite a while now.


http://validator.w3.org/source/
http://www.w3.org/People/Raggett/tidy/
Maybe even somebody has something for Eclipse...


http://sourceforge.net/project/showf...ease_id=194394
HTH

PointedEars
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.