Question

How do I sync two horizontal scrollbars if I am using two frames or iframes? Thanks!

<SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></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());
});

});

            <iframe id="div1" SRC="UserQueue_Header.asp?Occasion=<%=Occasion%>&GPL=<%=GPL%>" NAME="UserQueue_Header" width=100%>
                <p>Your browser does not support iframes.</p>
            </iframe>

            <iframe id="div2" SRC="UserQueue_Detail.asp?Occasion=<%=Occasion%>&GPL=<%=GPL%>" NAME="UserQueue_Detail" width=100%>
            </iframe>

Answer 1

This worked for me in Firefox but not in IE.

<SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></SCRIPT>
<SCRIPT language="javascript" type="text/javascript" src="jquery.frameready.js"></SCRIPT>

$(document).ready(function()

{
// Sync Header Frame with Detail Frame`
$.frameReady( function() {

    var ifr2 = $(window.parent.document.getElementsByName('UserQueue_Detail')).contents();

   $(document).scroll( function(){

         ifr2.scrollLeft($(document).scrollLeft());
    });
  },
  "UserQueue_Header"
);

// Sync Detail Frame with Header Frame
$.frameReady( function() {

    var ifr1 = $(window.parent.document.getElementsByName('UserQueue_Header')).contents();

   $(document).scroll( function(){

         ifr1.scrollLeft($(document).scrollLeft());
    });
  },
  "UserQueue_Detail"
);

});