I have a task to launch 2 pdf's in a single html page and do the pdf's comparsion side by side, so I have create 2 iframes for each comparing, however I have a problem on sync the scroll bar behaviour, like when I move the vertical scroll bar on the left side web page(iframe1), then the scroll bar on right side web page(iframe2) will move as well. Is there anyone know how to do it? or other method beside using iframe, but available to launch 2 web pages and sync the scroll bar? Thanks in advance.
Here is the code im trying
<html>
<head>
<script src="http://code.jquery.com/jquery-1.3.2.js"></script>
<style>
.container {
width: 80%;
height: 200px;
margin: auto;
padding: 10px;
}
.div1 {
width: 15%;
height: 200px;
float: left;
overflow:auto;
border:1px solid black;
}
.div2 {
margin-left: 15%;
width: 15%;
height: 200px;
overflow:auto;
border:1px solid black;
}
</style>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div1").scrollLeft($("#div2").scrollLeft());
});
$($("#iframe1").contents()).scroll(function(){
$($("#iframe2").contents()).scrollTop($(this).scrollTop());
});
});
</SCRIPT>
</head>
<body>
<section class="container">
<div id="div1" class="div1">
<iframe id="iframe1" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
<div id="div2" class="div2">
<iframe id="iframe2" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
</section>
</body>
</html>