Please help! Trying to synch horizontal scrolling of two DIVs on MAC/IE5.2

JavaScript
1

Hello Javascript experts! I am in sore need of your help!

I have two DIVS, one for a table body, and one for the column headers. The table has lots of columns, so horizontal scrolling is a must. I am trying to make it so that when the body div is scrolled left or right, the header div scrolls along with it. Unfortunately one of the requirements of the project is that it must work on MAC/IE5.2.2, and the “scrollLeft” property on this browser only works for the “document.body” element. Because of this I cannot for the life of me figure out how to get the distance that the table body div has scrolled.

I have also tried using overflow-x and overflow-y to work around this, but it seems these properties aren’t supported by MAC/IE5.2.2 either.

So is there a way to synchronize the scrolling of two divs, or perhaps a completely different way to accomplish what I am trying to do? Any help will be greatly appriciated!

Thanks in advance,
Kalirion

2

Ya - just absolutely position one inside the other, or both absolutely positioned inside a 3rd, innocuous DIV. Then you only have to manage scrolling for one, and the CSS will take care of the rest.

3

I would do that, except I want the table body div to be able to scroll vertically while the header div remains on the screen. I guess I should have mentioned that in my post.

Thanks for the reply,
Kalirion

4

Oh, so it’s not a big long table, but short, and scrolls “underneath” the headings?

Okay, you need it to work with IE-Mac. What else will this have to work on?

5

No, its a long and wide table that scrolls both vertically and horizontally. But the headings should always stay on top, so they must be affected by the horizontal scrolling, but not the vertical scrolling.

It must also work on Win/IE6.0, and it does that right now.

6

According to the MSDN Reference for scrollLeft, IE Mac supports this property for both DIV and TABLE elements from version 4 on up, which obviously includes 5.2. Is this not accurate?

7

Nope, its not accurate at all. scrollLeft works for document.body on IE Mac, but for elements inside of body it always returns 0. MSDN does not seem to be all that accurate when it comes to listing features supported for IE Mac. For example, the swapNode() method is supposed to be supported, but its not.

8

For those who want to see what I’m trying to accomplish, a test sample is at http://www.geocities.com/kalirion/test.html

This works on Win IE 6, but not Mac IE 5.2.2.

Anyway, time to go home for the night.

9

Look into the API at www.cross-browser.com. Mike Foster, the author, is a member here and uses this forum for his support. I don’t have much for-Mac DHTML experience, and if MSDN doesn’t help, then a well written API like the x or cbe libraries is gonna be your best bet.

10

Well, it seems the cbe’s scrollLeft() method makes use of the IE scrollLeft property, so the same problem remains.

In any case, it seems to me that any API like cross-browser still depends on methods and properties supported by the specific browser viewing the page. That is, you can create all the new classes you want, but if the browser has no way of telling your classes how much an element has been scrolled, there’s nothing you can do about it without going into the guts of the browser itself.

Oh well. Thanks for trying to help beetle!

11

Thanks beetle :slight_smile:

Hi Kalirion. I played around with a few variations of beetle’s original suggestion, but without scrollLeft I can’t see how to do it using overflow:auto.

As far as using a dhtml API, I think beetle is referring to using a dhtml scroller (not using the built-in scrolling capability of IE elements). This would not rely on the scrollXxx properties. It would implement scrolling from scratch. (It will also have to implement scrollbars and dragging.)

I don’t have any examples that fit your particular need. I started on one, but I may not have much time this week to put into it.

There are other authors who already have dhtml scrollers implemented. Are you interested in this dhtml solution?

12

I think I have an idea that just might work :slight_smile:

You said IE5/Mac does not support ele.scrollLeft - but does it support ele.scrollTop?

13

What’s frustrating is that this ‘built-in scrolling support’ seems to be outside the object model. If you were to implement scrolling using clipping - then you would have to clip and move. Clipping sets the viewport size. Moving keeps the viewport in the same position (for the user) and simulates scrolling. However, neither the clip nor position properties change when scrolling with the built-in scroll support. I found this to be true in Firebird as well.

