Menu
I have an HTML layout based on tabs (say 5). In each tab I load an iframe. The iframe contents are variations of one another that the user can compare by switching tabs.
How can I, in javascript, synchronize the scrolling of all iframes vertically and horizontally? In other words, scrolling in one iframe should scroll by the same amount all other iframes, allowing the user to compare the same data.
Bonus points: iframe content is loaded only when the user opens the tab for the first time. So newly opened iframes should directly scroll to the same place as already opened iframes.
Thanks.
435
While this works for divs, it does not work for iframes.
Here's what you can do,
$($('#iframe1').contents()).scroll(function(){
$($('#iframe2').contents()).scrollTop($(this).scrollTop());
});
With jQuery's scroll event, you should be able to synchronize them.
Edit: No plugins required. Here's the code that worked for me:
<html>
<head>
<SCRIPT language="javascript" type="text/javascript" src="jquery-1.3.2.js"></SCRIPT>
<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());
});
});
</SCRIPT>
</head>
<body>
<div id="div1" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>
<div id="div2" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
