synchronize scrolling between iframe content and parent window content

How can I synchronize the iframe scrolling with the content of its parent window. I've been struggling with this all day with no luck. See my html below. Is it possible to synchronize? As I scroll left in the iframe, I'd like the content in the parent to scroll identically.

parent window:

<html>
<head>
<title>Parent Content</title>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" scroll=no>
<table border="1" id="table1" bgcolor="#00FFFF">
<tr>
<td height="50">parent col 1<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 2<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 3<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 4<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 5<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
</tr>
</table>
<IFRAME src="iframeSrc.htm" width="100%"  scrolling=auto id="main" name="main" target="main" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" style="position:absolute; top:56" onLoad="document.getElementById('main').style.height=document.body.clientHeight-56"></IFRAME>
</body>
</html>
iframesrc.htm:
<html>

<head>
<title>IFrame Content</title>
<base target="main">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table border="1" id="table1" bgcolor="#FFFF00">
<tr>
<td>iframe col 1<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td>iframe col 2<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td>iframe col 3<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td>iframe col 4<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td>iframe col 5<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="72">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="78">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="76">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="72">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="73">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="76">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="72">&nbsp;</td>
</tr>
<tr>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="75">&nbsp;</td>
<td height="68">&nbsp;</td>
</tr>
</table>
</body>
</html>
GessWurkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

amit_gCommented:
Change your main page to ...

<html>
<head>
<title>Parent Content</title>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" scroll=no>
<IFRAME src="HeaderiframeSrc.htm" width="100%"  scrolling=auto id="header" name="header" target="header" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" style="position:absolute; top:0" onLoad="document.getElementById('header').style.height=document.body.clientHeight-56"></IFRAME>
<IFRAME src="iframeSrc.htm" width="100%"  scrolling=auto id="main" name="main" target="main" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" style="position:absolute; top:56" onLoad="document.getElementById('main').style.height=document.body.clientHeight-56"></IFRAME>
</body>
</html>

Move header to HeaderiframeSrc.htm ...

<html>
<head>
<title>Parent Content</title>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table border="1" id="table1" bgcolor="#00FFFF">
<tr>
<td height="50">parent col 1<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 2<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 3<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 4<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
<td height="50">parent col 5<br><img border="0" src="images/spacer.gif" width="250" height="3"></td>
</tr>
</table>
</body>
</html>

and in iframeSrc.htm

<html>

<head>
<title>IFrame Content</title>
<script>
function SyncHeaderScroll()
{
    parent.frames["header"].document.body.scrollLeft = window.document.body.scrollLeft;
}
</script>
<base target="main">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onscroll="SyncHeaderScroll();">
<table border="1" id="table1" bgcolor="#FFFF00">
...
...


You need to take care of the vertical scrollbar width in the header iframe.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GessWurkerAuthor Commented:
amit_g: yes, of course...just like the synchronized frameset I was replacing. one issue: when I drag scroll all the way right, the two tables aren't quite aligned properly; the second iframe continues just a bit after the top iframe has stopped. Maybe I need to play with margin settings or something...
GessWurkerAuthor Commented:
Worked it out. Thanks amit_g!
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

amit_gCommented:
I mentioned that in the post.

>>You need to take care of the vertical scrollbar width in the header iframe.

I did not take care of the vertical scrollbar width due to which the tables go out of sync. For others benefit, please post how you resolved it to make this a good PAQ.
GessWurkerAuthor Commented:
amit_g: The problem I described was only apparent with the sample html source I submitted. When I implemented within my actual application, the problem didn't occur - I'm not sure why it was resolved. It may have to do with how I specifiy table widths in my application, but maybe it's something else. I'll play with the example I submitted and see if I can see what I can come up with.
amit_gCommented:
You probably don't have enough data for the vertical scrollbar to show. Anyway :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.