Friday, May 25, 2012

Multiple Scroll

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>

No comments:

Post a Comment