1. USE THE JS FILE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
2. DOCUMENT.READY
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#cbxScroll").click(function () {
if ($('#cbxScroll').attr('checked')) {
window.setInterval("checkScroll(document.getElementById('divLeft'), document.getElementById('divRight'))", 1);
}
else {
window.setTimeout('location.reload()', 10);
}
});
});
// Multiple Scroll - START
var lastSeen = [0, 0];
function checkScroll(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollTop != lastSeen[0]) control = div1;
else if (div2.scrollTop != lastSeen[1]) control = div2;
if (control == null) return;
else div1.scrollTop = div2.scrollTop = control.scrollTop;
lastSeen[0] = div1.scrollTop;
lastSeen[1] = div2.scrollTop;
}
// Multiple Scroll - END
</script>
3. INSIDE BODY TAG
<div id="divScroll" style="margin-left: 1100px">
<input id="cbxScroll" type="checkbox" />Enable Multiple Scroll
</div>
<div style="width: 1100px;">
<div id="divLeft" style="width: 500px; height: 100px; border: groove gray; float: left;
overflow: scroll">
ssss<br />
aaaa<br />
cccc<br />
dddd<br />
zzzz<br />
eeee<br />
qqqq<br />
xxxx
</div>
<div id="divRight" style="width: 500px; height: 100px; border: groove gray; float: left;
margin-left: 10px; overflow: scroll">
ssss<br />
aaaa<br />
cccc<br />
dddd<br />
zzzz<br />
eeee<br />
qqqq<br />
xxxx
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
2. DOCUMENT.READY
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#cbxScroll").click(function () {
if ($('#cbxScroll').attr('checked')) {
window.setInterval("checkScroll(document.getElementById('divLeft'), document.getElementById('divRight'))", 1);
}
else {
window.setTimeout('location.reload()', 10);
}
});
});
// Multiple Scroll - START
var lastSeen = [0, 0];
function checkScroll(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollTop != lastSeen[0]) control = div1;
else if (div2.scrollTop != lastSeen[1]) control = div2;
if (control == null) return;
else div1.scrollTop = div2.scrollTop = control.scrollTop;
lastSeen[0] = div1.scrollTop;
lastSeen[1] = div2.scrollTop;
}
// Multiple Scroll - END
</script>
3. INSIDE BODY TAG
<div id="divScroll" style="margin-left: 1100px">
<input id="cbxScroll" type="checkbox" />Enable Multiple Scroll
</div>
<div style="width: 1100px;">
<div id="divLeft" style="width: 500px; height: 100px; border: groove gray; float: left;
overflow: scroll">
ssss<br />
aaaa<br />
cccc<br />
dddd<br />
zzzz<br />
eeee<br />
qqqq<br />
xxxx
</div>
<div id="divRight" style="width: 500px; height: 100px; border: groove gray; float: left;
margin-left: 10px; overflow: scroll">
ssss<br />
aaaa<br />
cccc<br />
dddd<br />
zzzz<br />
eeee<br />
qqqq<br />
xxxx
</div>
</div>
No comments:
Post a Comment