Put this code in the <head> of your page -
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.allscroll_container')
.css("position", "relative")
.css("width", $(this).find('.allscroll').width()+16 + "px")
.css("height", $(this).find('.allscroll').height()+16 + "px")
.css("background-color", "#CCC");
$('.allscroll')
.css("position", "relative")
.css("overflow", "scroll")
.css("top", "16px")
.css("left", "16px");
$('.allscroll').before('<div class="x-scrollbar"></div>');
$('.x-scrollbar')
.css("position", "absolute")
.css("width", ($('.allscroll').width()-16) + "px")
.css("height", "16px")
.css("top", "0px")
.css("left", "16px")
.css("overflow-x", "scroll")
.css("overflow-y", "hidden")
.html(eval($(this).parent().find('.allscroll').html()+""));
$('.allscroll').before('<div class="y-scrollbar"></div>');
$('.y-scrollbar')
.css("position", "absolute")
.css("width", "16px")
.css("height", ($('.allscroll').height()-16) + "px")
.css("top", "16px")
.css("left", "0px")
.css("overflow-x", "hidden")
.css("overflow-y", "scroll")
.html(eval($(this).parent().find('.allscroll').html()+""));
$('.allscroll_container').each(function() {
var html = $(this).find('.allscroll').html();
$(this).find('.x-scrollbar').html(html);
$(this).find('.y-scrollbar').html(html);
main = $(this).find('.allscroll:first');
x = $(this).find('.x-scrollbar:first');
y = $(this).find('.y-scrollbar:first');
divs[divs.length] = [main, x];
lastSeen[lastSeen.length] = [0, 0];
window.setInterval("updateScrollX("+(divs.length-1)+", "+(lastSeen.length-1)+")", 20);
divs[divs.length] = [main, y];
lastSeen[lastSeen.length] = [0, 0];
window.setInterval("updateScrollY("+(divs.length-1)+", "+(lastSeen.length-1)+")", 20);
});
});
var divs = new Array();
var lastSeen = new Array();
function updateScrollX(i, j) {
div1 = divs[i][0];
div2 = divs[i][1];
var control = null;
if(div1.scrollLeft() != lastSeen[j][0]) control = div1;
else if(div2.scrollLeft() != lastSeen[j][1]) control = div2;
if(control != null) {
div1.scrollLeft(control.scrollLeft());
div2.scrollLeft(control.scrollLeft());
}
lastSeen[j][0] = div1.scrollLeft();
lastSeen[j][1] = div2.scrollLeft();
}
function updateScrollY(i, j) {
div1 = divs[i][0];
div2 = divs[i][1];
var control = null;
if(div1.scrollTop() != lastSeen[j][0]) control = div1;
else if(div2.scrollTop() != lastSeen[j][1]) control = div2;
if(control != null) {
div1.scrollTop(control.scrollTop());
div2.scrollTop(control.scrollTop());
}
lastSeen[j][0] = div1.scrollTop();
lastSeen[j][1] = div2.scrollTop();
}
//]]>
</script>
Put this code in the <body> of your page -<div class="allscroll_container">
<div class="allscroll">
Your Content Here
</div>
</div>
You can have many copies of the below divs, and they will have their own (seperate) all-sided scrollers which won't interfere with the others on the same page. You will need a wrapper div to have a class "allscroll_container" and the div with 4-sided scroller to have the class "allscroll".
