GessWurker
asked on
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.getElemen
</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"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="78"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="76"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="73"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="76"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="68"> </td>
</tr>
</table>
</body>
</html>
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.getElemen
</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"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="78"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="76"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="73"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="76"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="72"> </td>
</tr>
<tr>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="75"> </td>
<td height="68"> </td>
</tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Worked it out. Thanks amit_g!
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.
>>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.
ASKER
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.
You probably don't have enough data for the vertical scrollbar to show. Anyway :)
ASKER