Below is code to scroll 2 div/table together:
< div id="div1" style="width:400px !important; height: 150px !important; overflow: auto; border: 1px solid Black;" onscroll="scrollDiv('div1', 'div2', 1)" >
< table border="0" cellpadding="0" cellspacing="0" width="500px" >
< tr >
< td align="center" >
< br / >ASP.Net< br / >< br / >SQL Server< br / >< br / >JavaScript< br / >< br / >JQuery< br / >< br / >AJAX< br / >< br / >HTML< br / >< br / >CSS< br / >< br / >
< /td >
< td align="center" >
< br / >HTML< br / >< br / >PHP< br / >< br / >WCP< br / >< br / >SilverLight< br / >< br / >Jhoomla< br / >< br / >ASP< br / >< br / >StyleSheet< br / >< br / >
< /td >
< /tr >
< /table >
< /div >
< div id="div2" style="width:400px !important; height: 150px !important; overflow: auto; border: 1px solid Black;" onscroll="scrollDiv('div1', 'div2', 2)" >
< table border="0" cellpadding="0" cellspacing="0" width="500px" >
< tr >
< td align="center" >
< br / >ASP.Net< br / >< br / >SQL Server< br / >< br / >JavaScript< br / >< br / >JQuery< br / >< br / >AJAX< br / >< br / >HTML< br / >< br / >CSS< br / >< br / >
< /td >
< td align="center" >
< br / >HTML< br / >< br / >PHP< br / >< br / >WCP< br / >< br / >SilverLight< br / >< br / >Jhoomla< br / >< br / >ASP< br / >< br / >StyleSheet< br / >< br / >
< /td >
< /tr >
< /table >
< /div >
< script type="text/javascript" >
function scrollDiv(divA, divB, divNo) {
var div1 = $('#' + divA);
var div2 = $('#' + divB);
if (!div1 || !div2) return;
var control = null;
if (divNo == 1) control = div1;
else if (divNo == 2) control = div2;
if (control == null) return;
else {
div1.scrollLeft(control.scrollLeft());
div2.scrollLeft(control.scrollLeft());
div1.scrollTop(control.scrollTop());
div2.scrollTop(control.scrollTop());
}
}
< /script >
< div id="div1" style="width:400px !important; height: 150px !important; overflow: auto; border: 1px solid Black;" onscroll="scrollDiv('div1', 'div2', 1)" >
< table border="0" cellpadding="0" cellspacing="0" width="500px" >
< tr >
< td align="center" >
< br / >ASP.Net< br / >< br / >SQL Server< br / >< br / >JavaScript< br / >< br / >JQuery< br / >< br / >AJAX< br / >< br / >HTML< br / >< br / >CSS< br / >< br / >
< /td >
< td align="center" >
< br / >HTML< br / >< br / >PHP< br / >< br / >WCP< br / >< br / >SilverLight< br / >< br / >Jhoomla< br / >< br / >ASP< br / >< br / >StyleSheet< br / >< br / >
< /td >
< /tr >
< /table >
< /div >
< div id="div2" style="width:400px !important; height: 150px !important; overflow: auto; border: 1px solid Black;" onscroll="scrollDiv('div1', 'div2', 2)" >
< table border="0" cellpadding="0" cellspacing="0" width="500px" >
< tr >
< td align="center" >
< br / >ASP.Net< br / >< br / >SQL Server< br / >< br / >JavaScript< br / >< br / >JQuery< br / >< br / >AJAX< br / >< br / >HTML< br / >< br / >CSS< br / >< br / >
< /td >
< td align="center" >
< br / >HTML< br / >< br / >PHP< br / >< br / >WCP< br / >< br / >SilverLight< br / >< br / >Jhoomla< br / >< br / >ASP< br / >< br / >StyleSheet< br / >< br / >
< /td >
< /tr >
< /table >
< /div >
< script type="text/javascript" >
function scrollDiv(divA, divB, divNo) {
var div1 = $('#' + divA);
var div2 = $('#' + divB);
if (!div1 || !div2) return;
var control = null;
if (divNo == 1) control = div1;
else if (divNo == 2) control = div2;
if (control == null) return;
else {
div1.scrollLeft(control.scrollLeft());
div2.scrollLeft(control.scrollLeft());
div1.scrollTop(control.scrollTop());
div2.scrollTop(control.scrollTop());
}
}
< /script >
Very useful post.
ReplyDelete