JS and Flexroll conflict

[henryhayes]

Id like to control scrolling of two divs with one scrollbar as in this example here

http://www.byenshjemmesider.dk/

At the same time i want to customize the scrollbar. Ive been using Flexcroll which work fine on a single div. But as soon as i insert flexcroll.js to head of document in the example, the sync of the two divs breaks and only the div with Flexcroll attached scrolls.

Anyone know how to solve this? You can find the code im using in the example or i can post.

I dont have to use Flexcroll, so if you know of any other application that can customize scrollbar and control scroll on two divs at the same time, id appreciate a link.

[gentleone]

have you tried to load first flexscroll.js in the head, so before that scrollDiv javascript function?

otherwise you could try jScrollpane which use jQuery
http://jscrollpane.kelvinluck.com/

[henryhayes]

Gentleone, please specify in which order to load, which one goes first?

[henryhayes]

Anyway, got your point and tested by placing scripts any possible order. The scripts are still conflicting for some reason..

[henryhayes]

Tried jScrollPane instead of Flexcroll. Same issue, the sync between divs breaks..
Any suggestions?

[edbr]

looked at your page and first div shows
<div id="div1"
style="overflow: hidden; height:200px; width:500px; border:solid 4px #990000; position: relative; float:left; margin:30px;">

and the second
<div id="div2" class="flexcroll" onscroll="scrollDiv(this,'div1');"
style="overflow: auto; height:200px; width:500px; position: relative; float:left; border:solid 4px #009900; margin:30px;">
so im not sure what im looking for

[henryhayes]

Thx for responses. Made both divs scroll with one customized scrollbar by using jscrollpane and this code in head:


<script type="text/javascript">
$(function()
{
$("#div2").bind('jsp-scroll-y', function(event, scrollPositionY) {
$("#div1").scrollTop(scrollPositionY);
}).jScrollPane();
$("#document").jScrollPane();
});
</script>