Here’s what I was trying, but it uses ele.scrollTop - so this may not work in IE5/Mac.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>X Scroller Demo</title>
<style type='text/css'>
html {
  margin:0; padding:0;
}
body {
  color:#000; background:#fff; margin:0; padding:0;
  font-family:verdana,arial,sans-serif; font-size:12px;
}
#scroller1 {
  position:absolute; overflow:auto;
  visibility:hidden;
  border:1px solid #000;
}
#header1 {
  position:absolute; overflow:hidden;
  visibility:hidden;
  color:#ccc; background:#333;
  width:1000px;
}
#body1 {
  position:absolute; overflow:hidden;
  visibility:hidden;
  color:#000; background:#9cc;
  width:1000px;
}
</style>
<script type='text/javascript' src='x.js'></script>
<script type='text/javascript'>
var s1;
window.onload = function()
{
  s1 = new xScroller(1, 10, 10, 400, 200, 30);
}
function xScroller(n, x, y, w, h, hdrH)
{
  this.scr = xGetElementById('scroller' + n);
  this.hdr = xGetElementById('header' + n);
  this.bdy = xGetElementById('body' + n);

  xResizeTo(this.scr, w, h);
  xMoveTo(this.scr, x, y);

  xHeight(this.hdr, hdrH);
  xMoveTo(this.hdr, 0, 0);
  xShow(this.hdr);

  xMoveTo(this.bdy, 0, hdrH);
  xShow(this.bdy);

  xZIndex(this.hdr, n + 1);
  xZIndex(this.bdy, n);

  xShow(this.scr);

  xAddEventListener(this.scr, 'scroll', xOnScroll, false);
}
function xOnScroll()
{
  xMoveTo(s1.hdr, 0, s1.scr.scrollTop);
/*
  var c = document.defaultView.getComputedStyle(s1.bdy,"").getPropertyValue('clip');
  window.status = s1.bdy.offsetLeft + ', ' + s1.bdy.offsetTop + ', ' + c;
*/
}
</script>
</head>
<body>

<div id='scroller1'>

<div id='header1'>
  <table width='1000' border='1'>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  </table>
</div><!-- end header1 -->

<div id='body1'>
  <table width='1000' border='1'>
  <tr><td>1 </td><td>1 </td><td>1 </td><td>1 </td><td>1 </td><td>1 </td></tr>
  <tr><td>2 </td><td>2 </td><td>2 </td><td>2 </td><td>2 </td><td>2 </td></tr>
  <tr><td>3 </td><td>3 </td><td>3 </td><td>3 </td><td>3 </td><td>3 </td></tr>
  <tr><td>4 </td><td>4 </td><td>4 </td><td>4 </td><td>4 </td><td>4 </td></tr>
  <tr><td>5 </td><td>5 </td><td>5 </td><td>5 </td><td>5 </td><td>5 </td></tr>
  <tr><td>6 </td><td>6 </td><td>6 </td><td>6 </td><td>6 </td><td>6 </td></tr>
  <tr><td>7 </td><td>7 </td><td>7 </td><td>7 </td><td>7 </td><td>7 </td></tr>
  <tr><td>8 </td><td>8 </td><td>8 </td><td>8 </td><td>8 </td><td>8 </td></tr>
  <tr><td>9 </td><td>9 </td><td>9 </td><td>9 </td><td>9 </td><td>9 </td></tr>
  <tr><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td></tr>
  <tr><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td></tr>
  <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
  <tr><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td></tr>
  <tr><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td></tr>
  </table>
</div><!-- end body1 -->

</div><!-- end scroller1 -->

</body>
</html>
14

Thanks Mike! Unfortunately scrollTop works no better on IE Mac than scrollLeft does. The DHTML scrollers might work, but it seems like too much effort for one little feature. Right now I’ve used the backslash comment hack to put the scroll bars on the DIV containing both the table headers and the data. This means that on the Mac, the headers won’t be visible if the table is scrolled vertically, by my boss and I decided that wasn’t such a big loss. Especially since for unrelated performance reasons, the table won’t be allowed to be longer than maybe 50 entries at a time.

Thanks again to everyone who tried to help! When I have other questions regarding Javascript and DHTML, I’ll be sure to bring them to this form :). Now lets all hope the MAC IE division gets their act straight sometime in the near future.

15

That sounds like a smart decision.

Good luck, Kalirion

16

That will be a tough hope to fulfill, since MS isn’t making IE for Macs anymore.

Best of luck.

17

This turned into an interesting experiment! I cleaned up my demo and put it here, in case anyone needs it.


I cleaned up
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>X Scroller Demo</title>
<style type='text/css'>
html {
  margin:0; padding:0;
}
body {
  color:#000; background:#ccc; margin:0; padding:10px;
  font-family:verdana,arial,sans-serif; font-size:12px;
}
#scroller1 {
  position:relative; overflow:auto;
  border:1px solid #000;
  width:400px; height:200px;
  margin:20px 0; padding:0;
}
#header1 {
  position:relative;
  color:#ccc; background:#333;
  width:1000px; height:30px;
  margin:0; padding:0;
}
#body1 {
  position:relative;
  color:#000; background:#9cc;
  width:1000px; height:auto;
  margin:0; padding:0;
}
</style>
<script type='text/javascript' src='../x.js'></script>
<script type='text/javascript'>
var s1;
window.onload = function()
{
  s1 = new xScroller(1);
}
function xOnScroll()
{
  xMoveTo(s1.hdr, 0, s1.scr.scrollTop);
}
function xScroller(n)
{
  this.scr = xGetElementById('scroller' + n);
  this.hdr = xGetElementById('header' + n);
  this.bdy = xGetElementById('body' + n);
  xZIndex(this.hdr, n + 1);
  xZIndex(this.bdy, n);
  xAddEventListener(this.scr, 'scroll', xOnScroll, false);
}
</script>
</head>
<body>

<div id='scroller1'>

<div id='header1'>
  <table width='1000' border='1'>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  </table>
</div><!-- end header1 -->

<div id='body1'>
  <table width='1000' border='1'>
  <tr><td>1 </td><td>1 </td><td>1 </td><td>1 </td><td>1 </td><td>1 </td></tr>
  <tr><td>2 </td><td>2 </td><td>2 </td><td>2 </td><td>2 </td><td>2 </td></tr>
  <tr><td>3 </td><td>3 </td><td>3 </td><td>3 </td><td>3 </td><td>3 </td></tr>
  <tr><td>4 </td><td>4 </td><td>4 </td><td>4 </td><td>4 </td><td>4 </td></tr>
  <tr><td>5 </td><td>5 </td><td>5 </td><td>5 </td><td>5 </td><td>5 </td></tr>
  <tr><td>6 </td><td>6 </td><td>6 </td><td>6 </td><td>6 </td><td>6 </td></tr>
  <tr><td>7 </td><td>7 </td><td>7 </td><td>7 </td><td>7 </td><td>7 </td></tr>
  <tr><td>8 </td><td>8 </td><td>8 </td><td>8 </td><td>8 </td><td>8 </td></tr>
  <tr><td>9 </td><td>9 </td><td>9 </td><td>9 </td><td>9 </td><td>9 </td></tr>
  <tr><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td></tr>
  <tr><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td></tr>
  <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
  <tr><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td></tr>
  <tr><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td></tr>
  </table>
</div><!-- end body1 -->

</div><!-- end scroller1 -->

</body>
</html>
18

Found this thread via the link above. I had a similar problem some time ago and was able to solve it after a lot of trial and error. The only caveat is that I haven’t set any doctype since the code is a bit hackish. Check it out here:

http://www.fw2.net/scroll/

I’d be interested if anyone manages to make this HTML4/XHTML1 compliant :slight_smile:

19

Very nice work, chetan!

Welcome to SitePoint Forums!

:slight_smile: